想法
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中文网其他相关文章！
