Nextjs Snippets
Latest snippets for nextjs

Installation
- install the extension
- reload vscode
- snippets will be ready to use
New Snippets
nspage
(nextjs page with getServerSideProps)
Javascript
export default function Test() {
return <div>Enter</div>;
}
export async function getServerSideProps(ctx) {
return {
props: {
data: null,
},
};
}
Typescript
import { GetServerSideProps } from "next";
const Test = () => {
return <div>Enter</div>;
};
export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {},
};
};
export default Test;
nstaticpage
(nextjs page with getStaticProps and getStaticPaths)
Javascript
export default function Test() {
return <div>Enter</div>;
}
export async function getStaticPaths() {
return {
paths: [],
fallback: false,
};
}
export async function getStaticProps(ctx) {
return {
props: {
data: null,
},
};
}
Typescript
import { GetStaticPaths, GetStaticProps } from "next";
const test = () => {
return <div>Enter</div>;
};
export const getStaticPaths: GetStaticPaths = () => {
return {
paths: [],
fallback: false,
};
};
export const getStaticProps: GetStaticProps = async (ctx) => {
return {
props: {},
};
};
export default test;
nnotfound
(nextjs not found page)
Javascript
export default function test() {
return (
<div>
<h1>
Page Not Found
</h1>
</div>
);
}
nservererror
(nextjs server error page)
Javascript
export default function test() {
return (
<div>
<h1>
Server Error
</h1>
</div>
);
}
ngetServerSideProps
(nextjs getServerSideProps function)
Javascript
export async function getServerSideProps(ctx){
return {
props:{
data:null
}
}
}
Typescript
export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props:{
}
}
}
ngetStaticProps
(nextjs getStaticProps function)
Javascript
export async function getStaticProps(ctx) {
return {
props:{
data:null
}
}
}
Typescript
export const getStaticProps: GetStaticProps = (ctx) => {
return {
props:{
}
}
}
ngetStaticPaths
(nextjs getStaticPaths function)
Javascript
export async function getStaticPaths() {
return {
paths:[],
fallback:false
}
}
Typescript
export const getStaticPaths: GetStaticPaths = () => {
return {
paths:[],
fallback:false
}
}
nul
(nextjs use link element)
Javascript
<Link href='path'>link</Link>
Javascript
Page initialization snippets
nafe
(nextjs arrow function (export at the end))
const FileName = () => {
return <div>CONTENT</div>;
};
export default FileName;
naf
(nextjs arrow function)
export default () => {
return <div>CONTENT</div>;
};
nfe
(nextjs normal function (export at the end))
function FileName() {
return <div>CONTENT</div>;
}
export default FileName;
nf
(nextjs normal function )
export default function () {
return <div>CONTENT</div>;
}
Nextjs snippets
ngsspr
(nextjs getServerSideProps)
Javascript
export const getServerSideProps = async (ctx) => {
return {
props: {
data: null,
},
};
};
Typescript
export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props:{
data:null
}
}
}
ngspr
(nextjs getStaticProps)
Javascript
export const getStaticProps = async (ctx) => {
return {
props: {
data: null,
},
};
};
Typescript
export const getStaticProps: GetStaticProps = async (ctx) => {
return {
props:{
data:null
}
}
}
ngspa
(nextjs getStaticPaths)
Javascript
export const getStaticPaths = async () => {
return {
paths: [],
fallback: false,
};
};
Typescript
export const getStaticPaths: GetStaticPaths = async () => {
return {
paths:[],
fallback:false
}
}
ngipr
(nextjs getInitialProps)
FileName.getInitialProps = async (ctx) => {
return {
${3:data:null}
}
}
Nextjs Custom app and document (_app.js,_document.js)
ncapp
(nextjs custom app)
Javascript
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
Typescript
import type {AppProps} from 'next/app'
const MyApp = ({ Component, pageProps }:AppProps) => {
return <Component {...pageProps} />
}
export default MyApp;
ncdocument
(nextjs custom document)
Javascript
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head/>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
Nextjs api routes
napi
(nextjs api route)
Javascript
export default function handler(req, res) {
req.statusCode = 200
}
Typescript
import { NextApiRequest, NextApiResponse } from 'next';
export default function handler(req:NextApiRequest, res:NextApiResponse) {
req.statusCode = 200
}
Nextjs page initialization function with Nextjs functions
nafewserver
(nextjs arrow function (export at the end) with getServerSideProps)
Javascript
const FileName = () => {
return <div>CONTENT</div>;
};
export const getServerSideProps = async (ctx) => {
return {
props: {
data: null,
},
};
};
export default FileName;
Typescript
import { GetServerSideProps } from 'next';
const Test = () => {
return (
<div>
Enter
</div>
);
}
export const getServerSideProps:GetServerSideProps = async (ctx) => {
return {
props:{
data:null
}
}
}
export default Test;
nfewserver
(nextjs normal function (export at the end) with getServerSideProps)
Javascript
function FileName() {
return <div>CONTENT</div>;
}
export async function getServerSideProps(ctx) {
return {
props: {
data: null,
},
};
}
export default FileName;
nafewstatic
(nextjs arrow function (export at the end) with getStaticProps)
Javascript
const FileName = () => {
return <div>CONTENT</div>;
};
export const getStaticProps = async (ctx) => {
return {
props: {
data: null,
},
};
};
export default FileName;
Typescript
import {GetStaticProps} from 'next';
const Test = () => {
return (
<div>
Enter
</div>
);
}
export const getStaticProps:GetStaticProps = async (ctx) => {
return {
props:{
data:null
}
}
}
export default Test;
nfewstatic
(nextjs normal function (export at the end) with getStaticProps)
Javascript
function FileName() {
return <div>CONTENT</div>;
}
export async function getStaticProps(ctx) {
return {
props: {
data: null,
},
};
}
export default FileName;
Static generation snippet
!!static
(initializing function with getStaticPaths and getStaticProps)
Javascript
const FileName = () => {
return <div>CONTENT</div>;
};
export const getStaticPaths = async () => {
return {
paths: [],
fallback: false,
};
};
export const getStaticProps = async (ctx) => {
return {
props: {
data: null,
},
};
};
export default FileName;
Typescript
import {GetStaticPaths,GetStaticProps} from 'next';
const Test = () => {
return (
<div>
Enter
</div>
);
}
export const getStaticPaths:GetStaticPaths = async () => {
return {
paths:[],
fallback:false
}
}
export const getStaticProps:GetStaticProps = async (ctx) => {
return {
props:{
data:null
}
}
}
export default Test;
Importing Components
nil
(nextjs import link)
import Link from "next/link";
nir
(nextjs import router(default))
import Router from "next/router";
niur
(nextjs import useRouter)
import { useRouter } from "next/router";
nih
(nextjs import Head)
import Head from "next/head";
Imported Components Usage
nulwhref
(nextjs use link with href)
<Link href="path">
<a>Value</a>
</Link>
nuur
(nextjs use useRouter)
const router = useRouter();
nuh
(nextjs use Head )
<Head>
<title>Title</title>
</Head>
nul
(nextjs use Image component)
<Image src='path' width='width' height='height' alt='alt' />
Deprecated Typescript Snippets
Nextjs page initialization function with Nextjs functions
ntsfwserver
(nextjs typescript function with getServerSideProps (DEPRECATED))
import { GetServerSideProps } from "next";
const FileName = () => {
return <div>CONTENT</div>;
};
export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {
data: null,
},
};
};
export default FileName;
ntsfwstatic
(nextjs typescript function with getStaticProps (DEPRECATED))
import { GetStaticProps } from "next";
const FileName = () => {
return <div>CONTENT</div>;
};
export const getStaticProps: GetStaticProps = async (ctx) => {
return {
props: {
data: null,
},
};
};
export default FileName;
Nextjs api routes
ntsapi
(nextjs typescript api route (DEPRECATED))
import { NextApiRequest, NextApiResponse } from "next";
export default (req: NextApiRequest, res: NextApiResponse) => {};
Nextjs Custom app and document (_app.js,_document.js)
ntscapp
(nextjs typescript custom app)
import { AppProps } from 'next/app';
const MyApp = ({ Component pageProps }:AppProps) => {
return <Component {...pageProps} />
}
export default MyApp;
ntscdocument
(nextjs typescript custom document (DEPRECATED))
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Static generation snippet
!!tsstatic
(initializing function with getStaticPaths and getStaticProps(typescript) (DEPRECATED))
import { GetStaticPaths, GetStaticProps } from "next";
const FileName = () => {
return <div>CONTENT</div>;
};
export const getStaticPaths: GetStaticPaths = async () => {
return {
paths: [],
fallback: false,
};
};
export const getStaticProps: GetStaticProps = async (ctx) => {
return {
props: {
data: null,
},
};
};
export default FileName;