Pages

Pages are associated with a route based on their file name. For example, in development:

  • pages/index.js is associated with the / route.

  • pages/posts/first-post.js is associated with the /posts/first-post route.

  • pages/event/[id].js for dynamic routes(see below)

  • pages/404.js for custom 404 and [other errors](Error Pages)

Link

import Link from 'next/link'; //must have a tag inside

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link
          href={{
            pathname: '/about',
            query: { name: 'test' },
          }}
        >
          About us
        </Link>
        <Link href={`/blog/${encodeURIComponent(post.slug)}`}>
           {post.title}
        </Link>
        <Link
          href={{
            pathname: '/about',
            query: { name: 'test' },
          }}
        >
          About us
        </Link>
      </h2>
    </>
  )
}

Yes that is all you need no imports, it somehow auto imports React and such

Next.js automatically prefetches the code for the linked page in the background.

Outer Component

Next.js specific top-level App component

Can keep state when navigating between pages, add global styles, etc

/pages/_app.js

import "../styles/global.css";

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

Must restart dev server after adding _app.js

Layouts

Use regular react components

Head

import Head from "next/head";

export default function Home() {
  return (
    <div className="container">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
    </div>)
}

Page Path Depends on External Data

Routes like /post/[id]

  1. Create a [] in the filename to indicate dynamic pages in Next.js

  2. Create file with getStaticPaths and getStaticProps

pages/posts/[id].js

import Layout from '../../components/layout'

export default function Post() {
  return <Layout>...</Layout>
}

//prod build time, dev every request
export async function getStaticPaths() {
  // Returns an array that looks like this:
  // [
  //   {
  //     params: {
  //       id: 'ssg-ssr'
  //     }
  //   },
  //   {
  //     params: {
  //       id: 'pre-rendering'
  //     }
  //   }
  // ]
  //If fallback is false, then any paths not returned by getStaticPaths will result in a 404 page.
  return {paths, fallback: false};
}

export async function getStaticProps({ params }) {
  // Fetch necessary data for the blog post using params.id
}

Linking

<Link href="/posts/[id]" as="/posts/ssg-ssr">
  <a>...</a>
</Link>

Catch-all Routes

pages/posts/[...id].js matches /posts/a, but also /posts/a/b, /posts/a/b/c and so on.

function getStaticPaths() {
  //..
  return [
    {
      params: {
        // Statically Generates /posts/a/b/c
        id: ['a', 'b', 'c']
      }
    }
    //...
  ]
}

export async function getStaticProps({ params }) {
  // params.id will be like ['a', 'b', 'c']
}

Router

If you want to access the Next.js router, you can do so by importing the useRouter hook from next/router. Take a look at our router documentation to learn more.

Redirecting Link permantely

In next.config.js

module.exports = {
  async redirects() {
    return [
      {
        source: '/about',
        destination: '/',
        permanent: true,
      },
    ]
  },
}

Redirecting in JS

import { useRouter } from 'next/router'

function ActiveLink({ children, href }) {
  const router = useRouter()
  
  const handleClick = (e) => {
    e.preventDefault()
    router.push(href)
    router.push('/post/[pid]', '/post/abc')
  }

  return (
    <a href={href} onClick={handleClick} >
      {children}
    </a>
  )
}

export default ActiveLink
PreviousLayoutsNextpackages

Last updated