Next.js & Dynamic Routing: A Beginner’s Guide

Written by

learnmodernwebdevelopment

in

In the ever-evolving world of web development, creating dynamic and engaging user experiences is paramount. One of the key aspects of achieving this is through dynamic routing, which allows your web application to respond to different URLs and display relevant content accordingly. Next.js, a powerful React framework, provides robust support for dynamic routing, making it easier than ever to build complex and interactive web applications. This tutorial will guide you through the essentials of dynamic routing in Next.js, equipping you with the knowledge and skills to create flexible and user-friendly web applications.

Understanding Dynamic Routing

Before we dive into the implementation, let’s understand what dynamic routing is all about. Unlike static routing, where each URL is predefined, dynamic routing allows you to create routes that adapt based on parameters passed in the URL. Think of it like a template for URLs. Instead of having a separate page for every single piece of content, you can use a single page template and dynamically fetch the content based on the URL parameters.

For example, consider an e-commerce website. Instead of having separate pages for each product (e.g., /products/shoes, /products/shirts), you can use dynamic routing to create a single product page template and use the product ID in the URL (e.g., /products/[id]) to fetch the specific product details.

Here’s a breakdown of the key concepts:

  • Route Parameters: These are the variable parts of the URL that change based on the data. In the example above, [id] is a route parameter.
  • Dynamic Routes: These are the routes that use route parameters. They are defined using square brackets ([]) in the file name within the pages directory.
  • Content Fetching: Based on the route parameters, you fetch the relevant data from a database, API, or other data source to display the correct content.

Setting Up Your Next.js Project

If you don’t already have a Next.js project, let’s create one. Open your terminal and run the following command:

npx create-next-app my-dynamic-app
cd my-dynamic-app

This will create a new Next.js project named my-dynamic-app. Once the project is created, navigate into the project directory using the cd command.

Creating a Dynamic Route

Now, let’s create our first dynamic route. We’ll create a simple example to illustrate the concept. We’ll create a dynamic route for displaying user profiles. In the pages directory, create a new folder named users. Inside the users folder, create a file named [id].js. The [id].js file will represent our dynamic route. The square brackets around id indicate that this is a route parameter.

Open pages/users/[id].js and add the following code:

import { useRouter } from 'next/router';

function UserProfile() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>User Profile</h1>
      <p>User ID: {id}</p>
    </div>
  );
}

export default UserProfile;

Let’s break down what’s happening in this code:

  • Importing useRouter: We import the useRouter hook from next/router. This hook provides access to the router object, which contains information about the current route and allows us to navigate between routes.
  • Accessing Route Parameters: Inside the UserProfile component, we use useRouter() to get the router object. The router.query object contains the route parameters. In our case, we access the id parameter using router.query.id.
  • Displaying the User ID: We display the user ID in a paragraph.

Now, start your Next.js development server using the following command:

npm run dev

Open your browser and navigate to http://localhost:3000/users/123. You should see a page with the heading “User Profile” and the text “User ID: 123”. Try changing the number after /users/ in the URL to see how the content changes dynamically.

Fetching Data Based on Route Parameters

The real power of dynamic routing lies in fetching data based on the route parameters. Let’s modify our UserProfile component to fetch user data based on the id parameter. We’ll simulate fetching data from a database using a simple JavaScript object.

Modify the pages/users/[id].js file as follows:

import { useRouter } from 'next/router';

// Simulate fetching data from a database
const users = {
  '123': { id: '123', name: 'John Doe', email: 'john.doe@example.com' },
  '456': { id: '456', name: 'Jane Smith', email: 'jane.smith@example.com' },
};

function UserProfile() {
  const router = useRouter();
  const { id } = router.query;

  const user = users[id];

  if (!user) {
    return <div>User not found</div>;
  }

  return (
    <div>
      <h1>User Profile</h1>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>
  );
}

export default UserProfile;

In this updated code:

  • Simulated Data: We create a users object to simulate fetching data from a database. Each key in the object represents a user ID, and the value is an object containing user information.
  • Fetching User Data: We use the id parameter from router.query to look up the user in the users object.
  • Handling Missing Data: We check if the user exists. If the user is not found (e.g., if the user ID in the URL doesn’t exist in our users object), we display a “User not found” message.
  • Displaying User Information: If the user is found, we display the user’s name and email.

Now, if you navigate to http://localhost:3000/users/123, you should see John Doe’s profile. If you navigate to http://localhost:3000/users/456, you should see Jane Smith’s profile. And if you navigate to a non-existent user ID (e.g., http://localhost:3000/users/789), you’ll see the “User not found” message.

