Next.js

Pages Jump to heading

_app.tsx Jump to heading

import { AppProps } from 'next/app'
import React from 'react'
import { ThemeProvider } from 'theme-ui'
import { theme } from '../theme'

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default App

    

Data fetching Jump to heading

getStaticProps Jump to heading

(Static Generation): Fetch data at build time.

If you export an async function called getStaticProps from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.

import { GetStaticProps } from 'next'

export const getStaticProps: GetStaticProps = async (context) => {
  const res = await fetch(`https://...`)
  const data = await res.json()

  if (!data) {
    return {
      // return a 404
      // notFound: true,

      // or redirect to another page
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }

  return {
    props: {}, // will be passed to the page component as props
  }
}

    

getStaticPaths Jump to heading

(Static Generation): Specify dynamic routes to pre-render pages based on data.

If a page has dynamic routes (documentation) and uses getStaticProps it needs to define a list of paths that have to be rendered to HTML at build time.

The paths key determines which paths will be pre-rendered. For example, suppose that you have a page that uses dynamic routes named pages/posts/[id].js. If you export getStaticPaths from this page and return the following for paths:

import { GetStaticPaths } from 'next'

export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [
      {
        params: { id: '1' },
      },
      {
        params: { id: '2' },
      },
    ],
    fallback: true, // or false // See the "fallback" section below
  }
}

    

Then Next.js will statically generate posts/1 and posts/2 at build time using the page component in pages/posts/[id].js.

getServerSideProps Jump to heading

(Server-side Rendering)

If you export an async function called getServerSideProps from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps.

import { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps = async (context) => {
  const res = await fetch(`https://...`)
  const data = await res.json()

  if (!data) {
    return {
      // return a 404
      // notFound: true,

      // or redirect to another page
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }

  return {
    props: {}, // will be passed to the page component as props
  }
}

    

APIs Jump to heading

next/router Jump to heading

useRouter Jump to heading

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()
  return <button onClick={() => router.push('/about')}>Click me</button>
}