How does router work in next.js?

In Next.js, routing is a fundamental concept for navigating between different pages of a web application. Next.js simplifies routing through its file-based routing system, which makes it easy to create and manage routes without requiring explicit configuration. 

Here’s how routing works in Next.js:

1. File-Based Routing

In Next.js, the routing system is based on the file system. Each file inside the pages directory corresponds to a route in our application. This convention eliminates the need for explicit route definitions.

• Basic Page Routing: To create a route, simply add a JavaScript or TypeScript file in the pages directory. For example, a file pages/about.js would correspond to the /about route.

  function AboutPage() {
    return <h1>About Us</h1>;
  }
  
  export default AboutPage;
  
  
  

• Nested Routes: Create subdirectories within the pages directory for nested routes. For example, pages/blog/post.js would correspond to the /blog/post route.

  function BlogPost() {
    return <h1>Blog Post</h1>;
  }
  
  export default BlogPost;

2. Dynamic Routes

Dynamic routing allows us to create routes that depend on dynamic segments. This is done using file names wrapped in square brackets.

• Basic Dynamic Routes: For example, a file pages/posts/[id].js would handle routes like /posts/1, /posts/2, etc., where id is a dynamic segment.

  import { useRouter } from 'next/router';
  
  function Post() {
    const router = useRouter();
    const { id } = router.query;
  
    return <h1>Post ID: {id}</h1>;
  }
  
  export default Post;

• Catch-All Routes: For more complex dynamic segments, we can use catch-all routes with three dots. For example, pages/docs/[...slug].js can handle routes like /docs/a, /docs/a/b, etc.

  import { useRouter } from 'next/router';
  
  function Docs() {
    const router = useRouter();
    const { slug } = router.query;
  
    return <h1>Docs: {slug.join('/')}</h1>;
  }
  
  export default Docs;

3. Linking Between Pages

Use the Link component from next/link to navigate between pages. It enables client-side navigation, which is faster than traditional full-page reloads.

• Basic Usage:

  import Link from 'next/link';
  
  function HomePage() {
    return (
      <div>
        <h1>Home Page</h1>
        <Link href="/about">Go to About Page</Link>
      </div>
    );
  }
  
  export default HomePage;

4. Programmatic Navigation

We can use the useRouter hook from next/router for programmatic navigation within our components.

• Example:

  import { useRouter } from 'next/router';
  
  function NavigationButton() {
    const router = useRouter();
  
    const goToAbout = () => {
      router.push('/about');
    };
  
    return <button onClick={goToAbout}>Go to About Page</button>;
  }
  
  export default NavigationButton;

5. API Routes

Next.js also supports API routes, which allow us to build serverless functions that run on the server. These routes are defined in the pages/api directory.

• Example API Route:

  export default function handler(req, res) {
    res.status(200).json({ message: 'Hello World' });
  }

6. Customizing Routing

For advanced routing needs, we can customize Next.js routing with additional configurations:

• Custom Server: Use a custom server with Express or another server framework for advanced routing requirements. This is less common with the advent of API routes and middleware support in Next.js.

• Middleware: As of Next.js 12 and later, we can use middleware to run code before a request is completed. Middleware can be used to handle tasks like authentication or redirects.

  import { NextResponse } from 'next/server';
  
  export function middleware(request) {
    const { pathname } = request.nextUrl;
  
    if (pathname.startsWith('/about')) {
      return NextResponse.redirect('/contact');
    }
  }
  

Next.js routing is intuitive and built around a file-based system, making it straightforward to create and manage routes. Dynamic and catch-all routes provide flexibility, while the Link component and useRouter hook facilitate seamless navigation. Advanced use cases can be handled through custom servers and middleware. This structure allows developers to focus more on building features rather than managing routing logic.