Git Product home page Git Product logo

next.js-snippets's Introduction

Install Downloads Ratings

Next.js Snippets

Latest snippets for next.js

next js-snippets-gif

Installation

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

Language

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

nafe (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 = async (ctx) => {

    return {
        props:{
            data:null
        }
    }
}

ngspr (nextjs getStaticProps)

 export const getStaticProps = async (ctx) => {

    return {
        props:{
            data:null
        }
    }
}

ngspa (nextjs getStaticPaths)

export const 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 App from 'next/app'

const MyApp = ({ Component pageProps }) => {
    return <Component {...pageProps} />
}

//MyApp.getInitialProps = async (appContext) => {
// calls page's `getInitialProps` and fills `appProps.pageProps`
// const appProps = await App.getInitialProps(appContext);
// return { ...appProps }
// }

export default MyApp;

ncdocument (nextjs custom document)

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;

Nextjs api routes

napi (nextjs api route)

export default (req,res) => {


}

Nextjs page initialization function with Nextjs functions

nafewserver (nextjs arrow function (export at the end) with getServerSideProps)

const FileName = () => {
    return (
        <div>
            CONTENT
        </div>
    );
}

export const getServerSideProps = async (ctx) => {

    return {
        props:{
            data:null
        }
    }
}

export default FileName;

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)

const FileName = () => {
    return (
        <div>
            CONTENT
        </div>
    );
}

export const getStaticProps = async (ctx) => {

    return {
        props:{
            data:null
        }
    }
}

export default FileName;

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)

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;

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>

nulwas (nextjs use link with as)

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

nuur (nextjs use useRouter)

const router = useRouter();

nuh (nextjs use Head )

<Head><title>Title</title></Head>

Typescript

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

nafe (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 page initialization function with Nextjs functions

ntsfwserver (nextjs typescript function with getServerSideProps)

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)

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)

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)

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

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;

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';

nii (nextjs import Image)

import Image from 'next/image';

nid (nextjs import dynamic)

import dynamic from 'next/dynamic';

next.js-snippets's People

Contributors

imadatyatalah avatar mo-amininasab avatar pulkitgangwar avatar

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.