简介
Next.js 是一款流行的 React 服务器端渲染框架，它可以轻松创建高性能、SEO 友好并且易于维护的Web 应用程序。Next.js 提供了很多其它框架所没有的优秀功能，包括自动代码分割、静态生成和预取等。
其中，静态生成是 Next.js 最重要的特性之一。静态生成可以有效地提升网站的性能，同时也更适合于搜索引擎优化（SEO）。
在本文中，我们将会探讨如何将 Next.js 应用程序打包成静态页面。
步骤
步骤一：安装 Next.js
如果您还没有使用 Next.js，那么首先要安装它。 只需通过 npm 安装：
npm install next
步骤二：配置 next.config.js
您需要编辑 next.config.js 文件并将 target 设置为 serverless。这是必需的，因为我们将要打包成静态页面。
module.exports = {
target: 'serverless'
};步骤三：编写静态页面
接下来，我们需要为我们的应用程序编写一个静态页面。我们将创建一个 pages/export.js 文件，并在其中编写我们的页面代码。
以下代码会创建一个静态页面，该页面会显示 Hello World。
-- -------------------- ---- ------- -------- ------------ - ------ ---------- ------------ - ------ ----- -------- ---------------- - ------ - ------ -- -- - ------ ------- -----------
请注意函数 getStaticProps()，这个函数是在编译时执行的。Next.js 会向外部 API 或数据库请求数据，并在编译时静态地生成页面。
步骤四：生成静态页面
现在我们已经准备好将我们的 Next.js 应用程序打包成静态页面了。运行以下命令：
npm run build && npm run export
这会生成一个名为 out 的新文件夹，其中包含您的应用程序的静态版本。
步骤五：运行静态页面
最后，我们只需在本地运行静态页面就可以了。运行以下命令即可：
npx serve out
这将运行一个本地服务器，您可以在浏览器中打开 http://localhost:5000 来查看您的静态页面。
结论
在本文中，我们探讨了如何使用 Next.js 将应用程序打包成静态页面。这种方法对于性能和 SEO 优化都非常有用。我们建议您将此方法用于简单的页面，并使用服务器端渲染来生成动态内容的页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67010dbb0bef792019b0de99