CODEWITHSUNDEEP
deploymentnext.jsserver-side-rendering
GunnerFan
GunnerFan

Reputation: 4077

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

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?

Upvotes: 48

Views: 64725

Answers (3)

Hitesh Sahu
Hitesh Sahu

Reputation: 45110

Update 2024:

The "next export" command has been removed in favor of "output: export" in next.config.js. Learn more: https://nextjs.org/docs/advanced-features/static-html-export

Now you can connfigure pages to be exported as static site uisng next.config.js :

/* config options here */
const nextConfig = {
    output: 'export',
    images: {
        unoptimized: true,
    },
    distDir: 'out', // Where to export all pages
    trailingSlash: true,
    assetPrefix: '.',


    // time in seconds of no pages generating during static
    // generation before timing out
    staticPageGenerationTimeout: 1000,
    reactStrictMode: false
}

Upvotes: 5

Yilmaz
Yilmaz

Reputation: 49571

next export, also produces an optimized production ready build, but it builds fully static app, which means only html, css and javascript but no server-side code.

Since there is no server side code, you do not need a server to host your app. This makes hosting your app easier and cheaper because you dont need to maintain and scale a server. There are plenty of hosts in the market which offers very good pricing.

Since next export builds a static app, it means you cannot use api routes, server-side functions therefore you cannot revalidate. Revalidation means, your app will be checking database for a certain of time that you specify. Let's say you have a blogging app, you save your blog posts to database, with server side coe, you get those on server side, pass them to the client and client renders the posts and with revalidation option set, your app would automatically check the database if the content changed. Since you cannot use this feature, anytime content of your app changes, you have to redeploy your app.

Upvotes: 22

GunnerFan
GunnerFan

Reputation: 4077

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.

Upvotes: 77

Related Questions