chore(docs): update next export to output: 'export' (#47717)
fix NEXT-927 ([link](https://linear.app/vercel/issue/NEXT-927))
This commit is contained in:
Steven
GitHub
parent
a6e504933b
commit
af49d5098b
39 changed files with 111 additions and 68 deletions
4
.github/ISSUE_TEMPLATE/1.bug_report.yml
vendored
4
.github/ISSUE_TEMPLATE/1.bug_report.yml
vendored
|
|
@ -43,7 +43,7 @@ body:
|
|||
- 'Routing (next/router, next/navigation, next/link)'
|
||||
- 'Script optimization (next/script)'
|
||||
- 'Standalone mode (output: "standalone")'
|
||||
- 'Static HTML Export (next export)'
|
||||
- 'Static HTML Export (output: "export")'
|
||||
- 'SWC minifier (swcMinify: true)'
|
||||
- 'SWC transpilation'
|
||||
- 'Turbopack (--turbo)'
|
||||
|
|
@ -90,4 +90,4 @@ body:
|
|||
- type: input
|
||||
attributes:
|
||||
label: How are you deploying your application? (if relevant)
|
||||
description: 'For example: next start, next export, Vercel, Other platform'
|
||||
description: 'For example: next start, Vercel, Other platform'
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ body:
|
|||
- type: input
|
||||
attributes:
|
||||
label: How are you deploying your application? (if relevant)
|
||||
description: 'For example: next start, next export, Vercel, Other platform'
|
||||
description: 'For example: next start, Vercel, Other platform'
|
||||
- type: textarea
|
||||
attributes:
|
||||
label: Describe the Bug
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
description: Learn how AMP pages are created when used together with `next export`.
|
||||
description: Learn how AMP pages are created when used together with export.
|
||||
---
|
||||
|
||||
# AMP in Static HTML export
|
||||
|
||||
When using `next export` to do [Static HTML export](/docs/advanced-features/static-html-export.md) statically prerender pages, Next.js will detect if the page supports AMP and change the exporting behavior based on that.
|
||||
When using [Static HTML export](/docs/advanced-features/static-html-export.md) statically prerender pages, Next.js will detect if the page supports AMP and change the exporting behavior based on that.
|
||||
|
||||
For example, the hybrid AMP page `pages/about.js` would output:
|
||||
|
||||
|
|
|
|||
|
|
@ -299,7 +299,7 @@ Next.js doesn't know about variants of a page so it's up to you to add the `href
|
|||
|
||||
## How does this work with Static Generation?
|
||||
|
||||
> Note that Internationalized Routing does not integrate with [`next export`](/docs/advanced-features/static-html-export.md) as `next export` does not leverage the Next.js routing layer. Hybrid Next.js applications that do not use `next export` are fully supported.
|
||||
> Note that Internationalized Routing does not integrate with [`output: 'export'`](/docs/advanced-features/static-html-export.md) as it does not leverage the Next.js routing layer. Hybrid Next.js applications that do not use `output: 'export'` are fully supported.
|
||||
|
||||
### Dynamic Routes and `getStaticProps` Pages
|
||||
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@ If `fallback` is `true`, then the behavior of `getStaticProps` changes in the fo
|
|||
- When complete, the browser receives the `JSON` for the generated path. This will be used to automatically render the page with the required props. From the user’s perspective, the page will be swapped from the fallback page to the full page.
|
||||
- At the same time, Next.js adds this path to the list of pre-rendered pages. Subsequent requests to the same path will serve the generated page, like other pages pre-rendered at build time.
|
||||
|
||||
> **Note:** `fallback: true` is not supported when using [`next export`](/docs/advanced-features/static-html-export.md).
|
||||
> **Note:** `fallback: true` is not supported when using [`output: 'export'`](/docs/advanced-features/static-html-export.md).
|
||||
|
||||
#### When is `fallback: true` useful?
|
||||
|
||||
|
|
@ -153,7 +153,7 @@ If `fallback` is `'blocking'`, new paths not returned by `getStaticPaths` will w
|
|||
|
||||
`fallback: 'blocking'` will not _update_ generated pages by default. To update generated pages, use [Incremental Static Regeneration](/docs/basic-features/data-fetching/incremental-static-regeneration.md) in conjunction with `fallback: 'blocking'`.
|
||||
|
||||
> **Note:** `fallback: 'blocking'` is not supported when using [`next export`](/docs/advanced-features/static-html-export.md).
|
||||
> **Note:** `fallback: 'blocking'` is not supported when using [`output: 'export'`](/docs/advanced-features/static-html-export.md).
|
||||
|
||||
### Fallback pages
|
||||
|
||||
|
|
|
|||
|
|
@ -449,7 +449,7 @@ The following Image Optimization cloud providers are included:
|
|||
|
||||
If you need a different provider, you can use the [`loader`](#loader) prop with `next/legacy/image`.
|
||||
|
||||
> Images can not be optimized at build time using [`next export`](/docs/advanced-features/static-html-export.md), only on-demand. To use `next/legacy/image` with `next export`, you will need to use a different loader than the default. [Read more in the discussion.](https://github.com/vercel/next.js/discussions/19065)
|
||||
> Images can not be optimized at build time using [`output: 'export'`](/docs/advanced-features/static-html-export.md), only on-demand. To use `next/legacy/image` with `output: 'export'`, you will need to use a different loader than the default. [Read more in the discussion.](https://github.com/vercel/next.js/discussions/19065)
|
||||
|
||||
> The `next/legacy/image` component's default loader uses [`squoosh`](https://www.npmjs.com/package/@squoosh/lib) because it is quick to install and suitable for a development environment. When using `next start` in your production environment, it is strongly recommended that you install [`sharp`](https://www.npmjs.com/package/sharp) by running `yarn add sharp` in your project directory. This is not necessary for Vercel deployments, as `sharp` is installed automatically.
|
||||
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ For new projects, you can build your entire API with API Routes. If you have an
|
|||
## Caveats
|
||||
|
||||
- API Routes [do not specify CORS headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), meaning they are **same-origin only** by default. You can customize such behavior by wrapping the request handler with the [CORS request helpers](https://github.com/vercel/next.js/tree/canary/examples/api-routes-cors).
|
||||
- API Routes can't be used with [`next export`](/docs/advanced-features/static-html-export.md)
|
||||
- API Routes can't be used with [`output: 'export'`](/docs/advanced-features/static-html-export.md)
|
||||
|
||||
## Related
|
||||
|
||||
|
|
|
|||
|
|
@ -107,11 +107,11 @@ The following services support Next.js `v12+`. Below, you’ll find examples or
|
|||
|
||||
### Static Only
|
||||
|
||||
The following services only support deploying Next.js using [`next export`](/docs/advanced-features/static-html-export.md).
|
||||
The following services only support deploying Next.js using [`output: 'export'`](/docs/advanced-features/static-html-export.md).
|
||||
|
||||
- [GitHub Pages](https://github.com/vercel/next.js/tree/canary/examples/github-pages)
|
||||
|
||||
You can also manually deploy the [`next export`](/docs/advanced-features/static-html-export.md) output to any static hosting provider, often through your CI/CD pipeline like GitHub Actions, Jenkins, AWS CodeBuild, Circle CI, Azure Pipelines, and more.
|
||||
You can also manually deploy the output from [`output: 'export'`](/docs/advanced-features/static-html-export.md) to any static hosting provider, often through your CI/CD pipeline like GitHub Actions, Jenkins, AWS CodeBuild, Circle CI, Azure Pipelines, and more.
|
||||
|
||||
### Serverless
|
||||
|
||||
|
|
|
|||
|
|
@ -181,7 +181,7 @@ This means you can remove common Gatsby plugins like:
|
|||
|
||||
Instead, use the built-in [`next/image`](/docs/api-reference/next/image.md) component and [Automatic Image Optimization](/docs/basic-features/image-optimization.md).
|
||||
|
||||
> The `next/image` component's default loader is not supported when using [`next export`](/docs/advanced-features/static-html-export.md). However, other loader options will work.
|
||||
> The `next/image` component's default loader is not supported when using [`output: 'export'`](/docs/advanced-features/static-html-export.md). However, other loader options will work.
|
||||
|
||||
```jsx
|
||||
import Image from 'next/image'
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
# `next export` with Image API
|
||||
# Export with Image Optimization API
|
||||
|
||||
#### Why This Error Occurred
|
||||
|
||||
You are attempting to run `next export` while importing the `next/image` component using the default `loader` configuration.
|
||||
You configured `output: 'export'` (or ran `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.
|
||||
|
||||
|
|
@ -19,6 +19,6 @@ This is because Next.js optimizes images on-demand, as users request them (not a
|
|||
|
||||
- [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)
|
||||
- [`output: '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)
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
# `next export` No Custom Routes
|
||||
# `Export Custom Routes
|
||||
|
||||
#### Why This Error Occurred
|
||||
|
||||
In your `next.config.js` `rewrites`, `redirects`, or `headers` were defined while `next export` was being run outside of a platform that supports them.
|
||||
In your `next.config.js` you defined `rewrites`, `redirects`, or `headers` along with `output: 'export'` (or you ran `next export`).
|
||||
|
||||
These configs do not apply when exporting your Next.js application manually.
|
||||
|
||||
#### Possible Ways to Fix It
|
||||
|
||||
Disable the `rewrites`, `redirects`, and `headers` from your `next.config.js` when using `next export` to deploy your application or deploy your application using [a method](https://nextjs.org/docs/deployment#vercel-recommended) that supports these configs.
|
||||
Disable the `rewrites`, `redirects`, and `headers` from your `next.config.js` when using `output: 'export'` (or `next export`) to deploy your application or deploy your application using [a method](https://nextjs.org/docs/deployment#managed-nextjs-with-vercel) that supports these configs.
|
||||
|
||||
### Useful Links
|
||||
|
||||
- [Deployment Documentation](https://nextjs.org/docs/deployment#vercel-recommended)
|
||||
- [`next export` Documentation](https://nextjs.org/docs/advanced-features/static-html-export)
|
||||
- [Deployment Documentation](https://nextjs.org/docs/deployment)
|
||||
- [`output: 'export'` Documentation](https://nextjs.org/docs/advanced-features/static-html-export)
|
||||
- [Rewrites Documentation](https://nextjs.org/docs/api-reference/next.config.js/rewrites)
|
||||
- [Redirects Documentation](https://nextjs.org/docs/api-reference/next.config.js/redirects)
|
||||
- [Headers Documentation](https://nextjs.org/docs/api-reference/next.config.js/headers)
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
|
||||
#### Why This Warning Occurred
|
||||
|
||||
You attempted to statically export your application via `next export`, however, one or more of your pages uses `getInitialProps`.
|
||||
You attempted to statically export your application via `output: 'export'` or `next export`, however, one or more of your pages uses `getInitialProps`.
|
||||
|
||||
Next.js discourages you to use `getInitialProps` in this scenario.
|
||||
|
||||
#### Possible Ways to Fix It
|
||||
|
||||
Next.js has a proper SSG support, so usage of `next export` should always be paired with `getStaticProps`.
|
||||
Use `getStaticProps` instead for proper SSG support.
|
||||
|
||||
### Useful Links
|
||||
|
||||
|
|
|
|||
|
|
@ -2,21 +2,19 @@
|
|||
|
||||
#### Why This Error Occurred
|
||||
|
||||
You attempted to statically export your application via `next export`, however, one or more of your pages uses `getServerSideProps`.
|
||||
You attempted to statically export your application via `output: 'export'` or `next export`, however, one or more of your pages uses `getServerSideProps`.
|
||||
|
||||
The `getServerSideProps` lifecycle is not compatible with `next export`, so you'll need to use `next start` when self hosting or deploy to a provider like [Vercel](https://vercel.com).
|
||||
It is not possible to use `getServerSideProps` without a server, so you'll need to use `next start` when self hosting or deploy to a provider like [Vercel](https://vercel.com).
|
||||
|
||||
#### Possible Ways to Fix It
|
||||
|
||||
1. If you'd like to keep your application static, you can use `getStaticProps` instead of `getServerSideProps`.
|
||||
|
||||
2. If you want to use server-side rendering, update your build command and remove `next export`. For example, in your `package.json`:
|
||||
2. If you want to use server-side rendering, update your build command and remove `output: 'export'` and remove `next export`. For example, in your `package.json`:
|
||||
|
||||
```diff
|
||||
diff --git a/bla.json b/bla.json
|
||||
index b84aa66c4..149e67565 100644
|
||||
--- a/bla.json
|
||||
+++ b/bla.json
|
||||
--- a/package.json
|
||||
+++ b/package.json
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"scripts": {
|
||||
|
|
@ -28,7 +26,19 @@ The `getServerSideProps` lifecycle is not compatible with `next export`, so you'
|
|||
}
|
||||
```
|
||||
|
||||
> **Note**: Removing `next export` does not mean your entire application is no longer static.
|
||||
```diff
|
||||
--- a/next.config.js
|
||||
+++ b/next.config.js
|
||||
@@ -1,4 +1,4 @@
|
||||
{
|
||||
module.exports = {
|
||||
reactStrictMode: true,
|
||||
- output: "export",
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> **Note**: Removing export does not mean your entire application is no longer static.
|
||||
> Pages that use `getStaticProps` or [no lifecycle](https://nextjs.org/docs/advanced-features/automatic-static-optimization) **will still be static**!
|
||||
|
||||
### Useful Links
|
||||
|
|
|
|||
|
|
@ -11,4 +11,4 @@ While prerendering a page an error occurred. This can occur for many reasons fro
|
|||
- Set default values for all dynamic pages' props (avoid `undefined`, use `null` instead so it can be serialized)
|
||||
- Check for any out of date modules that you might be relying on
|
||||
- Make sure your component handles `fallback` if it is enabled in `getStaticPaths`. [Fallback docs](https://nextjs.org/docs/api-reference/data-fetching/get-static-paths#fallback-false)
|
||||
- Make sure you are not trying to export (`next export`) pages that have server-side rendering enabled [(getServerSideProps)](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props)
|
||||
- Make sure you are not trying to export (`output: 'export'` or `next export`) pages that have server-side rendering enabled [`getServerSideProps`](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props)
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ You attempted to export a page with a `fallback: true` return value from `getSta
|
|||
|
||||
#### Possible Ways to Fix It
|
||||
|
||||
If you would like the `fallback: true` behavior, `next export` should not be used. Instead follow the [deployment documentation](https://nextjs.org/docs/deployment) to deploy your incrementally generated static site.
|
||||
If you would like the `fallback: true` behavior, you must remove `output: 'export'` and remove `next export` in favor of a different [deployment solution](https://nextjs.org/docs/deployment).
|
||||
|
||||
### Useful Links
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"export": "next export",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Basic export example
|
||||
|
||||
This example shows the most basic usage of `next export`. Without `exportPathMap`.
|
||||
This example shows basic usage of `output: 'export'`.
|
||||
|
||||
## Deploy your own
|
||||
|
||||
|
|
|
|||
10
examples/basic-export/next.config.js
Normal file
10
examples/basic-export/next.config.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
// @ts-check
|
||||
|
||||
/**
|
||||
* @type {import('next').NextConfig}
|
||||
*/
|
||||
const nextConfig = {
|
||||
output: 'export',
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
||||
|
|
@ -2,8 +2,8 @@
|
|||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build && next export",
|
||||
"start": "next start"
|
||||
"build": "next build",
|
||||
"start": "serve out"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "latest",
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
"@types/node": "^18.0.0",
|
||||
"@types/react": "^18.0.14",
|
||||
"@types/react-dom": "^18.0.5",
|
||||
"serve": "^14.2.0",
|
||||
"typescript": "^4.7.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,15 @@
|
|||
import Link from 'next/link'
|
||||
|
||||
const About = () => {
|
||||
return <div>About us</div>
|
||||
return (
|
||||
<div>
|
||||
<h1>About</h1>
|
||||
<p>Now you are on the About page!</p>
|
||||
<p>
|
||||
Go back to the <Link href="/">Home</Link> page.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default About
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
const About2 = () => {
|
||||
return <div>About 2</div>
|
||||
}
|
||||
|
||||
export default About2
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
const Day = () => {
|
||||
return <div>Hello Day</div>
|
||||
}
|
||||
|
||||
export default Day
|
||||
|
|
@ -3,7 +3,11 @@ import Link from 'next/link'
|
|||
const Home = () => {
|
||||
return (
|
||||
<div>
|
||||
Hello World. <Link href="/about">About</Link>
|
||||
<h1>Home</h1>
|
||||
<p>Hello World! This is the Home page</p>
|
||||
<p>
|
||||
Visit the <Link href="/about">About</Link> page.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@
|
|||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"export": "cross-env NEXT_EXPORT=true next build && cross-env NEXT_EXPORT=true next export"
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "latest",
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ This example show how you can use Next.js inside an Electron application to avoi
|
|||
| Electron | `/electron-src` | `/main` |
|
||||
| Production | | `/dist` |
|
||||
|
||||
For development it's going to run a HTTP server and let Next.js handle routing. In production it use `next export` to pre-generate HTML static files and use them in your app instead of running an HTTP server.
|
||||
For development it's going to run a HTTP server and let Next.js handle routing. In production it use `output: 'export'` to pre-generate HTML static files and use them in your app instead of running an HTTP server.
|
||||
|
||||
## How to use
|
||||
|
||||
|
|
|
|||
8
examples/with-electron-typescript/next.config.js
Normal file
8
examples/with-electron-typescript/next.config.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
/**
|
||||
* @type {import('next').NextConfig}
|
||||
*/
|
||||
const nextConfig = {
|
||||
output: 'export',
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
"scripts": {
|
||||
"clean": "rimraf dist main renderer/out renderer/.next",
|
||||
"dev": "npm run build-electron && electron .",
|
||||
"build-renderer": "next build renderer && next export renderer",
|
||||
"build-renderer": "next build renderer",
|
||||
"build-electron": "tsc -p electron-src",
|
||||
"build": "npm run build-renderer && npm run build-electron",
|
||||
"pack-app": "npm run build && electron-builder --dir",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
This example shows how you can use Next.js inside an Electron application to avoid a lot of configuration. It uses the Next.js router as view and server-render to speed up the initial render of the application.
|
||||
|
||||
For development it's going to run an HTTP server and let Next.js handle routing. In production it uses `next export` to pre-generate HTML static files and uses them in your app instead of running an HTTP server.
|
||||
For development it's going to run an HTTP server and let Next.js handle routing. In production it uses `output: 'export'` to pre-generate HTML static files and uses them in your app instead of running an HTTP server.
|
||||
|
||||
**For detailed documentation about how to build Electron apps with Next.js, see [this blog post](https://leo.im/2017/electron-next)!**
|
||||
|
||||
|
|
|
|||
8
examples/with-electron/next.config.js
Normal file
8
examples/with-electron/next.config.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
/**
|
||||
* @type {import('next').NextConfig}
|
||||
*/
|
||||
const nextConfig = {
|
||||
output: 'export',
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
"scripts": {
|
||||
"clean": "rimraf dist renderer/.next renderer/out",
|
||||
"start": "electron .",
|
||||
"build": "next build renderer && next export renderer",
|
||||
"build": "next build renderer",
|
||||
"pack-app": "npm run build && electron-builder --dir",
|
||||
"dist": "npm run build && electron-builder"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@
|
|||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"export": "next export -o build"
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ionic/core": "^5.4.1",
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@
|
|||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"export": "npm run build && next export"
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "latest",
|
||||
|
|
|
|||
|
|
@ -1,9 +1,15 @@
|
|||
import Link from 'next/link'
|
||||
|
||||
export default function Home() {
|
||||
const Home = () => {
|
||||
return (
|
||||
<div>
|
||||
Hello World. <Link href="/about">About</Link>
|
||||
<h1>Home</h1>
|
||||
<p>Hello World! This is the Home page</p>
|
||||
<p>
|
||||
Visit the <Link href="/about">About</Link> page.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
"next": "latest",
|
||||
"react-dom": "^18.2.0",
|
||||
"react": "^18.2.0",
|
||||
"serve": "^14.0.1",
|
||||
"serve": "^14.2.0",
|
||||
"typescript": "^4.8.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -676,9 +676,9 @@ const Image = forwardRef<HTMLImageElement | null, ImageProps>(
|
|||
if (process.env.NODE_ENV !== 'production') {
|
||||
if (config.output === 'export' && isDefaultLoader && !unoptimized) {
|
||||
throw new Error(
|
||||
`Image Optimization using Next.js' default loader is not compatible with \`{ output: "export" }\`.
|
||||
`Image Optimization using the default loader is not compatible with \`{ output: 'export' }\`.
|
||||
Possible solutions:
|
||||
- Configure \`{ output: "standalone" }\` or remove it to run server mode including the Image Optimization API.
|
||||
- Remove \`{ output: 'export' }\` and run "next start" to run server mode including 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`
|
||||
)
|
||||
|
|
|
|||
|
|
@ -424,7 +424,7 @@ export default async function exportApp(
|
|||
!hasNextSupport
|
||||
) {
|
||||
throw new ExportError(
|
||||
`Image Optimization using Next.js' default loader is not compatible with \`next export\`.
|
||||
`Image Optimization using the default loader is not compatible with 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.
|
||||
|
|
|
|||
|
|
@ -449,7 +449,7 @@ export async function renderToHTML(
|
|||
) {
|
||||
warn(
|
||||
`Detected getInitialProps on page '${pathname}'` +
|
||||
` while running "next export". It's recommended to use getStaticProps` +
|
||||
` while running export. It's recommended to use getStaticProps` +
|
||||
` which has a more correct behavior for static exporting.` +
|
||||
`\nRead more: https://nextjs.org/docs/messages/get-initial-props-export`
|
||||
)
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ describe('Export with default loader next/image component', () => {
|
|||
it('should have error during next export', async () => {
|
||||
const { stderr } = await nextExport(appDir, { outdir }, { stderr: true })
|
||||
expect(stderr).toContain(
|
||||
"Image Optimization using Next.js' default loader is not compatible with `next export`."
|
||||
'Image Optimization using the default loader is not compatible with export.'
|
||||
)
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ describe('next/image with output export config', () => {
|
|||
it('should error', async () => {
|
||||
const browser = await webdriver(appPort, '/')
|
||||
const msg =
|
||||
'Image Optimization using Next.js\' default loader is not compatible with `{ output: "export" }`.'
|
||||
"Image Optimization using the default loader is not compatible with `{ output: 'export' }`."
|
||||
expect(await hasRedbox(browser, true)).toBe(true)
|
||||
expect(await getRedboxHeader(browser)).toContain(msg)
|
||||
expect(stderr).toContain(msg)
|
||||
|
|
|
|||
Loading…
Reference in a new issue