Next.js 中的 `next export` 和 `next build` 有什么区别?

What is the difference between `next export` and `next build` in Next.js?

我开发了一个 Web 应用程序,它使用 Nextjs 应用程序作为前端,并使用 Python (Django) API 服务器作为后端。我的大多数前端页面都有 API 调用我的后端服务器(在 ComponentDidMount 中或响应按钮点击等用户操作)。

我想将此应用程序部署到我的服务器。我使用 Nginx 作为反向代理。后端部署已排序。我对部署 nextjs 应用感到困惑。

阅读文档后,我认为有两种方法可以做到这一点:

  1. 运行 next build 然后 next start。这将在端口 3000 上启动一个 nodejs 服务器。我可以使用 Nginx 将流量引导到这个端口。
  2. 运行next export。这将生成一个 out 目录。我可以使用像 Nginx 这样的反向代理将传入流量引导到这个目录。

我应该使用这两个选项中的哪个?有什么区别?

借助我在 NextJS 讨论论坛上收到的答案回答我自己的问题 link here

下一次构建、启动和导出的基础知识

next build.next 文件夹中构建生产应用程序。你需要 运行 这个命令,不管你是想 运行 next start 还是 next export.

构建后,next start 启动支持混合页面的 Node.js 服务器,为静态生成的页面和服务器端呈现的页面提供服务。

next export 会将您的所有页面导出到静态 HTML 文件,您可以使用任何主机提供这些文件。这类似于 create-react-app 所做的,但您仍然可以在构建时使用 exportPathMap.

构建动态页面

注意:静态生成的页面,使用 next export,仍然是反应性的,即任何在 运行 时间更新页面的动态 JS 代码,将像往常一样继续 运行(就像任何其他 ReactJS 应用程序一样)。 Next.js 将滋润您的应用程序客户端,使其具有完整的交互性。只是页面的动态部分只会在 运行 时间在浏览器中呈现,因此搜索引擎抓取工具无法使用它。

何时使用下一次导出?

next export 如果您有一些动态页面需要在 'build' 时 获取某些数据,则推荐使用

next export。它非常适合登录页面、博客、新闻文章等页面,或仅在代码构建期间更新的其他类型的页面。如果您的页面数据需要更频繁地更新,您可以设置后台任务以定期构建代码。这将 加快 您的 'first paint' 速度,并将整个页面数据提供给搜索引擎抓取工具进行索引。

何时使用下次启动?

如果您不需要在构建时获取任何数据,即您的页面在 运行 时动态呈现,那么您应该使用 next build,然后是 next start。这还将为页面的非动态部分生成静态 HTML。这将加快您页面的 'first paint' 时间。看到这个 Automatic Static Optimization.

下一次导出,也会生成优化的生产就绪构建,但它构建的是完全静态的应用程序,这意味着只有 html、css 和 javascript,但没有服务器端代码。

由于没有服务器端代码,您不需要服务器来托管您的应用程序。这使得托管您的应用程序更加容易且成本更低,因为您不需要维护和扩展服务器。市场上有很多提供非常优惠价格的主机。

由于 next export 构建静态应用程序,这意味着您不能使用 api 路由、服务器端功能,因此您无法重新验证。重新验证意味着,您的应用程序将在您指定的特定时间内检查数据库。假设你有一个博客应用程序,你将你的博客文章保存到数据库,使用服务器端 coe,你在服务器端获取它们,将它们传递给客户端,客户端呈现帖子并设置重新验证选项,你的应用程序将自动检查如果内容改变了数据库。由于您无法使用此功能,任何时候您的应用程序内容发生变化,您都必须重新部署您的应用程序。