Learn About Next JS Routing

Learn About Next JS Routing. A Short and Useful Handbook for using routes within your projects. Learn Next JS.

These are some of the ways your can route your project in Next JS with their built-in functionality.

Index Routes

The router will automatically route files named index to the root of the directory.

pages/index.js → /
pages/blog/index.js → /blog

Nested Routes

The router supports nested files. If you create a nested folder structure, files will automatically be routed in the same way still.

pages/blog/first-post.js → /blog/first-post
pages/dashboard/settings/username.js → /dashboard/settings/username

Dynamic Route Segments

To match a dynamic segment, you can use the bracket syntax. This allows you to match named parameters.

pages/blog/[slug].js → /blog/:slug (/blog/hello-world)
pages/[username]/settings.js → /:username/settings (/foo/settings)
pages/post/[...all].js → /post/* (/post/2020/id/title)

Also learn how to link between pages

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
      <li>
        <Link href="/blog/hello-world">
          <a>Blog Post</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home

Full Documentation: https://nextjs.org/docs/getting-started

Learn About Next JS Routing