Next.js 是一个基于 React 的轻量级框架，专注于优化应用的性能和可维护性。Next.js 4 版本以上，新增了静态页面生成（SSG）的能力，可以让开发者构建高性能的静态网站。本文将深入分析如何在 Next.js 中生成静态页面，并提供示例代码和指导意义。
静态页面生成
静态页面生成是指在构建时生成 HTML、CSS、JS 等静态资源，在页面请求时直接返回，无需动态生成，提升了页面的渲染速度，缩短了页面的加载时间。与服务端渲染（SSR）不同的是，静态页面生成不需要通过服务器端来生成页面内容。
Next.js 的静态页面生成有两种方法：
- 预渲染
- 动态路由
预渲染
预渲染是指在构建时生成静态页面。当用户请求这些页面时，直接返回已经生成的静态页面。Next.js 提供了两种预渲染方式，分别是：
- 预渲染所有页面
- 部分页面预渲染
预渲染所有页面
使用 next export 命令进行预渲染所有页面。这种方式会生成所有页面的静态 HTML，可以直接部署到服务器上。预渲染所有页面的步骤如下：
- 在页面目录下创建一个名为
next.config.js的文件。 - 配置
next.config.js中的exportPathMap对象，可以指定哪些页面需要被预渲染。 - 运行
next build && next export命令来生成静态页面。
-- -------------------- ---- -------
-- --------------
-------------- - -
-------------- ----- -------- -- -
------ -
---- - ----- --- --
--------- - ----- -------- --
-------------------- - ----- ---------------- ------ - ----- ------------ - --
--------------------- - ----- ---------------- ------ - ----- ------------- - --
--
--
--# 生成静态页面 $ next build && next export
部分页面预渲染
使用 getStaticProps 函数进行部分页面的预渲染。这种方式可以灵活控制哪些页面需要被预渲染。当页面首次请求时，Next.js 会将 getStaticProps 函数返回的数据注入到页面组件中，然后返回静态 HTML。之后的请求会直接返回缓存的静态 HTML，不再执行 getStaticProps 函数。
-- -------------------- ---- -------
-- --------------
------ ------- -------- ------ ----- -- -
------ -
----
----------------- -- -
--- -------------------------------
---
-----
--
-
------ ----- -------- ---------------- -
----- --- - ----- ----------------------------------------------------
----- ----- - ----- -----------
------ -
------ -
------
--
--
-# 启动应用 $ next dev
注意：使用 getStaticProps 函数进行预渲染时，需要在开发模式下才能正常运行。
动态路由
动态路由是指请求时根据动态参数生成对应的静态页面。Next.js 可以根据路由参数来生成对应的静态页面，例如：/posts/10，可以生成 posts/10.html 文件。实现动态路由的步骤如下：
- 使用
getStaticPaths函数生成所有可能的路由参数。 - 使用
getStaticProps函数生成具体的路由页面。
-- -------------------- ---- -------
-- -------------------
------ ------- -------- ------ ---- -- -
------ -
---------
---------------------
------------------
----------
--
-
------ ----- -------- ---------------- -
----- --- - ----- ----------------------------------------------------
----- ----- - ----- -----------
----- ----- - ---------------- -- --
------- - --- ------------------ --
----
------ - ------ --------- ----- --
-
------ ----- -------- ---------------- ------ -- -
----- --- - ----- -----------------------------------------------------------------
----- ---- - ----- -----------
------ -
------ -
-----
--
--
-# 启动应用 $ next dev
总结
Next.js 的静态页面生成为构建高性能静态网站提供了强有力的支持。本文介绍了预渲染和动态路由两种静态页面生成方式，并提供了示例代码和指导意义。开发者可以根据实际需求选择适合的方式进行开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c56f5968c7c53b0eac0f2