前言
在 Web 开发中，静态网站是一种非常常见的网站类型。它们由一组 HTML、CSS 和 JavaScript 文件组成，这些文件在服务器上存储并直接提供给客户端浏览器。这种网站类型的好处是性能高、安全性好、易于扩展和部署。
Next.js 是一款基于 React 的轻量级框架，它可以帮助我们快速构建静态网站。在本文中，我们将详细介绍如何使用 Next.js 生成静态网站，并提供一些示例代码和指导意义。
前置知识
在阅读本文之前，您需要对 React、Node.js 和基本的 Web 开发知识有一定的了解。
创建 Next.js 应用程序
首先，我们需要创建一个 Next.js 应用程序。可以使用以下命令：
npx create-next-app my-app
这将创建一个名为 my-app 的新 Next.js 应用程序。完成后，进入该目录并启动开发服务器：
cd my-app npm run dev
现在，您可以在浏览器中访问 http://localhost:3000 来查看您的应用程序。
生成静态网站
接下来，我们将介绍如何使用 Next.js 生成静态网站。这可以通过两种方式实现：
1. 生成预渲染 HTML
默认情况下，Next.js 会在每个页面的服务端渲染时生成预渲染 HTML。这意味着，当页面被首次请求时，Next.js 会生成一个 HTML 文件，并将其缓存起来。下一次请求时，Next.js 将直接提供缓存的 HTML 文件，而不是重新渲染页面。
这种方式可以帮助我们提高性能，并降低服务器负载。要启用这种方式，只需在 next.config.js 文件中添加以下配置：
module.exports = {
// ...
target: "serverless",
generate: {
fallback: true,
},
};在这个配置中，target 属性用于指定构建的目标，serverless 表示构建为无服务器应用程序。generate 属性用于配置生成器，fallback 属性表示当页面没有预渲染 HTML 时，使用后备机制。
2. 生成静态 HTML
除了预渲染 HTML，Next.js 还支持生成静态 HTML。这意味着，当页面被构建时，Next.js 将生成一个 HTML 文件，并将其保存到磁盘上。这种方式可以帮助我们更好地管理和分发静态文件。
要启用这种方式，只需在 next.config.js 文件中添加以下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -------------
-------------- ----- -------- -- -
------ -
---- - ----- --- --
--------- - ----- -------- --
----------- - ----- ---------- --
--
--
--在这个配置中，exportPathMap 属性用于指定应该导出哪些页面，返回一个对象，其中键是页面的 URL，值是页面的配置对象。
完成这些配置后，可以使用以下命令生成静态网站：
npm run build npm run export
这将在 out/ 目录中生成静态 HTML 文件。
示例代码
下面是一个简单的 Next.js 应用程序示例，它包含三个页面：首页、关于页面和联系页面。
-- -------------------- ---- ------- -- -------------- -------- ------ - ------ -------------- - ------ ------- ----- -- -------------- -------- ------- - ------ --------------- - ------ ------- ------ -- ---------------- -------- --------- - ------ ----------------- - ------ ------- --------
// next.config.js
module.exports = {
target: "serverless",
generate: {
fallback: true,
},
};指导意义
在本文中，我们介绍了如何使用 Next.js 生成静态网站。我们了解到，Next.js 支持两种方式生成静态网站：预渲染 HTML 和静态 HTML。这些方式可以帮助我们提高性能、降低服务器负载和更好地管理和分发静态文件。
同时，我们还提供了一个示例代码，它包含了三个基本页面：首页、关于页面和联系页面。您可以通过这个示例代码了解如何在 Next.js 中创建和管理页面。
总之，Next.js 是一个非常有用的工具，它可以帮助我们快速构建静态网站。如果您正在寻找一种简单、高效的方式来创建静态网站，那么 Next.js 绝对是一个不错的选择。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d909dfa941bf7134076384