Nextjs app won't export due to Image Optimization-CodePudding

I see this question but the most upvoted answer was to use some Akamai-based config and I am not hosting this with Akamai.

I have a React/Nextjs with a package.json whose scripts look like:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "export": "next export"
},

When I run:

npm run export

I get:

> [email protected] export
> next export

info  - using build directory: /Users/myuser/workspace/myappsite/myapp-website/.next
info  - Copying "static build" directory
info  - No "exportPathMap" found in "/Users/myuser/workspace/myappsite/myapp-website/next.config.js". Generating map from "./pages"
Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
  Possible solutions:
    - Use `next start` to run a server, which includes the Image Optimization API.
    - Configure `images.unoptimized = true` in `next.config.js` to disable the Image Optimization API.
  Read more: https://nextjs.org/docs/messages/export-image-api
    at /Users/myuser/workspace/myappsite/myapp-website/node_modules/next/dist/export/index.js:149:23
    at async Span.traceAsyncFn (/Users/myuser/workspace/myappsite/myapp-website/node_modules/next/dist/trace/trace.js:79:20)

When I check my next.config.js file I see:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = nextConfig

What do I need to do so that npm run export runs successfully? And what's happening here?

CodePudding user response：

In the next.config.js, turn off the image optimization feature, and then run npm build and npm export. Export doesn't support image optimization because there won't be any nextjs server to optimize image. After export you can use third party libraries to optimize your images or load your images from websites which optimizes your images.

Add this is config file -

images: {
        unoptimized: true
    }

CodePudding user response：

I also don't understand why Nextjs wouldn't just work as-is, out of the starting gate.

What we have to keep in mind is how Next.js optimization works under the hood. The images are not optimized during build, they are optimized on-demand. Naturally, for that a server needs to be running.

It is mentioned in the docs:

Images can not be optimized at build time using next export, only on-demand. To use next/image with next export, you will need to use a different loader than the default. Read more in the discussion.

Running next export does not run a server. Instead you are trying to export a static HTML out of your next.js project (for example, to run on github pages etc.)

next export allows you to export your Next.js application to static HTML, which can be run standalone without the need of a Node.js server.

There will be unsupported features, and image optimization is one example.

You can change configuration like :

module.exports = {
  images: {
    unoptimized: true,
  },
}

module.exports = {
  images: {
    loader: 'imgix',
    path: 'https://example.com/myaccount/',
  },
}

By using the imgix loader, you are offloading that task to imgix servers, and they will serve you the image. By using unoptimized : true in config, you are disabling image optimization. This way you do not need a server.