b7d057453d
In a previous PR (#19032), we added a hard error during `next export` if the default Image Optimization API is being used because it requires a server to optimized on demand. The error message offers several different solutions but it didn't consider that by the time someone runs `next export`, they are probably done writing their app. So if `next export` is a hard requirement, the quickest path forward is to disable Image Optimization API. So this PR adds a new configuration option to `next.config.js`: ```js module.exports = { images: { unoptimized: true } } ``` ### Update Upon further discussion, we might want to avoid doing this just for images and instead introduce a top-level config to indicate export is coming and then handle errors or warn for [unsupported features](https://nextjs.org/docs/advanced-features/static-html-export#unsupported-features). ``` module.exports = { nextExport: true } ``` Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
24 lines
1.3 KiB
Markdown
24 lines
1.3 KiB
Markdown
# `next export` with Image API
|
|
|
|
#### Why This Error Occurred
|
|
|
|
You are attempting to run `next export` while importing the `next/image` component using the default `loader` configuration.
|
|
|
|
However, the default `loader` relies on the Image Optimization API which is not available for exported applications.
|
|
|
|
This is because Next.js optimizes images on-demand, as users request them (not at build time).
|
|
|
|
#### Possible Ways to Fix It
|
|
|
|
- Use [`next start`](https://nextjs.org/docs/api-reference/cli#production) to run a server, which includes the Image Optimization API.
|
|
- Use any provider which supports Image Optimization (such as [Vercel](https://vercel.com)).
|
|
- [Configure `loader`](https://nextjs.org/docs/api-reference/next/image#loader-configuration) in `next.config.js`.
|
|
- [Configure `unoptimized`](https://nextjs.org/docs/api-reference/next/image#unoptimized) in `next.config.js`.
|
|
|
|
### Useful Links
|
|
|
|
- [Deployment Documentation](https://nextjs.org/docs/deployment#managed-nextjs-with-vercel)
|
|
- [Image Optimization Documentation](https://nextjs.org/docs/basic-features/image-optimization)
|
|
- [`next export` Documentation](https://nextjs.org/docs/advanced-features/static-html-export)
|
|
- [`next/image` Documentation](https://nextjs.org/docs/api-reference/next/image)
|
|
- [Vercel Documentation](https://vercel.com/docs/concepts/next.js/image-optimization)
|