DEV Community

Cover image for Next.js: Dynamic Routing with API Integration.
Reme Le Hane
Reme Le Hane

Posted on • Originally published at remejuan.substack.com

1

Next.js: Dynamic Routing with API Integration.

The Idea

Next.js provides a file-based routing system that supports dynamic routes (e.g., /product/[id]). You can combine this with dynamic data fetching to create flexible and scalable applications. This is particularly useful for cases like e-commerce product pages, user profiles, or any content with unique identifiers.

Example: Dynamic Product Pages

1. Set Up the Dynamic Route

Create a file named [id].tsx inside a folder like /pages/product/:

pages/product/[id].tsx

2. Fetch Data for the Dynamic Route

// pages/product/[id].tsx

import { GetStaticPaths, GetStaticProps } from 'next';

type ProductProps = {
  product: {
    id: string;
    name: string;
    description: string;
    price: number;
  };
};

export default function ProductPage({ product }: ProductProps) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>Price: ${product.price}</p>
    </div>
  );
}

// Generate dynamic paths for the product pages
export const getStaticPaths: GetStaticPaths = async () => {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();

  // Map over the products to define paths
  const paths = products.map((product: { id: string }) => ({
    params: { id: product.id },
  }));

  return {
    paths, // Pre-render these paths at build time
    fallback: 'blocking', // Dynamically render other pages on request
  };
};

// Fetch product data for each page
export const getStaticProps: GetStaticProps = async ({ params }) => {
  const res = await fetch(`https://api.example.com/products/${params?.id}`);
  const product = await res.json();

  // Pass the product data as props
  return {
    props: { product },
    revalidate: 10, // Revalidate every 10 seconds
  };
};
Enter fullscreen mode Exit fullscreen mode

3. Handle Non-existent Pages

To handle cases where the id doesn’t exist, return a notFound property in getStaticProps:

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const res = await fetch(`https://api.example.com/products/${params?.id}`);

  if (res.status === 404) {
    return { notFound: true };
  }

  const product = await res.json();

  return {
    props: { product },
    revalidate: 10,
  };
};
Enter fullscreen mode Exit fullscreen mode

Key Features of This Approach:

  1. SEO-Friendly: Pages are pre-rendered with full HTML, making them great for search engines.

  2. Scalable: You can use fallback rendering (fallback: 'blocking') to dynamically generate pages for new data.

  3. Real-Time Updates: Combine with revalidate to ensure the data stays fresh without manual deployments.

  4. Error Handling: Handle 404s or other errors gracefully with notFound.

This method allows you to build highly dynamic and responsive web applications that scale easily!

Top comments (0)

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay