최근에 알게된 VSCode의 extension인데 Nextjs를 사용한다면 무조건 사용하는걸 추천한다.

Nextjs Snippets는 Next.js에서 자주 만드는 것을 예약어로 만들어 놓은 모음한 익스텐션이다.

가장 많이 사용할거 같은 snippets들

naf: 화살표함수 기반 함수형 컴포넌트 생성
nafe: export default 기반 화살표 함수형 컴포넌트 생성
napage : 기본 함수형 컴포넌트 생성하기
natemplate: 자식요소 포함한 함수형 컴포넌트 생성하기

사용법

snippet “nafe” 입력하고 enter

바로 페이지 컴포넌트가 생성된다.

App Directory Snippets

narootlayout (nextjs app directory root layout)

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <main>{children}</main>
      </body>
    </html>
  );
}

nalayout (nextjs app directory layout)

export default function Layout({ children }: { children: React.ReactNode }) {
  return <section>{children}</section>;
}

napage (nextjs app directory loading)

export default function Page() {
  return <div></div>;
}

naloading (nextjs app directory loading)

export default function Loading() {
  return <div>Loading...</div>;
}

naerror (nextjs app directory error)

"use client";
import { useEffect } from "react";

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

naglobalerror (nextjs app directory global error)

"use client";

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <html>
      <body>
        <h2>Something went wrong!</h2>
        <button onClick={reset}>Try again</button>
      </body>
    </html>
  );
}

natemplate (nextjs app directory template)

export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>;
}

Snippets

nspage (nextjs page with getServerSideProps)

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)

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)

export default function test() {
  return (
    <div>
      <h1>Page Not Found</h1>
    </div>
  );
}

nservererror (nextjs server error page)

export default function test() {
  return (
    <div>
      <h1>Server Error</h1>
    </div>
  );
}

ngetServerSideProps (nextjs getServerSideProps function)

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  return {
    props: {},
  };
};

ngetStaticProps (nextjs getStaticProps function)

export const getStaticProps: GetStaticProps = (ctx) => {
  return {
    props: {},
  };
};

ngetStaticPaths (nextjs getStaticPaths function)

export const getStaticPaths: GetStaticPaths = () => {
  return {
    paths: [],
    fallback: false,
  };
};

nul (nextjs use link element)

<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)

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  return {
    props: {
      data: null,
    },
  };
};

ngspr (nextjs getStaticProps)

export const getStaticProps: GetStaticProps = async (ctx) => {
  return {
    props: {
      data: null,
    },
  };
};

ngspa (nextjs getStaticPaths)

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)

import type { AppProps } from "next/app";

const MyApp = ({ Component, pageProps }: AppProps) => {
  return <Component {...pageProps} />;
};

export default MyApp;

ncdocument (nextjs custom document)

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Nextjs route handlers

nrget (nextjs route handler get request)

export async function GET(request: Request) {}

nrpost (nextjs route handler post request)

export async function POST(request: Request) {}

nrput (nextjs route handler put request)

export async function PUT(request: Request) {}

nrpatch (nextjs route handler patch request)

export async function PATCH(request: Request) {}

nrdelete (nextjs route handler delete request)

export async function DELETE(request: Request) {}

Nextjs api routes

napi (nextjs api route)

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)

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)

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)

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)

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)

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;

'Tip' 카테고리의 다른 글

시간을 소중히 해주는 snippet 사용하기 (1)	2024.05.04

Nextjs Snippets 익스텐션 추천!

가장 많이 사용할거 같은 snippets들

사용법

Snippets

Javascript

Page initialization snippets

Nextjs snippets

Nextjs Custom app and document (_app.js,_document.js)

Nextjs route handlers

Nextjs api routes

Nextjs page initialization function with Nextjs functions

Static generation snippet

Importing Components

Imported Components Usage

Deprecated Typescript Snippets , Nextjs page initialization function with Nextjs functions

Nextjs api routes

Nextjs Custom app and document (_app.js,_document.js)

Static generation snippet

'Tip' 카테고리의 다른 글

티스토리툴바