Dynamic Routes with Multiple Parameters

You can also create dynamic routes with multiple parameters. For example, let’s create a route for displaying product details where the URL includes both the product category and the product ID. Create a folder named products inside the pages directory and then create a file named [category]/[id].js inside the products folder. This will create a route like /products/[category]/[id].

Modify the pages/products/[category]/[id].js file as follows:

import { useRouter } from 'next/router';

function ProductDetail() {
  const router = useRouter();
  const { category, id } = router.query;

  return (
    <div>
      <h1>Product Detail</h1>
      <p>Category: {category}</p>
      <p>Product ID: {id}</p>
    </div>
  );
}

export default ProductDetail;

Here, we are accessing two parameters: category and id. You can access these parameters using router.query.category and router.query.id.

Now, when you navigate to URLs like http://localhost:3000/products/electronics/123 or http://localhost:3000/products/clothing/456, you’ll see the corresponding category and product ID displayed on the page.

Using getStaticPaths and getStaticProps for Static Site Generation (SSG)

For performance and SEO benefits, you might want to pre-render dynamic routes at build time using Static Site Generation (SSG). Next.js provides two important functions to achieve this: getStaticPaths and getStaticProps.

getStaticPaths: This function is used to specify the paths that should be pre-rendered at build time. It returns an array of objects, where each object represents a path and its parameters.

getStaticProps: This function is used to fetch the data for each path specified in getStaticPaths. It runs at build time and passes the fetched data as props to the component.

Let’s modify our UserProfile component to use getStaticPaths and getStaticProps.

Modify the pages/users/[id].js file as follows:

import { useRouter } from 'next/router';

// Simulate fetching data from a database
const users = {
  '123': { id: '123', name: 'John Doe', email: 'john.doe@example.com' },
  '456': { id: '456', name: 'Jane Smith', email: 'jane.smith@example.com' },
};

export async function getStaticPaths() {
  const paths = Object.keys(users).map((id) => ({
    params: {
      id,
    },
  }));

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

export async function getStaticProps({ params }) {
  const user = users[params.id];

  if (!user) {
    return {
      notFound: true,
    };
  }

  return {
    props: { user },
  };
}

function UserProfile({ user }) {
  const router = useRouter();

  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>User Profile</h1>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>
  );
}

export default UserProfile;

Let’s break down the changes:

  • getStaticPaths: This function generates the paths for pre-rendering. It iterates over the users object and creates an array of paths, each containing a params object with the id. The fallback: false option means that any paths not specified in getStaticPaths will result in a 404 error. You can also use fallback: true or fallback: 'blocking' to handle paths not specified during build time.
  • getStaticProps: This function fetches the data for each path. It receives the params object, which contains the route parameters. It fetches the user data based on the id. If the user is not found, it returns a notFound: true property, which will render a 404 page. It returns the user data as props to the UserProfile component.
  • UserProfile Component: The UserProfile component now receives the user prop. We also check router.isFallback to display a loading state while the page is being generated. This is only relevant if you use fallback: true or fallback: 'blocking'.

When you run npm run build and then npm run start, Next.js will pre-render the user profile pages for the IDs specified in getStaticPaths. This results in faster page load times and improved SEO.

Using getServerSideProps for Server-Side Rendering (SSR)

If you need to fetch data that changes frequently or requires authentication, you can use Server-Side Rendering (SSR) with the getServerSideProps function. This function runs on the server for each request, allowing you to fetch the latest data and handle dynamic content that changes often.

Let’s modify our UserProfile component to use getServerSideProps.

Modify the pages/users/[id].js file as follows:

import { useRouter } from 'next/router';

// Simulate fetching data from a database
const users = {
  '123': { id: '123', name: 'John Doe', email: 'john.doe@example.com' },
  '456': { id: '456', name: 'Jane Smith', email: 'jane.smith@example.com' },
};

export async function getServerSideProps({ params }) {
  const user = users[params.id];

  if (!user) {
    return {
      notFound: true,
    };
  }

  return {
    props: { user },
  };
}

function UserProfile({ user }) {
  const router = useRouter();

  return (
    <div>
      <h1>User Profile</h1>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>
  );
}

export default UserProfile;

The key differences are:

  • getServerSideProps: This function replaces getStaticProps and runs on the server for each request. It receives the params object, which contains the route parameters.
  • Data Fetching: We fetch the user data based on the id from params.
  • Returning Props: We return the user data as props to the UserProfile component.

