Next.js - Dynamic Routing

Dynamic routing in Next.js allows for creating routes based on parameters in the URL, providing flexibility in handling dynamic content.

1. Basic Dynamic Routing

To implement dynamic routing in Next.js, utilize file-based dynamic routing by creating files with square brackets ([ ]) in the pages directory.

<pages>
  <-- pages/[id].js -->
</pages>

In this example, a file named [id].js in the pages directory corresponds to the route /pages/:id, where :id is a dynamic parameter.

2. Accessing Dynamic Parameters

Dynamic parameters can be accessed within Next.js components using the useRouter hook from the next/router module.

import { useRouter } from 'next/router';

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

    return (
        <div>
            <h1>Dynamic Page: {id}</h1>
        </div>
    );
}

export default DynamicPage;

In this example, the router.query object contains the dynamic parameter id, which can be accessed within the component.

3. Nested Dynamic Routing

Next.js supports nested dynamic routing, allowing for complex route structures. Nested folders with dynamic parameter files represent nested routes.

<pages>
  <-- pages/products/[category]/[id].js -->
</pages>

In this example, a file named [id].js within the products/[category] directory corresponds to the route /products/:category/:id.

Conclusion

Dynamic routing in Next.js offers powerful capabilities for handling dynamic content and building complex route structures. By utilizing file-based dynamic routing and accessing dynamic parameters within components, developers can create flexible and dynamic web applications.

Archive