Next.js 静态生成
介绍
Next.js 是一个流行的 React 框架，提供了多种渲染方式，包括静态生成（Static Generation）。静态生成是指在构建时生成 HTML 页面，而不是在每次请求时动态生成。这种方式非常适合内容不频繁变化的网站，例如博客、文档站点或产品展示页面。
静态生成的优势包括：
- 更快的加载速度：页面在构建时已经生成，用户访问时无需等待服务器渲染。
- 更好的 SEO：静态页面可以被搜索引擎轻松抓取和索引。
- 更低的服务器负载：页面是预先生成的，服务器只需提供静态文件。
接下来，我们将逐步学习如何在 Next.js 中使用静态生成。
静态生成的基本用法
在 Next.js 中，静态生成是通过 getStaticProps 函数实现的。这个函数在构建时运行，用于获取页面所需的数据，并将其作为 props 传递给页面组件。
示例：静态生成一个简单的页面
假设我们有一个博客页面，需要在构建时获取文章列表并生成静态页面。以下是实现步骤：
- 创建页面文件：在
pages目录下创建一个文件，例如blog.js。 - 定义
getStaticProps函数：在页面文件中导出getStaticProps函数，用于获取数据。
// pages/blog.js
import React from 'react';
export default function Blog({ posts }) {
return (
<div>
<h1>博客文章</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
// 在构建时运行，获取数据
export async function getStaticProps() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts');
const posts = await res.json();
return {
props: {
posts,
},
};
}
-
构建项目：运行
next build命令，Next.js 会在构建时调用getStaticProps，生成静态页面。 -
访问页面：构建完成后，访问
/blog页面，你将看到预先生成的文章列表。
getStaticProps 只在构建时运行，因此适合用于数据不频繁变化的页面。如果数据需要频繁更新，可以考虑使用服务器端渲染（SSR）或增量静态生成（ISR）。
静态生成与动态路由
Next.js 支持静态生成与动态路由结合使用。例如，为每篇博客文章生成一个静态页面。
示例：动态路由与静态生成
- 创建动态路由文件：在
pages目录下创建一个动态路由文件，例如pages/posts/[id].js。 - 定义
getStaticPaths和getStaticProps：getStaticPaths用于生成所有可能的路径，getStaticProps用于获取每篇文章的数据。
// pages/posts/[id].js
import React from 'react';
export default function Post({ post }) {
return (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
</div>
);
}
// 生成所有可能的路径
export async function getStaticPaths() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts');
const posts = await res.json();
const paths = posts.map((post) => ({
params: { id: post.id.toString() },
}));
return {
paths,
fallback: false, // 如果路径不存在，返回 404
};
}
// 获取每篇文章的数据
export async function getStaticProps({ params }) {
const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
const post = await res.json();
return {
props: {
post,
},
};
}
-
构建项目：运行
next build，Next.js 会为每篇文章生成一个静态页面。 -
访问页面：访问
/posts/1，你将看到预先生成的文章内容。
fallback 选项可以设置为 true 或 blocking，以支持增量静态生成（ISR）。这样，即使某些页面在构建时未生成，也可以在用户访问时动态生成。
实际应用场景
静态生成非常适合以下场景：
- 博客和文档站点：内容不频繁变化，适合在构建时生成静态页面。
- 产品展示页面：例如电商网站的产品详情页，可以在构建时生成静态页面。
- 营销页面：例如活动页面或落地页，适合静态生成以提高加载速度。
总结
Next.js 的静态生成功能为开发者提供了一种高效的方式来生成静态页面，适用于内容不频繁变化的场景。通过 getStaticProps 和 getStaticPaths，我们可以轻松实现静态生成和动态路由的结合。
如果你希望进一步学习，可以参考以下资源：
练习
- 创建一个简单的博客站点，使用静态生成功能生成文章列表和文章详情页。
- 尝试将
fallback设置为true，并观察增量静态生成的效果。 - 将你的项目部署到 Vercel，体验静态生成的实际性能优势。
祝你学习愉快！