Next.js Defining Routes

Next.js allows for easy and flexible routing of pages using a file-system based approach. In this guide, you will learn how to define routes for your pages.

Syntax

To define a route in Next.js, create a file in your pages directory with the name of the route. For example, to create a route for example.com/about, create a file named about.js in your pages directory.

Example

Let's create a blog page with a sub-page for each blog post.

First, create pages/blog.js and add the following code:

import Link from 'next/link'

const Blog = () => {
  return (
    <div>
      <h1>My Blog</h1>
      <ul>
        <li><Link href="/blog/post-1"><a>Post 1</a></Link></li>
        <li><Link href="/blog/post-2"><a>Post 2</a></Link></li>
        <li><Link href="/blog/post-3"><a>Post 3</a></Link></li>
      </ul>
    </div>
  )
}

export default Blog

Now, create pages/blog/[slug].js and add the following code:

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { slug } = router.query

  return (
    <div>
      <h1>{slug}</h1>
      <p>This is the blog post {slug}.</p>
    </div>
  )
}

export default Post

Output

Now, if you navigate to example.com/blog, you will see a list of links to the blog posts. If you click on a link, such as example.com/blog/post-1, you will see the blog post with the corresponding slug.

Explanation

In this example, we defined a route for our Blog page by creating a file named pages/blog.js. We then defined sub-routes for our blog posts by creating files with the pattern pages/blog/[slug].js.

To display links to our blog posts, we used the Link component from Next.js. This component allows us to create client-side navigation between routes by adding a href prop to an a element.

In the Post component, we used the useRouter hook from Next.js to get the slug from the route parameters. We then used this slug to display the blog post content.

Use

Defining routes in Next.js using a file-system based approach allows for easy organization and naming conventions. By placing files with the same name in a common directory, you can easily create routes for related content.

Additionally, the Link component allows for easy client-side navigation between pages, providing a seamless user experience.

Important Points

• To define a route in Next.js, create a file in your pages directory with the name of the route.
• To create dynamic routes with URL parameters, use brackets [] in the filename to define the parameter name.
• Use the Link component for client-side navigation between routes.
• Use the useRouter hook to get route parameters and use them to display content.

Summary

Next.js makes it easy to define routes for your pages using a file-system based approach. By creating files with the name of your desired route, you can easily organize and name your routes. Using the Link component and useRouter hook, you can create dynamic routes with client-side navigation and easily display information based on route parameters.