Next.js and Dynamic Routing: Building a Flexible Web Application

Written by

learnmodernjavascript

in

In the ever-evolving landscape of web development, creating flexible and user-friendly applications is paramount. Dynamic routing, a core concept in modern frameworks, allows you to build applications that can handle a wide range of content and user interactions without the need for a separate route for every single page. Next.js, a powerful React framework, provides robust support for dynamic routing, making it easier than ever to build complex and scalable web applications. This tutorial will guide you through the ins and outs of dynamic routing in Next.js, equipping you with the knowledge and skills to create dynamic and engaging user experiences.

Why Dynamic Routing Matters

Imagine you’re building a blog with hundreds or even thousands of articles. Creating individual routes for each article (e.g., `/article/article-1`, `/article/article-2`, etc.) would be incredibly tedious and unsustainable. Dynamic routing solves this problem by allowing you to define a single route template that can handle multiple pieces of content. For example, you could use a route like `/article/[slug]`, where `[slug]` is a dynamic segment that represents the unique identifier (e.g., the title) of each article. This approach significantly simplifies the development process and makes your application more scalable and maintainable.

Furthermore, dynamic routing enhances the user experience. It enables you to create more intuitive and organized navigation structures. Users can easily access different content based on parameters in the URL, providing a seamless browsing experience. This is crucial for applications like e-commerce sites, content management systems, and social media platforms, where content varies frequently.

Understanding the Basics of Dynamic Routing in Next.js

Next.js offers two primary methods for implementing dynamic routes: using the `pages` directory and using the `app` directory. Both approaches share the same core principle: you create special files within your `pages` or `app` directory with filenames that include square brackets (`[]`). These brackets indicate dynamic segments in your routes.

Dynamic Routes with the `pages` Directory

The `pages` directory is the traditional way to handle routing in Next.js. Here’s how it works:

  • **File Naming:** Create a file inside the `pages` directory with a name that includes square brackets, like `[slug].js` or `[productId].js`. The part inside the brackets becomes the dynamic segment.
  • **Accessing Route Parameters:** Inside your component, you can access the dynamic route parameters using the `useRouter` hook from `next/router`.
  • **Data Fetching:** You’ll typically fetch data based on the route parameter using methods like `getStaticProps` (for static site generation) or `getServerSideProps` (for server-side rendering).

Let’s illustrate with a simple example:

// pages/article/[slug].js
import { useRouter } from 'next/router';

function Article() {
  const router = useRouter();
  const { slug } = router.query;

  // Fetch article data based on the slug
  const articleData = {
    title: `Article: ${slug}`,
    content: `This is the content for the article with slug: ${slug}`,
  };

  return (
    <div>
      <h1>{articleData.title}</h1>
      <p>{articleData.content}</p>
    </div>
  );
}

export default Article;

In this example, the `[slug].js` file creates a dynamic route. When a user visits a URL like `/article/my-article`, Next.js will render the `Article` component. The `useRouter` hook allows you to access the `slug` parameter (which would be “my-article” in this case) through `router.query.slug`. You can then use this `slug` to fetch the appropriate article data from an API or a database.

Dynamic Routes with the `app` Directory

The `app` directory, introduced in Next.js 13, provides a new way to structure your application and handle routing. It offers several improvements and new features, including:

  • **Layouts:** Define shared layouts for different parts of your application.
  • **Server Components:** Use server components for improved performance and data fetching.
  • **Streaming:** Stream content from the server to the client.

Here’s how to create dynamic routes with the `app` directory:

  • **Folder Structure:** Create a folder inside the `app` directory with the dynamic segment in square brackets (e.g., `app/article/[slug]/page.js`).
  • **`page.js`:** Inside the dynamic route folder, you’ll have a `page.js` file, which is the component that will render for the specific route.
  • **`layout.js` (Optional):** Define a layout component to wrap your page component.
  • **`route.js` (Optional):** Define server-side logic for handling requests.

Let’s adapt the previous example for the `app` directory:


// app/article/[slug]/page.js
import { useParams } from 'next/navigation';

export default function Article() {
  const params = useParams();
  const { slug } = params;

  // Fetch article data based on the slug
  const articleData = {
    title: `Article: ${slug}`,
    content: `This is the content for the article with slug: ${slug}`,
  };

  return (
    <div>
      <h1>{articleData.title}</h1>
      <p>{articleData.content}</p>
    </div>
  );
}

