Welcome back to our Next.js tutorial series! Today, we will dive into the intricacies of basic routing in Next.js. Routing is a fundamental aspect of any web application, allowing users to navigate between different pages. Next.js provides a seamless and intuitive way to handle routing in your React applications.

Dynamic Routing

One of the powerful features of Next.js is its dynamic routing capability. With dynamic routing, you can create pages that are generated on-the-fly based on their URL parameters. This is particularly useful when you have pages that share the same layout but display different content, such as a blog post or a product page.

To demonstrate dynamic routing, let’s create a simple blog application with Next.js.

Step 1: Create a New Page

Inside the pages directory, create a new file called blog.js. This will be our blog page where we will display a list of blog posts.

Step 2: Set Up Routing

In the blog.js file, we need to define the necessary code to fetch and display the blog posts. We will also set up the routing for our individual blog post pages.

import React from 'react';
import Link from 'next/link';

const Blog = ({ posts }) => {
  return (
    <div>
      <h1>Blog</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link href={`/blog/${post.slug}`}>
              <a>{post.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Blog;

In the code above, we create a functional component called Blog that receives a list of blog posts as props. We map over the posts array and render a list item for each post. Each list item is wrapped with the Link component from Next.js, which handles the client-side navigation.

Step 3: Fetch Data

To fetch the blog posts, we can use a simple mock API. Create a new file called api/posts.js with the following content:

export const getPosts = () => {
  return [
    { id: 1, title: 'First Post', slug: 'first-post' },
    { id: 2, title: 'Second Post', slug: 'second-post' },
    { id: 3, title: 'Third Post', slug: 'third-post' },
  ];
};

This file exports a function called getPosts that returns an array of blog posts.

Step 4: Fetch Data on Page Load

To ensure the blog posts are fetched when the Blog component is rendered, we can use the getServerSideProps function from Next.js. Update the blog.js file with the following code:

import React from 'react';
import Link from 'next/link';
import { getPosts } from '../api/posts';

const Blog = ({ posts }) => {
  return (
    <div>
      <h1>Blog</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link href={`/blog/${post.slug}`}>
              <a>{post.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export const getServerSideProps = async () => {
  const posts = getPosts();

  return {
    props: {
      posts,
    },
  };
};

export default Blog;

In the updated code, we import the getPosts function from our API module and use it inside the getServerSideProps function. This function runs on the server-side and fetches the blog posts before rendering the Blog component.

Step 5: Create Individual Blog Post Pages

Now, let’s create individual pages for each blog post. Inside the pages directory, create a new folder called blog. Inside this folder, create a new file called [slug].js. This file will handle the dynamic routing for our blog post pages.

In the [slug].js file, add the following code:

import React from 'react';
import { useRouter } from 'next/router';

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

  return (
    <div>
      <h1>Blog Post</h1>
      <h2>{slug}</h2>
    </div>
  );
};

export default BlogPost;

In this code, we import the useRouter hook from Next.js to access the current URL parameters. We extract the slug parameter from the router.query object and render it as the title of the blog post page.

Step 6: Test the Application

To test our application, run the development server with the npm run dev command. Visit http://localhost:3000/blog in your web browser, and you should see the list of blog posts. Clicking on a blog post title will take you to the individual blog post page.

Congratulations! You have successfully implemented basic routing in Next.js and created dynamic pages based on URL parameters. In the next tutorial, we will explore more advanced routing features and create nested routes.

Keep coding and stay tuned for Day 3! 🚀💻

#NextJS #WebDevelopment #ReactFramework