Next.js
Pages
_app.tsx
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
getStaticProps
(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 pageredirect: {destination: '/',permanent: false,},}}return {props: {}, // will be passed to the page component as props}}
getStaticPaths
(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
(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 pageredirect: {destination: '/',permanent: false,},}}return {props: {}, // will be passed to the page component as props}}
APIs
next/router
useRouter
import { useRouter } from 'next/router'export default function Page() {const router = useRouter()return <button onClick={() => router.push('/about')}>Click me</button>}