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

Question

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).

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. 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?

Answer 1

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

Basics of next build, start and 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.

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

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.

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.

When to use 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.

When to use next start?

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.