想法
Next.js 提供了一個基於檔案的路由系統，支援動態路由（例如 /product/[id]）。您可以將其與動態數據獲取結合起來，創建靈活且可擴展的應用程式。這對於電子商務產品頁面、使用者個人資料或任何具有唯一識別碼的內容等情況特別有用。
範例：動態產品頁面
1。設定動態路線
在 /pages/product/ 等資料夾中建立一個名為 [id].tsx 的檔案：
頁/產品/[id].tsx
2。取得動態路由的資料
// 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 不存在的情況，請在 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,
};
};
此方法的主要特點：
SEO 友善：頁面使用完整的 HTML 進行預渲染，非常適合搜尋引擎。
可擴充：您可以使用回退渲染（fallback：'blocking'）為新資料動態產生頁面。
即時更新：與重新驗證結合，確保資料保持最新，無需手動部署。
錯誤處理：使用 notFound 優雅地處理 404 或其他錯誤。
此方法可讓您建立高度動態且響應迅速且易於擴展的 Web 應用程式！
以上是Next.js：具有 API 整合的動態路由。的詳細內容。更多資訊請關注PHP中文網其他相關文章！
