Next JS/TS Snippets installs statistics

Introduction

Next JS/TS Snipets for VScode Designed to be simple, short and powerfull

Table of Contents

• How it works
• Contributing
• Javascript Snippets
• Typescript Snippets

Explanation

The snippets are a combination of:

• n next
• np next page
• ssp server side props
• sp static props
• spth static paths

Contributing

Feel free to open a pull request if you to add a snippet, suggest a change, fix a bug or anything else.

Typescript snippets

• np - nextPage
• npssp - nextPageServerSideProps
• npsp - nextPageStaticProps
• npspth - nextPageStaticPaths
• nssp - nextServerSideProps
• nsp - nextStaticProps
• nspth - nextStaticPaths
• nip - nextInitialProps
• nimg - nextImage
• napp - nextApp
• ndoc - nextDocument
• napi - nextApi
• nmid - nextMiddleware

np - nextPage

import { NextPage } from 'next'

interface Props {}

const FileName: NextPage<Props> = ({}) => {
  return <div></div>
}

export default FileName

npssp - nextPageServerSideProps

import { NextPage, GetServerSideProps } from 'next'

interface Props {}

const FileName: NextPage<Props> = ({}) => {
  return <div></div>
}

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

export default FileName

npsp - nextPageStaticProps

import { NextPage, GetStaticProps } from 'next'

interface Props {}

const FileName: NextPage<Props> = ({}) => {
  return <div></div>
}

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

export default FileName

npspth - nextPageStaticPaths

import { NextPage, GetStaticPaths } from 'next'

interface Props {}

const FileName: NextPage<Props> = ({}) => {
  return <div></div>
}

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

export default FileName

nssp - nextServerSideProps

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

nsp - nextStaticProps

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

nspth - nextStaticPaths

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

nip - nextInitialProps

FileName.getInitialProps = async (ctx) => {
  return {
    
  }
}

nimg - nextImage

<Image src="" alt="" />

napp - nextApp

import type { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

ndoc - nextDocument

import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument

napi - nextApi

import type { NextApiRequest, NextApiResponse } from 'next'

interface Data {}

export default async function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
  
}

nmid - nextMiddleware

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export async function middleware(request: NextRequest) {
  
}

export const config = {
  matcher: '/about/:path*',
}

Javascript snippets

• np - nextPage
• npssp - nextPageServerSideProps
• npsp - nextPageStaticProps
• npspth - nextPageStaticPaths
• nssp - nextServerSideProps
• nsp - nextStaticProps
• nspth - nextStaticPaths
• nip - nextInitialProps
• nimg - nextImage
• napp - nextApp
• ndoc - nextDocument
• napi - nextApi
• nmid - nextMiddleware

np - nextPage

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

export default FileName

npssp - nextPageServerSideProps

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

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

export default FileName

npsp - nextPageStaticProps

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

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

export default FileName

npspth - nextPageStaticPaths

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

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

export default FileName

nssp - nextServerSideProps

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

nsp - nextStaticProps

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

nspth - nextStaticPaths

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

nip - nextInitialProps

FileName.getInitialProps = async (ctx) => {
  return {
    
  }
}

nimg - nextImage

<Image src="" alt="" />

napp - nextApp

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

ndoc - nextDocument

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 }
  }…