Skip to main content

Getting Started

Install the package in the project that uses Next.js.

Installation

yarn add -D next-export-optimize-images

Usage

  1. Write withExportImages in next.config.js.
next.config.js
const withExportImages = require('next-export-optimize-images')

module.exports = withExportImages({
output: 'export',
// write your next.js configuration values.
})

Alternatively, if another plugin is used in conjunction, write

next.config.js
const withExportImages = require('next-export-optimize-images')
const withAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})

module.exports = withExportImages(
withAnalyzer({
output: 'export',
// write your next.js configuration values.
})
)
// Or
module.exports = async () => {
const config = await withExportImages({
output: 'export',
// write your next.js configuration values.
})

return withAnalyzer(config)
}

Or ES modules can be used.

next.config.mjs
import withExportImages from 'next-export-optimize-images'

export default withExportImages({
output: 'export',
// write your next.js configuration values.
})
note

withExportImages is an asynchronous function that returns a Promise, so either write withExportImages first or wait for the Promise to resolve before applying other plugins.

  1. Change the description of the scripts that do the next build in package.json
package.json
{
- "build": "next build",
+ "build": "next build && next-export-optimize-images",
}
  1. Import from next-export-optimize-images/image and use it.
import Image from 'next-export-optimize-images/image'

<Image src="/images/img.png" width={1920} height={1280} alt="" />
// Or import as follows
import img from './img.png'
<Image src={img} alt="" />
// Or require as follows
<Image src={require('./img.png')} alt="" />

Alternatively, you can use next/legacy/image.

import Image from 'next-export-optimize-images/legacy/image'

<Image src="/images/img.png" width={1920} height={1280} alt="" />
// Or import as follows
import img from './img.png'
<Image src={img} alt="" />
// Or require as follows
<Image src={require('./img.png')} alt="" />

Local checks

  1. Run yarn build.
  2. Run npx http-server out