When you navigate to http://localhost:3000/users/123 or http://localhost:3000/users/456, the server will fetch the data and render the page on each request. This is suitable for content that changes frequently or requires authentication.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them when working with dynamic routing in Next.js:

  • Incorrect File Naming: Make sure you use the correct file naming convention for dynamic routes ([param].js). Incorrect file names will not create dynamic routes.
  • Forgetting to Handle Missing Data: Always handle cases where the data for a given route parameter is not found (e.g., a user with a specific ID doesn’t exist). Use conditional rendering or display an error message.
  • Incorrectly Using getStaticPaths: When using getStaticPaths, make sure to return an array of paths with the correct params object. Also, consider the fallback option to handle paths that are not pre-rendered.
  • Misunderstanding SSR vs. SSG: Choose the appropriate data fetching method (getStaticProps, getServerSideProps) based on your application’s requirements. Use SSG for static content and SSR for dynamic content that changes frequently.
  • Not Escaping Special Characters in Route Parameters: If your route parameters contain special characters, you might need to encode/decode them to avoid routing issues. Next.js handles this automatically in most cases, but be aware of this potential issue.

Best Practices for Dynamic Routing

To ensure your dynamic routes are efficient, maintainable, and SEO-friendly, consider these best practices:

  • Use Descriptive Parameter Names: Use meaningful parameter names (e.g., productId, userId) to make your code more readable.
  • Validate Route Parameters: Validate route parameters on the server-side to prevent security vulnerabilities and ensure data integrity.
  • Implement Pagination: For routes that display lists of items (e.g., product listings), implement pagination to improve performance and user experience.
  • Optimize Data Fetching: Fetch only the necessary data for each route to reduce page load times.
  • Consider Caching: Implement caching strategies (e.g., using Next.js’s built-in caching or a third-party caching solution) to improve performance.
  • Test Thoroughly: Test your dynamic routes thoroughly to ensure they function correctly under various scenarios.
  • SEO Optimization: For SEO, ensure that the content within your dynamic routes is crawlable by search engines. Use descriptive page titles, meta descriptions, and structured data markup to improve search engine rankings. Consider using a sitemap to help search engines discover your dynamic routes.

Summary / Key Takeaways

Dynamic routing is a fundamental concept in modern web development, and Next.js provides a powerful and flexible way to implement it. This tutorial covered the basics of dynamic routing, including creating dynamic routes, fetching data based on route parameters, and using getStaticPaths and getStaticProps for SSG and getServerSideProps for SSR. We also discussed common mistakes and best practices to help you build robust and user-friendly web applications. By mastering dynamic routing, you can create more engaging and interactive user experiences and build web applications that can handle a wide range of content and data. Remember to choose the right data fetching strategy (SSG or SSR) based on your application’s needs, and always prioritize performance and SEO best practices.

FAQ

  1. What is the difference between getStaticPaths and getServerSideProps?
    getStaticPaths is used for Static Site Generation (SSG), pre-rendering pages at build time. getServerSideProps is used for Server-Side Rendering (SSR), rendering pages on the server for each request.
  2. When should I use fallback: true in getStaticPaths?
    You should use fallback: true (or 'blocking') when you want to generate pages on-demand if a path is not pre-rendered during the build process. This allows you to serve dynamic content without building all possible pages at build time.
  3. How do I handle errors in getStaticProps or getServerSideProps?
    You can return a notFound: true property from these functions to render a 404 page. You can also return an error property to handle more specific errors and display custom error messages.
  4. Can I use dynamic routing with client-side data fetching?
    Yes, you can. You can use useEffect in your component to fetch data based on the route parameters. However, using getStaticProps or getServerSideProps is generally recommended for better performance and SEO.
  5. How do I deploy a Next.js application with dynamic routes?
    You can deploy your Next.js application to various platforms, such as Vercel, Netlify, or AWS. Make sure your deployment platform supports the features you are using, such as getStaticPaths and getStaticProps. Vercel is specifically optimized for Next.js applications and handles these features seamlessly.

Next.js’s dynamic routing capabilities unlock a world of possibilities for web developers. Whether you’re building a simple blog or a complex e-commerce platform, understanding and implementing dynamic routing is crucial. By following this guide and experimenting with the examples provided, you’ll be well on your way to creating dynamic, user-friendly, and SEO-optimized web applications with Next.js. Remember to always prioritize user experience and performance while designing your routes, and embrace the flexibility that dynamic routing offers. The ability to create adaptable and engaging web applications is a key skill in today’s web development landscape, and with Next.js, you have the tools to excel.

More posts