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 应用感到困惑。
阅读文档后,我认为有两种方法可以做到这一点:
- 运行
next build
然后 next start
。这将在端口 3000 上启动一个 nodejs 服务器。我可以使用 Nginx 将流量引导到这个端口。
- 运行
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,你在服务器端获取它们,将它们传递给客户端,客户端呈现帖子并设置重新验证选项,你的应用程序将自动检查如果内容改变了数据库。由于您无法使用此功能,任何时候您的应用程序内容发生变化,您都必须重新部署您的应用程序。
我开发了一个 Web 应用程序,它使用 Nextjs 应用程序作为前端,并使用 Python (Django) API 服务器作为后端。我的大多数前端页面都有 API 调用我的后端服务器(在 ComponentDidMount 中或响应按钮点击等用户操作)。
我想将此应用程序部署到我的服务器。我使用 Nginx 作为反向代理。后端部署已排序。我对部署 nextjs 应用感到困惑。
阅读文档后,我认为有两种方法可以做到这一点:
- 运行
next build
然后next start
。这将在端口 3000 上启动一个 nodejs 服务器。我可以使用 Nginx 将流量引导到这个端口。 - 运行
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,你在服务器端获取它们,将它们传递给客户端,客户端呈现帖子并设置重新验证选项,你的应用程序将自动检查如果内容改变了数据库。由于您无法使用此功能,任何时候您的应用程序内容发生变化,您都必须重新部署您的应用程序。