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!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay