Giter VIP home page Giter VIP logo

next.js-snippets's Introduction

Nextjs Snippets

Latest snippets for nextjs

next js-snippets-gif

Installation

  • install the extension
  • reload vscode
  • snippets will be ready to use

App Directory Snippets

narootlayout (nextjs app directory root layout)

Javascript

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

Typescript

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

nalayout (nextjs app directory layout)

Javascript

export default function Layout({ children }) {
  return <section>{children}</section>;
}

Typescript

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

napage (nextjs app directory page)

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)

Javascript

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

export default function Error({ error, reset }) {
  useEffect(() => {
    console.error(error);
  }, [error]);

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

Typescript

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

Javascript

"use client";

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

Typescript

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

Javascript

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

Typescript

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

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 route handlers

nrget (nextjs route handler get request)

Javascript

export async function GET(request) {}

Typescript

export async function GET(request: Request) {}

nrpost (nextjs route handler post request)

Javascript

export async function POST(request) {}

Typescript

export async function POST(request: Request) {}

nrput (nextjs route handler put request)

Javascript

export async function PUT(request) {}

Typescript

export async function PUT(request: Request) {}

nrpatch (nextjs route handler patch request)

Javascript

export async function PATCH(request) {}

Typescript

export async function PATCH(request: Request) {}

nrdelete (nextjs route handler delete request)

Javascript

export async function DELETE(request) {}

Typescript

export async function DELETE(request: Request) {}

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;

next.js-snippets's People

Contributors

13rtk avatar apicgg avatar iautistic avatar imadatyatalah avatar pulkitgangwar avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar

Forkers

imadatyatalah kenlck pika-pool thewinger iautistic nelsonmarro

next.js-snippets's Issues

App Router support

Wondering if App Router support is planned as many of the snippets work differently there.

ntsapi warnings

ntsapi scaffolds a default arrow function export.
Visual Studio code complains (warning) that we should assign that arrow function to a variable before exporting.
I would suggest changing the template in order to remove the warning if possible.

Current (warning displayed) :

import { NextApiRequest, NextApiResponse } from 'next';

export default (req:NextApiRequest, res:NextApiResponse) => {
  req.statusCode = 200
}

Suggestion (no warning) :

import { NextApiRequest, NextApiResponse } from 'next';

const handle = (req:NextApiRequest, res:NextApiResponse) => {
  req.statusCode = 200
}

export default handle

And by the way, thank you for the plugin, It's much useful ;)

Snippets for Next Images and Next Fonts

As of now, nulwhref gives the following :

<Link href="path"><a>Value</a></Link>

But the latest Next.js versions doesn't need a nested anchor element anymore.

Also, Next.js 13 introduced new fonts API, so it'd be great if snippets for imports and registering fonts were there. Thanks!

Add or invert order of text input

Would be nice to have the text input of the snippets be inverted, or adding new ones for it, so that the first thing to change is the filename. The Reason is that it is more likely you are going to change the filename once, a one line change, then start working on the component body. With the current order, you lose the "easy access" to change the filename function as I would have to go back to the body after a double enter.

VSX Registry

It would be amazing if you could upload your extension to the VSX Registry. We're using Gitpod for Development. So we need to install all extensions from the VSX Registry.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.