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 中或响应用户操作，如按钮单击).

I have developed a web app that uses Nextjs app for the frontend and a Python (Django) API server as the backend. Most of my front end pages have API calls to my backend server (in ComponentDidMount or in response to user actions like button clicks).

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

I want to deploy this app to my server. I am using Nginx as the reverse proxy. The backend deployment is sorted. I am confused about deploying the nextjs app.

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

After reading the docs I figured there are 2 ways to do this:

1. 运行next build，然后next start.这将在端口 3000 上启动 nodejs 服务器.我可以使用 nginx 将流量引导到该端口.
2. 运行下一个导出.这将生成一个 out 目录.我可以使用 Nginx 等反向代理将传入流量引导到此目录.

1. Run next build and then next start. This will start a nodejs server on port 3000. I can channel traffic to this port using nginx.
2. Run next export. This will generate an out directory. I can channel incoming traffic to this directory using a reverse proxy like Nginx.

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

Which of the 2 options should I use? What are the differences?

推荐答案

借助我在 NextJS 讨论论坛上收到的答案回答我自己的问题 链接在这里

Answering my own question with the help of the answer I received on the NextJS discussions forum link here

next build 在 .next 文件夹中构建生产应用程序.无论您是要运行 next start 还是 next export，都需要运行此命令.

next build builds the production application in the .next folder. You need to run this command irrespective of whether you want to run next start or next export.

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

After building, next start starts a Node.js server that supports hybrid pages, serving both statically generated and server-side rendered pages.

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

next export will export all your pages to static HTML files that you can serve with any host. This is similar to what create-react-app does, but you can still build dynamic pages at build-time with exportPathMap.

注意:使用 next export 静态生成的页面仍然是响应式的，即任何在运行时更新页面的动态 JS 代码将继续照常运行(就像任何其他 ReactJS 应用程序一样).Next.js 将水合您的应用程序客户端，使其具有完全的交互性.只是页面的动态部分只会在运行时在浏览器中呈现，因此搜索引擎爬虫无法使用它.

Note: Statically generated pages, using next export, are still reactive i.e. any dynamic JS code, which updates your pages at run time, will continue to run as usual (like any other ReactJS app). Next.js will hydrate your application client-side to give it full interactivity. Its just that the dynamic section of the page will only be rendered in the browser at run time and hence it won't be available to search engine crawlers.

next export.它非常适合登录页面、博客、新闻文章等页面，或仅在代码构建期间更新的其他类型的页面.如果您的页面数据需要更频繁地更新，您可以设置后台任务以定期构建代码.这将加快您的首次绘制"速度，并将整个页面数据提供给搜索引擎爬虫进行索引.

next export is recommended if you have some dynamic pages which need to some data to be fetched only at 'build' time. It is perfect for pages like landing pages, blogs, news articles etc, or for other kinds of pages which are updated only during code builds. You can setup a background task to build your code at regular intervals if your page data needs to be updated more frequently. This will speed up your 'first paint' speed and also provide the entire page data to search engine crawlers for indexing.

如果您不需要在构建时获取任何数据，即您的页面在运行时动态呈现，那么您应该使用 next build 然后 next start.这还将为页面中非动态的部分生成静态 HTML.这将加快页面的首次绘制"时间.请参阅此自动静态优化.

If you do not need any data fetching at build time i.e. your pages are rendered dynamically at run time then you should use next build and then next start. This will also generate static HTML for sections of your page which are not dynamic. This will speed up the 'first paint' time of your pages. See this Automatic Static Optimization.

这篇关于Next.js 中的 `next export` 和 `next build` 有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！