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!

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs