Loading...
Loading...
Compare original and translation side by side
getStaticPropsgetStaticPathsgenerateStaticParamsgetStaticPropsgetStaticPathsgenerateStaticParams// pages/about.js
export default function About() {
return (
<div>
<h1>About Us</h1>
{/* ... */}
</div>
);
}next buildabout.html/about// pages/about.js
export default function About() {
return (
<div>
<h1>About Us</h1>
{/* ... */}
</div>
);
}next buildabout.html/aboutgetStaticProps()// This function runs at build time on the build server
export async function getStaticProps() {
return {
props: {
products: await getProductsFromDatabase(),
},
};
}
// The page component receives products prop from getStaticProps at build time
export default function Products({ products }) {
return (
<>
<h1>Products</h1>
<ul>
{products.map((product) => (
<li key={product.id}>{product.name}</li>
))}
</ul>
</>
);
}getStaticProps()// This function runs at build time on the build server
export async function getStaticProps() {
return {
props: {
products: await getProductsFromDatabase(),
},
};
}
// The page component receives products prop from getStaticProps at build time
export default function Products({ products }) {
return (
<>
<h1>Products</h1>
<ul>
{products.map((product) => (
<li key={product.id}>{product.name}</li>
))}
</ul>
</>
);
}getStaticPaths()// pages/products/[id].js
export async function getStaticPaths() {
const products = await getProductsFromDatabase();
const paths = products.map((product) => ({
params: { id: product.id },
}));
// fallback: false means pages that don't have the correct id will 404.
return { paths, fallback: false };
}
// params will contain the id for each generated page.
export async function getStaticProps({ params }) {
return {
props: {
product: await getProductFromDatabase(params.id),
},
};
}
export default function Product({ product }) {
// Render product
}getStaticPaths()// pages/products/[id].js
export async function getStaticPaths() {
const products = await getProductsFromDatabase();
const paths = products.map((product) => ({
params: { id: product.id },
}));
// fallback: false means pages that don't have the correct id will 404.
return { paths, fallback: false };
}
// params will contain the id for each generated page.
export async function getStaticProps({ params }) {
return {
props: {
product: await getProductFromDatabase(params.id),
},
};
}
export default function Product({ product }) {
// Render product
}Note (React 18+ / Next.js 13+): Modern Static GenerationIn Next.js 13's App Router,andgetStaticPropshave their equivalents ingetStaticPaths(for dynamic routes) and the ability to fetch data in an async component for static generation.generateStaticParamsUse Incremental Static Regeneration (ISR) for Freshness: If you have pages that are mostly static but need periodic updates, set ainterval or use on-demand revalidation.revalidatePartial Prerendering (PPR): A recent development in Next.js 14+ is Partial Prerendering, which allows a page to be partially statically rendered at build time and partially filled in at request time.
注意（React 18+ / Next.js 13+）：现代静态生成在Next.js 13的App Router中，和getStaticProps的替代方案是**getStaticPaths**（用于动态路由），以及在异步组件中获取数据以实现静态生成的能力。generateStaticParams**使用增量静态再生（ISR）保持内容新鲜度：**如果你的页面大部分是静态的但需要定期更新，可以设置间隔或使用按需重新验证。revalidate**部分预渲染（PPR）：**Next.js 14+中的一项最新功能是部分预渲染，它允许页面在构建时部分静态渲染，在请求时填充剩余部分。