In this `app` directory example, the `page.js` file within the `app/article/[slug]` directory handles the dynamic route. We use the `useParams` hook to access the dynamic segment (slug). The rest of the logic remains similar to the `pages` directory approach.

Step-by-Step Guide: Building a Dynamic Blog with Next.js

Let’s build a simplified blog application to solidify your understanding of dynamic routing. We’ll use the `pages` directory approach for this example. The steps are as follows:

1. Set Up Your Next.js Project

If you don’t have a Next.js project set up, create one using the following command in your terminal:


npx create-next-app dynamic-blog
cd dynamic-blog

2. Create a Sample Article Data

For simplicity, let’s create a simple array of article objects in a separate file (e.g., `data/articles.js`):


// data/articles.js
export const articles = [
  {
    slug: 'nextjs-dynamic-routing',
    title: 'Next.js and Dynamic Routing: A Beginner's Guide',
    content: 'This is the content for the Next.js dynamic routing article.',
  },
  {
    slug: 'react-components',
    title: 'Understanding React Components',
    content: 'This is the content for the React components article.',
  },
  // Add more articles as needed
];

3. Create the Article Listing Page

Create a file named `pages/index.js` to display a list of article titles:


// pages/index.js
import Link from 'next/link';
import { articles } from '../data/articles';

