Skip to content
Transit

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

Section titled “np - nextPage”
import { NextPage } from 'next'


interface Props {}


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


export default FileName

npssp - nextPageServerSideProps

Section titled “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

Section titled “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

Section titled “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

Section titled “nssp - nextServerSideProps”
export const getServerSideProps: GetServerSideProps = async (ctx) => {
  return {
    props: {}
  }
}

nsp - nextStaticProps

Section titled “nsp - nextStaticProps”
export const getStaticProps: GetStaticProps = async (ctx) => {
  return {
    props: {},
  }
}

nspth - nextStaticPaths

Section titled “nspth - nextStaticPaths”
export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [],
    fallback: false,
  }
}

nip - nextInitialProps

Section titled “nip - nextInitialProps”
FileName.getInitialProps = async (ctx) => {
  return {


  }
}

nimg - nextImage

Section titled “nimg - nextImage”
<Image src="" alt="" />

napp - nextApp

Section titled “napp - nextApp”
import type { AppProps } from 'next/app'


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

ndoc - nextDocument

Section titled “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

Section titled “napi - nextApi”
import type { NextApiRequest, NextApiResponse } from 'next'


interface Data {}


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


}

nmid - nextMiddleware

Section titled “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*',
}