想法

Next.js 提供了一個基於檔案的路由系統(tǒng)，支援動態(tài)路由（例如 /product/[id]）。您可以將其與動態(tài)數(shù)據(jù)獲取結(jié)合起來，創(chuàng)建靈活且可擴(kuò)展的應(yīng)用程式。這對於電子商務(wù)產(chǎn)品頁面、使用者個人資料或任何具有唯一識別碼的內(nèi)容等情況特別有用。

範(fàn)例：動態(tài)產(chǎn)品頁面

1。設(shè)定動態(tài)路線

在 /pages/product/ 等資料夾中建立一個名為 [id].tsx 的檔案：

頁/產(chǎn)品/[id].tsx

2。取得動態(tài)路由的資料

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

3。處理不存在的頁面

要處理 id 不存在的情況，請?jiān)?getStaticProps 中傳回 notFound 屬性：

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

此方法的主要特點(diǎn)：

1. SEO 友善：頁面使用完整的 HTML 進(jìn)行預(yù)渲染，非常適合搜尋引擎。

2. 可擴(kuò)充：您可以使用回退渲染（fallback：'blocking'）為新資料動態(tài)產(chǎn)生頁面。

3. 即時更新：與重新驗(yàn)證結(jié)合，確保資料保持最新，無需手動部署。

4. 錯誤處理：使用 notFound 優(yōu)雅地處理 404 或其他錯誤。

此方法可讓您建立高度動態(tài)且響應(yīng)迅速且易於擴(kuò)展的 Web 應(yīng)用程式！

以上是Next.js：具有 API 整合的動態(tài)路由。的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！