Deploy fails for next.js static export

Support
,
1

I’m setting up a new Next.js project and can’t get it to deploy for static export.

I tried following the settings here: Framework integrations | Netlify Docs

Works when I use
Build command: next build
Publish directory: .next

But does not work when I use
Build command: next build && next export
Publish directory: out

I did set NETLIFY_NEXT_PLUGIN_SKIP to true.

I tried with a netlify.toml file and without one. Doesn’t work either way.

I also tried to follow the steps as described in this video and also doesn’t work: Next.js from the Ground Up: Next.js Deployment - YouTube

Here’s the deploy log:

1:00:46 AM: build-image version: d7b3813f01c06610bc1723ff1b22446513ee7941 (focal)
1:00:46 AM: build-image tag: v4.14.3
1:00:46 AM: buildbot version: d1344b6a6069b5a9790b0bc2308fa2d5761aa3e0
1:00:46 AM: Fetching cached dependencies
1:00:46 AM: Starting to download cache of 148.7MB
1:00:46 AM: Finished downloading cache in 1.434630725s
1:00:46 AM: Starting to extract cache
1:00:46 AM: Finished extracting cache in 1.323152001s
1:00:46 AM: Finished fetching cache in 2.806985708s
1:00:46 AM: Starting to prepare the repo for build
1:00:46 AM: Preparing Git Reference refs/heads/main
1:00:46 AM: Parsing package.json dependencies
1:00:46 AM: Starting build script
1:00:46 AM: Installing dependencies
1:00:46 AM: Python version set to 2.7
1:00:46 AM: Started restoring cached node version
1:00:46 AM: Finished restoring cached node version
1:00:46 AM: v16.18.0 is already installed.
1:00:46 AM: Now using node v16.18.0 (npm v8.19.2)
1:00:46 AM: Enabling node corepack
1:00:46 AM: Started restoring cached build plugins
1:00:46 AM: Finished restoring cached build plugins
1:00:46 AM: Attempting ruby version 2.7.2, read from environment
1:00:46 AM: Using ruby version 2.7.2
1:00:46 AM: Using PHP version 8.0
1:00:46 AM: No npm workspaces detected
1:00:46 AM: Started restoring cached node modules
1:00:46 AM: Finished restoring cached node modules
1:00:46 AM: Started restoring cached go cache
1:00:46 AM: Finished restoring cached go cache
1:00:46 AM: Installing Go version 1.17 (requested 1.17)
1:00:46 AM: unset GOOS;
1:00:46 AM: unset GOARCH;
1:00:46 AM: export GOROOT='/opt/buildhome/.gimme/versions/go1.17.linux.amd64';
1:00:46 AM: export PATH="/opt/buildhome/.gimme/versions/go1.17.linux.amd64/bin:${PATH}";
1:00:46 AM: go version >&2;
1:00:46 AM: export GIMME_ENV="/opt/buildhome/.gimme/env/go1.17.linux.amd64.env"
1:00:46 AM: go version go1.17 linux/amd64
1:00:46 AM: Installing missing commands
1:00:46 AM: Verify run directory
1:00:46 AM: ​
1:00:46 AM: ────────────────────────────────────────────────────────────────
1:00:46 AM:   Netlify Build                                                 
1:00:46 AM: ────────────────────────────────────────────────────────────────
1:00:46 AM: ​
1:00:46 AM: ❯ Version
1:00:46 AM:   @netlify/build 28.1.3
1:00:46 AM: ​
1:00:46 AM: ❯ Flags
1:00:46 AM:   baseRelDir: true
1:00:46 AM:   buildId: 635a107d9eeb3b3fa0f67857
1:00:46 AM:   deployId: 635a107d9eeb3b3fa0f67859
1:00:46 AM: ​
1:00:46 AM: ❯ Current directory
1:00:46 AM:   /opt/build/repo
1:00:46 AM: ​
1:00:46 AM: ❯ Config file
1:00:46 AM:   No config file was defined: using default values.
1:00:46 AM: ​
1:00:46 AM: ❯ Context
1:00:46 AM:   production
1:00:46 AM: ​
1:00:46 AM: ❯ Using Next.js Runtime - v4.27.3
1:00:46 AM: ​
1:00:46 AM: ────────────────────────────────────────────────────────────────
1:00:46 AM:   1. @netlify/plugin-nextjs (onPreBuild event)                  
1:00:46 AM: ────────────────────────────────────────────────────────────────
1:00:46 AM: ​
1:00:46 AM: Next.js cache restored.
1:00:46 AM: Not running Next Runtime
1:00:46 AM: ​
1:00:46 AM: (@netlify/plugin-nextjs onPreBuild completed in 42ms)
1:00:46 AM: ​
1:00:46 AM: ────────────────────────────────────────────────────────────────
1:00:46 AM:   2. Build command from Netlify app                             
1:00:46 AM: ────────────────────────────────────────────────────────────────
1:00:46 AM: ​
1:00:46 AM: $ next build && next export
1:00:46 AM: info  - Linting and checking validity of types...
1:00:46 AM: info  - Creating an optimized production build...
1:00:46 AM: info  - Compiled successfully
1:00:46 AM: info  - Collecting page data...
1:00:46 AM: info  - Generating static pages (0/3)
1:00:46 AM: info  - Generating static pages (3/3)
1:00:46 AM: info  - Finalizing page optimization...
1:00:46 AM: Route (pages)                              Size     First Load JS
1:00:46 AM: ┌ ○ /                                      3.57 kB        75.7 kB
1:00:46 AM: ├   /_app                                  0 B            72.1 kB
1:00:46 AM: └ ○ /404                                   181 B          72.3 kB
1:00:46 AM: + First Load JS shared by all              72.4 kB
1:00:46 AM:   ├ chunks/framework-8c5acb0054140387.js   45.4 kB
1:00:46 AM:   ├ chunks/main-d2a793b6dc23a82a.js        25.7 kB
1:00:46 AM:   ├ chunks/pages/_app-b982fa09370b0414.js  284 B
1:00:46 AM:   ├ chunks/webpack-8fa1640cc84ba8fe.js     750 B
1:00:46 AM:   └ css/ab44ce7add5c3d11.css               247 B
1:00:46 AM: ○  (Static)  automatically rendered as static HTML (uses no initial props)
1:00:46 AM: info  - using build directory: /opt/build/repo/.next
1:00:46 AM: info  - Copying "static build" directory
1:00:46 AM: info  - No "exportPathMap" found in "/opt/build/repo/next.config.js". Generating map from "./pages"
1:00:46 AM: Error: Image Optimization using Next.js' default loader is not compatible with `next export`.  Possible solutions:
1:00:46 AM:     - Use `next start` to run a server, which includes the Image Optimization API.
1:00:46 AM:     - Configure `images.unoptimized = true` in `next.config.js` to disable the Image Optimization API.
1:00:46 AM:   Read more: https://nextjs.org/docs/messages/export-image-api
1:00:46 AM:     at /opt/build/repo/node_modules/next/dist/export/index.js:149:23
1:00:46 AM:     at async Span.traceAsyncFn (/opt/build/repo/node_modules/next/dist/trace/trace.js:79:20)
1:00:46 AM: ​
1:00:46 AM: ────────────────────────────────────────────────────────────────
1:00:46 AM:   "build.command" failed                                        
1:00:46 AM: ────────────────────────────────────────────────────────────────
1:00:46 AM: Creating deploy upload records
1:00:46 AM: ​
1:00:46 AM:   Error message
1:00:46 AM:   Command failed with exit code 1: next build && next export
1:00:46 AM: ​
1:00:46 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2
1:00:46 AM:   Error location
1:00:46 AM:   In Build command from Netlify app:
1:00:46 AM:   next build && next export
1:00:46 AM: ​
1:00:46 AM:   Resolved config
1:00:46 AM:   build:
1:00:46 AM:     command: next build && next export
1:00:46 AM:     commandOrigin: ui
1:00:46 AM:     environment:
1:00:46 AM:       - NETLIFY_NEXT_PLUGIN_SKIP
1:00:46 AM:     publish: /opt/build/repo/out
1:00:46 AM:     publishOrigin: ui
1:00:46 AM:   plugins:
1:00:46 AM:     - inputs: {}
1:00:46 AM:       origin: ui
1:00:46 AM:       package: '@netlify/plugin-nextjs'
1:00:46 AM: Caching artifacts
1:00:46 AM: Started saving node modules
1:00:46 AM: Finished saving node modules
1:00:46 AM: Started saving build plugins
1:00:46 AM: Finished saving build plugins
1:00:46 AM: Started saving pip cache
1:00:46 AM: Finished saving pip cache
1:00:46 AM: Started saving emacs cask dependencies
1:00:46 AM: Finished saving emacs cask dependencies
1:00:46 AM: Started saving maven dependencies
1:00:46 AM: Finished saving maven dependencies
1:00:46 AM: Started saving boot dependencies
1:00:46 AM: Finished saving boot dependencies
1:00:46 AM: Started saving rust rustup cache
1:00:46 AM: Finished saving rust rustup cache
1:00:46 AM: Started saving go dependencies
1:00:46 AM: Finished saving go dependencies
1:00:46 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
1:00:46 AM: Failing build: Failed to build site
1:00:46 AM: Finished processing build request in 24.660528003s
3

