Introduction

Next.js provides powerful routing features that allow developers to create complex navigation structures easily. In this lesson, we will explore advanced routing techniques including dynamic routing, API routes, nested routes, and using middleware for custom routing behaviors.

Dynamic Routing

Dynamic routing allows you to create routes based on parameters. In Next.js, this can be achieved using file-based routing with square brackets.

pages/posts/[id].js
import { useRouter } from 'next/router';

const Post = () => {
    const router = useRouter();
    const { id } = router.query;
    
    return 
Post: {id}
;
};

export default Post;

This example demonstrates how to create a dynamic route for individual posts based on their ID.

API Routes

Next.js supports API routes, which allow you to create backend endpoints directly within your application. Here’s how to set them up:

pages/api/posts.js
export default function handler(req, res) {
    res.status(200).json({ message: 'Hello from API' });
}

You can access this API route at /api/posts. This is useful for handling submissions and server-side logic without needing a separate backend.

Nested Routes

Next.js also supports nested routes for organizing components logically. You can create folders within the pages directory to achieve this.

pages/blog/index.js // List of blog entries
pages/blog/[id].js // Individual blog entry

This structure allows you to have a blog section with a list of entries and dynamic pages for each entry.

Middleware

Middleware in Next.js allows you to run code before a request is completed. This is useful for authentication checks and other pre-processing tasks:

middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
    const authenticated = checkAuth(request);
    if (!authenticated) {
        return NextResponse.redirect('/login');
    }
}

This middleware checks for authentication and redirects unauthenticated users to the login page.

FAQ