VSCode NextJS React snippets for TSX and JSX
JavaScript and Typescript NextJS snippets for VS Code
Summary
- Installation
- Search Command
- Supported languages
- NextJS Snippets List
- Core NextJS - SNIPPETS
- NextJS Components - SNIPPETS
- Imports - SNIPPETS
Installation
Visual Studio Marketplace
Here is direct link to marketplace VSCode NextJS React snippets for TSX and JSX
Launch Quick Open:
Paste the following command and press Enter:
ext install vscode-nextjs-snippets
Search command
You can search through snippets with snippet search command which can be run:
- [Windows] and [Linux]
CMD + SHIFT + ALT + S
- [maxOS]
CMD + Shift + ALT + S
Supported languages (file extensions)
- JavaScript React (.jsx)
- TypeScript React (.tsx)
NextJS Snippets List
| Prefix |
Method |
nextpage→ |
Next JS Page Component and SSR |
nextdocument→ |
Custom document component Next JS |
nextapp→ |
Custom app component Next JS |
nexterrordefault→ |
If you want to render the built-in error page you can by importing the Errorcomponent. IMPORTANT: if you have a customError component be sure to import that one instead.
next/error exports the default component used by Next.js. |
nexterrorcustom→ |
Custom error component Next JS. You must create a file "_error.js" inside your "pages" folder |
next404→ |
Custom 404 page NotFound. You must create a 404.jsx file inside "page" folder |
next500→ |
Custom 500 page for server-side error. You must create a 500.jsx file inside "page" folder |
nextgetSSRProps→ |
Async function getServerSideProps - (Server-side Rendering): Fetch data on each request. |
nextgetStaticProps→ |
Async function getStaticProps - (Static Generation): Fetch data at build time. |
nextgetStaticPaths→ |
Async function getStaticPaths - (Static Generation): Specify dynamic routes to pre-render pages based on data. |
nextapi→ |
Next JS simple api routes |
nextdynamic→ |
A dynamic imports is a good way to split your code into manageable chunks. |
nextdynamicloading→ |
In cases where you want to overwrite a Loading Component while using dynamic imports. |
nextdynamicnossr→ |
In cases where you don't want import on server-side (SSR) while using dynamic imports. |
imrouter→ |
Import useRouter |
imlink→ |
Import Next Link Component |
imimg→ |
Import Next Image Component |
imhead→ |
Import Next Head Component |
nextimg→ |
Use Next Image Component |
nextlink→ |
Use Next Link Component |
Core NextJS - SNIPPETS
nextpage
import { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
export default function $1Page({
pageComponentProps,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
return (
<PageComponent {...pageComponentProps}>
<$1PageComponent />
</PageComponent>
);
}
export async function getServerSideProps(ctx: GetServerSidePropsContext) {
return {
props: {
pageComponentProps,
},
};
}
nextgetSSRProps
// You should use getServerSideProps when:
// - Only if you need to pre-render a page whose data must be fetched at request time
import { GetServerSideProps } from "next";
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const { data } = await $1; // your fetch function here
return {
props: {
$2,
},
};
};
nextgetStaticPaths
// You should use getStaticPaths if you’re statically pre-rendering pages that use dynamic routes
import { GetStaticPaths } from "next";
export const getStaticPaths: GetStaticPaths = async (ctx) => {
const { data } = await $1; // your fetch function here
return {
paths: [
{
params: {
$2,
},
},
],
fallback: "blocking",
};
};
nextgetStaticProps
// You should use getStaticProps when:
//- The data required to render the page is available at build time ahead of a user’s request.
//- The data comes from a headless CMS.
//- The data can be publicly cached (not user-specific).
//- The page must be pre-rendered (for SEO) and be very fast — getStaticProps generates HTML and JSON files, both of which can be cached by a CDN for performance.
import { GetStaticProps } from "next";
export const getStaticProps: GetStaticProps = async (ctx) => {
const { data } = await $1; // your fetch function here
return {
props: {
$2,
},
};
};
nextapp
import type { AppProps } from "next/app";
import "../styles.css";
export default function MyApp({ Component, pageProps }: AppProps): JSX.Element {
return <Component {...pageProps} />;
}
nextdocument
import Document, {
DocumentContext,
Html,
Head,
Main,
NextScript,
} from "next/document";
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initalProps = await Document.getInitialProps(ctx);
return initalProps;
}
render() {
return (
<Html>
<Head>$1</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
next404
// pages/404.tsx
export default function Custom404() {
return (
<>
<h1>404 - Page Not Found</h1>
</>
);
}
next500
// pages/500.tsx
export default function Custom500() {
return (
<>
<h1>500 - Server-side error occurred</h1>
</>
);
}
nextapi
import type { NextApiRequest, NextApiResponse } from "next";
type $1Data = {
$2name: string;
};
export default function $3(req: NextApiRequest, res: NextApiResponse<$1Data>) {
res.status(200).json({ $2name: "Example" });
}
nexterrorcustom
import { NextPageContext } from "next";
export default function Error({ statusCode }: { statusCode: number }) {
return (
<p>
{statusCode
? `An error ${statusCode} occurred on server`
: "An error occurred on client"}
</p>
);
}
Error.getInitialProps = ({ res, err, ...context }: NextPageContext) => {
if (res) {
return { statusCode: res.statusCode };
}
return { statusCode: err ? err.statusCode : 400 };
};
nexterrordefault
import Error from "next";
export async function getServerSideProps() {
const res = await fetch("https://api.github.com/repos/vercel/next.js");
const errorCode = res.ok ? false : res.statusCode;
const json = await res.json();
return {
props: { errorCode, stars: json.stargazers_count },
};
}
export default function Page({ errorCode, stars }) {
if (errorCode) {
return <Error statusCode={errorCode} />;
}
return <div>Next stars: {stars}</div>;
}
NextJS Components - SNIPPETS
nextdynamic
import dynamic from "next/dynamic";
const DynamicComponent = dynamic(() => import("../components/Component"));
nextdynamicloading
import dynamic from "next/dynamic";
const DynamicComponentWithCustomLoading = dynamic(
() => import("../components/Component"),
{ loading: () => <p>My Custom Loading</p> }
);
nextdynamicnossr
import dynamic from "next/dynamic";
const DynamicComponentWithNoSSR = dynamic(
() => import("../components/Component"),
{ ssr: false }
);
nextimage
<Image width={$1} height={$1} objectFit="cover" src={$2} alt="$3" />
nextlink
<Link href="$1">
<a>$2</a>
</Link>
Imports - SNIPPETS
imrouter
import { useRouter } from "next/router";
imimg
import Image from "next/image";
imlink
import Link from "next/link";
imhead
import Head from "next/head";
