Next.js & Dynamic Routing: Build Feature-Rich Web Apps

In the world of web development, creating dynamic and engaging user experiences is paramount. One of the cornerstones of achieving this is through the use of dynamic routes. Dynamic routes allow your web application to handle requests for different content based on a changing URL segment. This is especially useful for building applications like blogs, e-commerce platforms, and social media sites, where content is often organized and accessed through unique identifiers.

Understanding Dynamic Routes

At its core, a dynamic route is a route that includes a variable segment in the URL. Instead of having a fixed path, like /about or /contact, dynamic routes use placeholders to represent varying parts of the URL. For example, in a blog application, you might have a route like /posts/[id]. Here, [id] is the dynamic segment, and it represents the unique identifier (ID) of a specific blog post. When a user navigates to /posts/123, the application knows to fetch and display the content associated with post ID 123.

This approach offers several advantages:

Flexibility: Dynamic routes can handle a wide range of content variations without requiring you to create a separate route for each piece of content.
Scalability: They make it easier to add new content without modifying the routing configuration.
User Experience: Dynamic routes allow for cleaner, more organized URLs, which improve user experience and SEO.

Setting Up Dynamic Routes in Next.js

Next.js makes implementing dynamic routes straightforward. You create a file inside the pages directory with the dynamic route segment enclosed in square brackets ([]). Let’s walk through a simple example of creating a dynamic route for a product page.

Step 1: Create the Route File

Inside the pages directory, create a new folder called products. Then, inside the products folder, create a file named [id].js. This file will handle requests for product pages, where [id] represents the product ID.

mkdir pages/products
touch pages/products/[id].js

Step 2: Implement the Page Component

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

// pages/products/[id].js
import { useRouter } from 'next/router';

const Product = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Product ID: {id}</h1>
      <p>This is the product page for product with ID: {id}</p>
    </div>
  );
};

export default Product;

Let’s break down this code:

useRouter: This hook from Next.js provides access to the router object, which contains information about the current route.
router.query: This object contains the dynamic route parameters. In this case, it will have a property id with the value from the URL (e.g., if the URL is /products/123, router.query.id will be "123").
Rendering the ID: The component displays the product ID extracted from the route.

Step 3: Test the Route

Start your Next.js development server (npm run dev or yarn dev). Then, navigate to a URL like http://localhost:3000/products/1 in your browser. You should see “Product ID: 1” displayed on the page. Try other IDs (e.g., /products/2, /products/abc) to see how the dynamic route handles different values.

Fetching Data for Dynamic Routes

In most real-world scenarios, you’ll need to fetch data based on the dynamic route parameters. Next.js provides several methods for fetching data in dynamic routes:

getStaticProps: For statically generated pages where the data is known at build time.
getStaticPaths: Used in conjunction with getStaticProps to specify which paths should be statically generated.
getServerSideProps: For server-side rendering, where data is fetched on each request.

Using `getStaticProps` and `getStaticPaths`

This approach is ideal for content that doesn’t change frequently, such as blog posts or product catalogs. It generates static HTML at build time, which improves performance and SEO.

Let’s modify our product page to fetch product data using getStaticProps and getStaticPaths. We’ll simulate fetching product data from a data source (e.g., an API or a database).

// pages/products/[id].js
import { useRouter } from 'next/router';

// Simulate fetching product data (replace with your data fetching logic)
async function getProductData(id) {
  // In a real app, fetch data from an API or database
  const products = [
    { id: '1', name: 'Product 1', description: 'Description for product 1' },
    { id: '2', name: 'Product 2', description: 'Description for product 2' },
    { id: '3', name: 'Product 3', description: 'Description for product 3' },
  ];
  const product = products.find((p) => p.id === id);
  return product || null;
}

export async function getStaticPaths() {
  // Specify the possible values for the [id] parameter
  const products = [
    { id: '1', name: 'Product 1' },
    { id: '2', name: 'Product 2' },
    { id: '3', name: 'Product 3' },
  ];
  const paths = products.map((product) => ({
    params: { id: product.id },
  }));

  return {
    paths, // An array of paths to be pre-rendered
    fallback: false, // If false, the page will return a 404 if the path isn't generated at build time
  };
}

export async function getStaticProps({ params }) {
  const product = await getProductData(params.id);

  if (!product) {
    return {
      notFound: true, // Return a 404 page if product is not found
    };
  }

  return {
    props: {
      product,
    },
    // revalidate: 60, // Optional: Revalidate the page every 60 seconds
  };
}

const Product = ({ product }) => {
  const router = useRouter();

  if (router.isFallback) {
    return <div>Loading...</div>; // Show a loading state during fallback
  }

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
};

export default Product;

Let’s break down the changes:

