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 id="product-name">{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
  };
};

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,
  };
};

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!

The above is the detailed content of Next.js: Dynamic Routing with API Integration.. For more information, please follow other related articles on the PHP Chinese website!