In Next.js, defining routes is primarily handled through the file-based routing system. This approach allows developers to create pages simply by adding files to specific directories. Here’s an overview of how you can define routes in Next.js:

1. Pages Directory Routing

• The pages directory is the core of Next.js routing.
• Each file inside the pages directory automatically becomes a route.
• Example structure:

  my-next-app/
    └── pages/
        ├── index.js
        ├── about.js
        └── blog/
            ├── index.js
            └── [id].js
  

• Routes:
  • / → pages/index.js
  • /about → pages/about.js
  • /blog → pages/blog/index.js
  • /blog/1 → pages/blog/[id].js

2. Dynamic Routes

• Dynamic routes allow creating paths that can handle variable segments.
• Dynamic segments are defined using square brackets [ ].
• Example:
  • File: pages/posts/[postId].js
  • Route: /posts/1, /posts/2, etc.
• To get the dynamic segment inside the page, you use getStaticProps or getServerSideProps along with useRouter.

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

3. Nested Routes

• You can create nested routes by using subdirectories inside the pages directory.
• Example:
  • Directory: pages/users/[userId]/settings.js
  • Route: /users/1/settings

4. Catch-All Routes

• Catch-all routes allow a single page to handle multiple nested paths.
• To define a catch-all route, use [...param].
• Example:
  • File: pages/blog/[...slug].js
  • Routes: /blog/a, /blog/a/b, /blog/a/b/c
• Example usage:

  import { useRouter } from 'next/router';
  
  const Blog = () => {
      const router = useRouter();
      const { slug } = router.query;
  
      return <p>Slug: {slug && slug.join('/')}</p>;
  };
  
  export default Blog;
  

5. Index Files

• An index.js file in a folder will be treated as the root of that folder.
• For instance, pages/blog/index.js will be mapped to /blog.

6. API Routes

• You can also define API routes within the pages/api directory.
• Each file in pages/api becomes an API endpoint.
• Example:
  • File: pages/api/hello.js
  • Route: /api/hello
• Example usage:

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

7. Customizing with App Router (Optional)

• In Next.js 13, the App Router was introduced, offering an alternative to the pages directory.
• You can use the app directory for defining routes with React Server Components.
• Example:

  my-next-app/
    └── app/
        ├── page.js          // Maps to /
        ├── about/
            └── page.js      // Maps to /about
        └── blog/
            └── [id]/
                └── page.js  // Maps to /blog/:id
  

Summary

• File-based routing: Each file in the pages or app directory automatically corresponds to a route.
• Dynamic routing: Defined using [param] for dynamic segments.
• Catch-all routing: Use [...param] to handle multiple nested routes.
• Nested routing: Achieved using subdirectories.
• API routes: Use pages/api to define serverless API endpoints.

With this approach, Next.js offers a powerful, intuitive, and zero-configuration routing system that can handle both static and dynamic routes effortlessly.