getProductData: This function simulates fetching product data based on the ID. Replace this with your actual data fetching logic (e.g., using fetch to call an API).
getStaticPaths:
- This function tells Next.js which paths to pre-render at build time.
- It returns an array of objects, where each object has a params property.
- The params property is an object containing the dynamic route parameters (in this case, id).
- fallback: false means that any paths not specified in getStaticPaths will result in a 404 error.
getStaticProps:
- This function fetches the data for a specific product based on the id parameter.
- It receives the params object as an argument, which contains the dynamic route parameters.
- If the product is not found, it returns notFound: true, which tells Next.js to render a 404 page.
- It returns the product data as props to the component.
Component Updates: The component now receives a product prop and displays its name and description.
Loading State: Added a check for router.isFallback.

After implementing these changes, when you build and deploy your application, Next.js will pre-render pages for the product IDs specified in getStaticPaths. When a user visits a product page, the content will be served as static HTML, improving performance and SEO.

Using `getServerSideProps`

If your data changes frequently or needs to be personalized for each user, server-side rendering (SSR) with getServerSideProps is a better choice. With SSR, the page is rendered on the server for each request.

Here’s how to modify our product page to use getServerSideProps:

// pages/products/[id].js
import { useRouter } from 'next/router';

// Simulate fetching product data (replace with your data fetching logic)
async function getProductData(id) {
  // In a real app, fetch data from an API or database
  const products = [
    { id: '1', name: 'Product 1', description: 'Description for product 1' },
    { id: '2', name: 'Product 2', description: 'Description for product 2' },
    { id: '3', name: 'Product 3', description: 'Description for product 3' },
  ];
  const product = products.find((p) => p.id === id);
  return product || null;
}

export async function getServerSideProps({ params }) {
  const product = await getProductData(params.id);

  if (!product) {
    return {
      notFound: true, // Return a 404 page if product is not found
    };
  }

  return {
    props: {
      product,
    },
  };
}

const Product = ({ product }) => {
  const router = useRouter();

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
};

export default Product;

Key differences when using getServerSideProps:

No getStaticPaths: getServerSideProps doesn’t require getStaticPaths because the page is rendered on the server for each request.
Data Fetching: The data fetching logic remains similar, but the data is fetched on the server each time a user requests the page.
SEO Considerations: SSR is generally better for SEO since search engine crawlers can easily index the fully rendered content.

Handling 404 Errors

It’s crucial to handle cases where the requested resource (e.g., a product with a specific ID) doesn’t exist. You can do this by returning a 404 status code and displaying a user-friendly error page.

As shown in the examples above, both getStaticProps and getServerSideProps allow you to return notFound: true to trigger a 404 error. Next.js will automatically display a default 404 page.

If you want to customize the 404 page, create a file named pages/404.js:

// pages/404.js
const NotFound = () => {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>Sorry, the page you are looking for does not exist.</p>
    </div>
  );
};

export default NotFound;

Advanced Dynamic Route Techniques

Beyond the basics, Next.js offers advanced techniques to build more sophisticated dynamic routes.

Catch-all Routes

Sometimes, you might want to handle a broader range of paths. Catch-all routes allow you to capture all segments of a path after a certain point. To create a catch-all route, use the triple-dot syntax (...) in the file name:

// pages/blog/[...slug].js

In this example, [...slug].js will match paths like /blog/first-post, /blog/second-post/with/subdirectories, and so on. The slug parameter will be an array containing all the segments after /blog/. This is very useful for blog posts, where the URL structure might be /blog/2023/10/26/my-post-title.

Here’s how the component might look:

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

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

  return (
    <div>
      <h1>Blog Post</h1>
      <p>Slug: {slug ? slug.join('/') : 'No slug'}</p>
    </div>
  );
};

export default BlogPost;

Optional Catch-all Routes

Optional catch-all routes allow you to handle paths with or without a dynamic segment. Use the double-bracket syntax ([[...slug]]) in the file name:

// pages/blog/[[...slug]].js

This route will match both /blog and /blog/first-post. If no slug is provided, slug will be an empty array ([]).

Here’s an example component:

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

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

  return (
    <div>
      <h1>Blog Post</h1>
      <p>Slug: {slug ? slug.join('/') : 'No slug'}</p>
      <p>This is optional catch-all</p>
    </div>
  );
};

export default BlogPost;

Common Mistakes and How to Avoid Them

While dynamic routes are powerful, developers often encounter some common pitfalls. Here’s how to avoid them:

Incorrect File Naming: Ensure that your dynamic route file name uses the correct square bracket syntax ([param].js, [...param].js, [[...param]].js). Typos can lead to unexpected routing behavior.
Forgetting to Handle 404 Errors: Always check if the data for a dynamic route exists and return a 404 error if it doesn’t. This prevents broken links and improves the user experience.
Not Using getStaticPaths Correctly: When using getStaticProps, you must provide a list of paths in getStaticPaths. If you don’t, Next.js won’t know which pages to pre-render.
Data Fetching Errors: Double-check your data fetching logic within getStaticProps or getServerSideProps to ensure that you are correctly retrieving the data based on the route parameters. Handle potential errors gracefully.
Performance Issues (Client-Side Rendering): Avoid fetching large amounts of data on the client-side within the component if possible. Use getStaticProps or getServerSideProps to pre-render the content or fetch data on the server to improve performance and SEO.