Hey there, @slacle :wave:

Thanks so much for reaching out and welcome to the Netlify forums! Can you please share your netlify site name and your project repo? that will help us look into your settings further and hopefully come up with some next steps for you!

4

Hi @hillary

Here they are:

5

So - did you read that doc, and/or try reconfiguring your site as suggested in those messages? This looks to me like an (intended) limitation of next.js, not netlify, based on this specific message:

Configure `images.unoptimized = true` in `next.config.js` to disable the Image Optimization API.`
6

I somehow missed that part to be honest. In the actual deploy log on the Netlify admin, that part isn’t highlighted and I focused on the parts that were shown in red. Would be useful if the actual errors themselves were highlighted in red.

deploylog
deploylog1175×751 128 KB

But yes, that solved the problem. I put this in next.config.js:

  images: {
    unoptimized: true,
  },

Would also be useful if the static export part of Framework integrations | Netlify Docs was updated to include this required modification.

And what about next/image and Edge Functions as explained in Next.js on Netlify | Netlify Docs? Is that an option to set in next.config.js as a loader to be able to have optimized images?

7

next export is supposed to be a completely static output. I don’t think you’d be able to use that with next/image loader.

8

The images are still requested individually, no? So they are optimized on demand, and not at build time, as I understand.

Vercel supports image optimization automatically for next export it seems. No need to change any configuration like I had to do here when deploying to Vercel apparently.

9

OK, could be that our platform is different - we aren’t Vercel users so can’t speak to their setup.

On our platform, next export creates a static version of the site without dynamically resizable images. You’ll need to use next build rather than next export, if you want to use next/image (which we call ipx: GitHub - netlify/netlify-ipx: 🖼️ On-Demand image optimization for Netlify using ipx) on Netlify.

1 Like