최근에 알게된 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 사용하기 (0) | 2024.05.04 |
|---|
