Introduction

Routing is a fundamental aspect of web development, allowing users to navigate between different pages and content within an application. In Next.js, routing is seamlessly integrated, providing a powerful and flexible way to handle client-side navigation. In this guide, we will explore the ins and outs of routing in Next.js, including basic routing, dynamic routes, nested routes, and more.

1. Basic Routing in Next.js

1.1. Creating Pages: In Next.js, each file inside the pages directory becomes a route in your application. For example, a file named about.js inside the pages directory would create a route for the /about page.

1.2. Navigating Between Pages: Use the Link component from next/link to create links between pages. For example:

import Link from 'next/link';

<Link href="/about">
  <a>About Us</a>
</Link>

2. Dynamic Routes

2.1. Creating Dynamic Routes: You can create dynamic routes in Next.js by adding brackets [] to a page filename. For example, a file named [id].js inside the pages directory would create a dynamic route that matches paths like /post/1, /post/2, etc.

2.2. Accessing Dynamic Route Parameters: Inside a dynamic route component, you can access the dynamic parameter using the useRouter hook:

import { useRouter } from 'next/router';

function Post() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>Post: {id}</h1>;
}

export default Post;

3. Nested Routes

3.1. Creating Nested Routes: You can create nested routes in Next.js by creating a directory structure inside the pages directory. For example, a file structure like pages/posts/[id]/comments.js would create a nested route for /posts/1/comments, /posts/2/comments, etc.

3.2. Navigating to Nested Routes: Use the Link component with the href prop set to the nested route path:

<Link href="/posts/[id]/comments" as={`/posts/${postId}/comments`}>
  <a>View Comments</a>
</Link>

4. Programmatic Routing

4.1. Using Router Object: Next.js provides a router object that allows you to programmatically navigate to a different route:

import { useRouter } from 'next/router';

function Home() {
  const router = useRouter();

  const handleClick = () => {
    router.push('/about');
  };

  return <button onClick={handleClick}>Go to About</button>;
}

export default Home;

References

• Next.js Documentation - Routing

Share Your Thoughts

Have you found routing in Next.js to be intuitive? Share your experiences and tips in the comments below!