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 (
        <Link href="/">
        <Link href="/about">
          <a>About Us</a>
        <Link href="/blog/hello-world">
          <a>Blog Post</a>

export default Home

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