Dynamic Routing in Next.js Using App Router

Dynamic Routing in Next.js Using App Router

Next.js is a very powerful framework in the web development world. One of its particularly outstanding features that can be accessed with JavaScript and its frameworks, especially React.js and Next.js, is dynamic routing. You might wonder what dynamic routing is and how it’s implemented in Next.js; stay with us so that we can guide you through some simple and beginner-friendly examples.

Dynamic routing allows you to display different web pages to users based on varying inputs from the user or a database. For instance, a product or user profile page, which is based on their ID, is a prime example of dynamic routing. Currently, Next.js is one of the most popular frameworks for developers, providing advanced capabilities to implement this type of routing for you.

Assume you have a simple application that displays a list of posts and you want to display details of each post when you click on it. In such scenarios, using dynamic routing would be very efficient. To start, you need to create dynamic routes in the `pages` directory, which will be based on defined parameters. For example, `[id].js`.

The main advantage of using App Router in Next.js is that this layer allows you greater flexibility in managing routes and structuring components. Thus, with App Router, you can enhance performance and provide a better user experience. Dynamic routing also gives you the opportunity to easily create new routes and use Utility Functions for their management.

To implement a dynamic route, you should first create a Component for displaying the dynamic content. You can use `getStaticPaths` and `getStaticProps` to fetch relevant data for each specific route. This method is a refined approach allowing you to leverage the capabilities of powerful Server Side Rendering or Prerendering in Next.js.

const PostPage = ({ post }) => {
    return (
        <div>
            <h1>{post.title}</h1>
            <p>{post.content}</p>
        </div>
    );
};

export async function getStaticPaths() {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts');
    const posts = await res.json();

    const paths = posts.map((post) => ({
        params: { id: post.id.toString() },
    }));

    return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
    const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
    const post = await res.json();

    return { props: { post } }; 
}

export default PostPage;

PostPage is a React component that displays the details of a specific post.
getStaticPaths is a function that creates all dynamic paths based on the data, providing an array of paths where the parameters are stored.
The method map is used to transform IDs into parameters.
getStaticProps fetches relevant information for each specific route and passes it as props to PostPage.
The API endpoint in the fetch function must return the correct data.
The usage of async in this function denotes the ability to perform asynchronous operations for efficient data handling.