How do I implement nested routes in Next.js?

How do I implement nested routes in Next.js?

To implement nested routes in Next.js, you can create a folder structure that reflects your desired routes. For example, if you want a route like /blog/post, you would create a folder named blog and inside it, create a file named post.js.

Can you show me an example of the folder structure?

Sure! Your pages directory would look like this:

/pages
  └── blog
      └── post.js

This structure allows Next.js to automatically handle the routing for you.

What if I want to add dynamic routes?

For dynamic routes, you can use square brackets in your file name. For example, to create a dynamic post route, you would name your file [id].js inside the blog folder. This way, you can access the post ID via the router.

How do I access the dynamic parameter in the component?

You can access the dynamic parameter using the useRouter hook from 'next/router'. Here's an example:

import { useRouter } from 'next/router';

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