Next.js中的“下一个导出"和“下一个构建"之间有什么区别? [英] What is the difference between `next export` and `next build` in Next.js?

问题描述

我已经开发了一个Web应用程序，该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. 运行下一个构建版本，然后下一个启动.这将在端口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 文件夹中构建生产应用程序.无论您要运行 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.

下一个导出会将所有页面导出到可以与任何主机一起使用的静态HTML文件.这类似于 create-react-app 所做的事情，但是您仍然可以在构建时使用

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 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中的“下一个导出"和“下一个构建"之间有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！