SEO Considerations

Dynamic routes can be excellent for SEO, but you need to optimize them properly.

Use Descriptive URLs: Make sure your dynamic route parameters reflect the content of the page. For example, use /products/red-shoes instead of /products/123. This improves readability and helps search engines understand the page content.
Implement Canonical URLs: If you have multiple URLs that point to the same content (e.g., with different query parameters), use the rel="canonical" tag in the <head> of your page to specify the preferred URL. This prevents duplicate content issues.
Optimize Meta Tags: Ensure that each dynamic page has unique and relevant meta titles, descriptions, and Open Graph tags. These tags help search engines and social media platforms understand and display your content correctly. You can dynamically generate these tags based on the data fetched for each page.
Use Structured Data: Implement structured data (schema.org) markup to provide search engines with more information about your content. This can help improve your search rankings and enable rich snippets.

Summary: Key Takeaways

Dynamic routes use variable segments in the URL to handle different content.
Create dynamic routes by using square brackets ([]) in your file names within the pages directory.
Use useRouter to access route parameters.
Use getStaticProps and getStaticPaths for static site generation.
Use getServerSideProps for server-side rendering.
Always handle 404 errors.
Optimize your dynamic routes for SEO.

FAQ

Here are some frequently asked questions about dynamic routes in Next.js:

What’s the difference between getStaticProps and getServerSideProps?
getStaticProps generates static HTML at build time, making it faster and better for SEO. getServerSideProps renders the page on the server for each request, which is suitable for frequently changing content or personalized data.
How do I handle nested dynamic routes?
You can create nested dynamic routes by creating nested folders with dynamic route files. For example, /products/[category]/[product].js.
Can I use dynamic routes with client-side routing?
Yes, Next.js handles client-side routing seamlessly. When a user navigates between pages within your application, Next.js uses client-side routing to avoid full page reloads.
How do I prefetch data for dynamic routes?
You can prefetch data using the next/router‘s prefetch method, or by using the Link component with the preFetch prop (deprecated). This is useful for improving the user experience by loading the data for a dynamic route before the user navigates to it.
How do I access query parameters outside of the page component?
You can’t directly access router.query outside of a page component, but you can pass the query parameters to other components as props. For example, if you have a layout component, you can pass the query parameters from the page component to the layout component.

Dynamic routing is a core feature of Next.js, and understanding it is critical for building modern, scalable, and SEO-friendly web applications. By mastering these concepts and techniques, you can create engaging user experiences and make your web applications stand out. Embrace the flexibility that dynamic routes provide, and watch your ability to build feature-rich web applications grow. Remember to always prioritize user experience, performance, and SEO best practices as you integrate these powerful routing capabilities into your projects. With careful planning and execution, dynamic routes will become an indispensable tool in your web development toolkit, allowing you to build the next generation of web applications.

Next.js & Dynamic Routing: Build Feature-Rich Web Apps

Understanding Dynamic Routes

Setting Up Dynamic Routes in Next.js

Step 1: Create the Route File

Step 2: Implement the Page Component

Step 3: Test the Route

Fetching Data for Dynamic Routes

Using `getStaticProps` and `getStaticPaths`

Using `getServerSideProps`

Handling 404 Errors

Advanced Dynamic Route Techniques

Catch-all Routes

Optional Catch-all Routes

Common Mistakes and How to Avoid Them

SEO Considerations

Summary: Key Takeaways

FAQ

More posts

Next.js & Code Deployment: A Beginner's Guide to CI/CD

Next.js & Dynamic Routes: A Beginner’s Guide to URL Power

Next.js & Code Deployment: A Beginner's Guide to Cloudflare

Next.js & Dynamic Routing: Build Feature-Rich Web Apps

Understanding Dynamic Routes

Setting Up Dynamic Routes in Next.js

Step 1: Create the Route File

Step 2: Implement the Page Component

Step 3: Test the Route

Fetching Data for Dynamic Routes

Using getStaticProps and getStaticPaths

Using getServerSideProps

Handling 404 Errors

Advanced Dynamic Route Techniques

Catch-all Routes

Optional Catch-all Routes

Common Mistakes and How to Avoid Them

SEO Considerations

Summary: Key Takeaways

FAQ

More posts

Next.js & Code Deployment: A Beginner's Guide to CI/CD

Next.js & Code Deployment: A Beginner's Guide to DigitalOcean

Next.js & Dynamic Routes: A Beginner’s Guide to URL Power

Next.js & Code Deployment: A Beginner's Guide to Cloudflare

Using `getStaticProps` and `getStaticPaths`

Using `getServerSideProps`