export default function Home() {
  return (
    <div>
      <h1>Blog Articles</h1>
      <ul>
        {articles.map((article) => (
          <li key={article.slug}>
            <Link href={`/article/${article.slug}`}>{article.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

This code imports the `articles` data and maps over it to create a list of links. Each link points to the dynamic route `/article/[slug]`. We use the “ component from `next/link` for client-side navigation.

4. Create the Article Detail Page

Create a file named `pages/article/[slug].js` to display the content of each article:


// pages/article/[slug].js
import { useRouter } from 'next/router';
import { articles } from '../../data/articles';

function Article() {
  const router = useRouter();
  const { slug } = router.query;

  // Find the article with the matching slug
  const article = articles.find((article) => article.slug === slug);

  if (!article) {
    return <p>Article not found</p>;
  }

  return (
    <div>
      <h1>{article.title}</h1>
      <p>{article.content}</p>
    </div>
  );
}

export default Article;

In this component, we use `useRouter` to get the `slug` from the URL. We then use the `slug` to find the corresponding article in the `articles` data. If the article is found, its title and content are displayed. If the article isn’t found (e.g., if the user enters an invalid slug), a “Article not found” message is displayed.

5. Run Your Application

Start your Next.js development server by running the following command in your terminal:


npm run dev

Open your browser and navigate to `http://localhost:3000`. You should see a list of article titles. Clicking on an article title will take you to the corresponding article detail page, demonstrating the dynamic routing in action.

Common Mistakes and How to Fix Them

When working with dynamic routing in Next.js, you might encounter some common issues. Here are a few and how to resolve them:

1. Incorrect File Naming

One of the most frequent mistakes is not using the correct file naming convention. Remember that dynamic routes in the `pages` directory require square brackets around the dynamic segment (e.g., `[slug].js`). In the `app` directory, the folder itself should have the brackets (e.g., `app/article/[slug]/page.js`).

Solution: Double-check your file names and folder structures to ensure they adhere to the Next.js dynamic route conventions.

2. Incorrectly Accessing Route Parameters

Another common mistake is accessing the route parameters incorrectly. In the `pages` directory, you use `router.query` and in the `app` directory, you use `useParams()`. Using the wrong approach will lead to parameters not being found.

Solution: Ensure you are using the correct hook (`useRouter` with `router.query` in `pages`, and `useParams` in `app`) and accessing the parameter name correctly (e.g., `router.query.slug` or `params.slug`).

3. Missing Data Fetching

You need to fetch the data relevant to the dynamic route based on the route parameter. If you don’t fetch the data or fetch the wrong data, your page will either not display the content, or display incorrect content.

Solution: Use `getStaticProps` (for static site generation), `getServerSideProps` (for server-side rendering), or fetch data directly in your component using `useEffect` or other data-fetching methods. Make sure the data fetching logic correctly uses the route parameter to retrieve the right data.

4. 404 Errors

If you’re using static site generation (SSG) with `getStaticProps`, you might encounter 404 errors if you don’t provide all possible paths for your dynamic routes. Next.js needs to know all the possible values for your dynamic segment to generate the static pages at build time.

Solution: Use `getStaticPaths` in conjunction with `getStaticProps`. `getStaticPaths` should return an array of objects, each with a `params` object containing the value for your dynamic segment. For example:


// pages/article/[slug].js

export async function getStaticPaths() {
  const paths = articles.map((article) => ({
    params: { slug: article.slug },
  }));

  return {
    paths,
    fallback: false, // or 'blocking'
  };
}

export async function getStaticProps({ params }) {
  const article = articles.find((article) => article.slug === params.slug);

  return {
    props: { article },
  };
}

The `fallback` option in `getStaticPaths` controls how Next.js handles routes that are not pre-rendered. `fallback: false` means that any paths not returned by `getStaticPaths` will result in a 404. `fallback: true` creates a fallback page (e.g., a loading state), and `fallback: ‘blocking’` blocks the page until the data is fetched.

5. Client-Side Rendering vs. Server-Side Rendering

Deciding between client-side rendering (CSR), server-side rendering (SSR), and static site generation (SSG) is crucial for performance and SEO. SSR and SSG are generally preferred for dynamic routes, as they allow search engines to crawl and index your content more effectively.

Solution: Choose the appropriate data-fetching method based on your needs. Use `getStaticProps` for content that doesn’t change frequently. Use `getServerSideProps` for content that changes frequently or requires real-time data. Use client-side data fetching with `useEffect` if you don’t need SEO benefits and the data is not critical for initial page load.

Key Takeaways and Best Practices

  • **Choose the Right Directory:** Decide whether to use the `pages` or `app` directory based on your project’s needs and your familiarity with the new features in the `app` directory.
  • **Understand the File Naming Convention:** Master the use of square brackets (`[]`) in file names and folder structures for dynamic segments.
  • **Use the Correct Hooks:** Use `useRouter` and `router.query` (in `pages`) or `useParams` (in `app`) to access route parameters.
  • **Implement Proper Data Fetching:** Use `getStaticProps`, `getServerSideProps`, or client-side data fetching to fetch data based on route parameters.
  • **Optimize for SEO:** Use server-side rendering (SSR) or static site generation (SSG) for improved SEO.
  • **Handle Errors:** Implement error handling to gracefully handle cases where data is not found or other issues arise.
  • **Test Thoroughly:** Test your dynamic routes thoroughly to ensure they function as expected and handle various scenarios.

FAQ

1. What is the difference between `getStaticProps` and `getServerSideProps`?

`getStaticProps` is used for static site generation. It runs at build time and pre-renders your pages with the data. `getServerSideProps` is used for server-side rendering. It runs on the server for each request, generating the page dynamically with the latest data.

2. When should I use `fallback: true` in `getStaticPaths`?

Use `fallback: true` when you want to generate pages on demand. If a user visits a path that doesn’t exist at build time, Next.js will generate the page on the first request and cache it for future requests. This is useful for content-heavy sites with a large number of dynamic routes.

3. How do I handle 404 errors in dynamic routes?

You can handle 404 errors by checking if the data for the dynamic route exists. If the data is not found, you can render a 404 page or redirect the user to a 404 error page.

4. Can I use dynamic routes with nested routes?

Yes, you can create nested dynamic routes by using multiple dynamic segments in your file names (e.g., `pages/category/[category]/article/[slug].js`).

5. How can I pass data from a dynamic route to another component?

You can pass data from a dynamic route to another component by using props. When you link to the other component, you can pass the data as a prop. You can also use context or state management libraries like Redux or Zustand for more complex data sharing scenarios.

Dynamic routing is a cornerstone of modern web development, and mastering it is essential for building flexible, scalable, and user-friendly web applications with Next.js. By understanding the core concepts, following the step-by-step guide, and learning from common mistakes, you’ll be well-equipped to create powerful and dynamic web experiences. With the knowledge gained from this tutorial, you can now confidently build applications that respond seamlessly to user input and deliver a superior user experience. From creating a blog with countless articles to building a complex e-commerce platform, dynamic routing is the key to unlocking the full potential of your Next.js projects. Remember to always prioritize user experience and SEO best practices to ensure your application not only functions well but also ranks highly in search engine results. The flexibility and power of dynamic routing, combined with Next.js’s capabilities, empower you to build web applications that adapt and grow with your evolving needs, making your web development journey smoother and more rewarding.

More posts