Lecture 6 Part 2: Next.js Dynamic Routing and Catch-All Segments | Next.js Full Course from Zero to Job Ready

In this tutorial, we will be covering Next.js Dynamic Routing and Catch-All Segments. Dynamic routing allows us to create pages with dynamic URL segments, while Catch-All Segments allow us to capture and handle multiple dynamic segments in our routes. This can be incredibly useful for creating dynamic and flexible websites with Next.js. So let’s dive in!

Prerequisites:

• Basic knowledge of React.js
• Basic understanding of Next.js

Step 1: Setting up Next.js project

If you haven’t already set up a Next.js project, you can do so by running the following command in your terminal:

npx create-next-app my-next-project
cd my-next-project
npm run dev

This will create a new Next.js project and start the development server. You can navigate to http://localhost:3000 in your browser to see the default Next.js starter page.

Step 2: Creating Dynamic Routes

To create dynamic routes in Next.js, we need to create a file with square brackets [] in the pages directory. For example, if we want to create a dynamic route for a blog post, we can create a file called pages/posts/[slug].js. Inside this file, we can access the dynamic slug using useRouter from next/router:

import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <h1>{slug}</h1>
  );
};

export default Post;

Now, if you navigate to http://localhost:3000/posts/my-dynamic-post, you will see the slug being rendered on the page.

Step 3: Catch-All Segments

Catch-All Segments allow us to capture multiple dynamic segments in our routes. For example, if we want to create a dynamic route for a blog post with multiple categories, we can create a file called pages/posts/[...slug].js. Inside this file, we can access the dynamic slug using useRouter from next/router:

import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <h1>{slug.join('/')}</h1>
  );
};

export default Post;

Now, if you navigate to http://localhost:3000/posts/react/next-js, you will see the slug being rendered as react/next-js on the page.

Step 4: Nested Dynamic Routes

We can also create nested dynamic routes by nesting files with square brackets in the pages directory. For example, if we want to create a dynamic route for a blog post with comments, we can create a file structure like this:

• pages/posts/[slug].js
• pages/posts/[slug]/comments.js

In the comments.js file, we can access the dynamic slug using useRouter from next/router:

import { useRouter } from 'next/router';

const Comments = () => {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <h1>Comments for post: {slug}</h1>
  );
};

export default Comments;

Now, if you navigate to http://localhost:3000/posts/my-dynamic-post/comments, you will see the slug being rendered on the page.

Conclusion:

In this tutorial, we have covered Next.js Dynamic Routing and Catch-All Segments, which allow us to create flexible and dynamic websites with Next.js. By using dynamic routes and catch-all segments, we can create dynamic pages with dynamic content based on the URL segments. This can be incredibly useful for creating blogs, e-commerce sites, and any other dynamic web applications. I hope this tutorial has been helpful in understanding Next.js Dynamic Routing and Catch-All Segments. Happy coding!