This extension provides useful code snippets for developing Next.js applications in Visual Studio Code.
npg
ornewpage
,: Creates a new NextJS page.tsx.nly
ornewlayout
,: Creates a new NextJS layout.tsx.
- Install the "Next.js Snippets" extension in Visual Studio Code.
- Open a Next.js file.
- Type the desired snippet shortcut and press
Tab
to insert the code.
Example:
'use client';
interface HeroProps {}
const Hero = ({}: HeroProps) => {
return (
<div>
<h1>Hero</h1>
</div>
);
};
export default Hero;
Example:
// Import your globals here
// import "@/styles/globals.css";
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
});
export const metadata = {
title: 'New page title here',
description: 'Sample description',
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}
This extension is licensed under the MIT License.