From 365fbd45777a0d22de6aefe3b7eb1ad68da0f614 Mon Sep 17 00:00:00 2001 From: dc7290 <dhkh.cba0927@gmail.com> Date: Wed, 18 May 2022 02:21:00 +0900 Subject: [PATCH] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20Added=20`Configura?= =?UTF-8?q?tion`=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/docs/configuration.md | 100 +++++++++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 docs/docs/configuration.md diff --git a/docs/docs/configuration.md b/docs/docs/configuration.md new file mode 100644 index 00000000..7f1916c7 --- /dev/null +++ b/docs/docs/configuration.md @@ -0,0 +1,100 @@ +--- +sidebar_position: 2 +--- + +# Configuration + +Default behavior can be changed as needed. +Create `export-images.config.js` in the root. + +```js +/** + * @type {import('next-export-optimize-images').Config} + */ +const config = { + // your configuration values. +} + +module.exports = config +``` + +## Optional fields + +### `outDir` + +- Type: string +- Default: 'out' + +Specify if you are customizing the default output directory, such as `next export -o outDir`. + +### `imageDir` + +- Type: string +- Default: '\_next/static/chunks/images' + +You can customize the directory to output optimized images. +The default is `'_next/static/chunks/images'`. + +e.g. If `'_optimized'` is set. + +```diff +- out/_next/static/chunks/images/filename.png ++ out/_optimized/filename.png +``` + +### `basePath` + +- Type: string +- Default: '' + +Required if you have set `basePath` in `next.config.js`. +Please set the same value. + +### `filenameGenerator` + +- Type: function +- Argument: Object +- Return value: string + +| Key | Type | Description | e.g. '/images/sample.png' | e.g. require('./sample.png') | +| --------- | ------ | --------------------------------------------------------------------- | ------------------------- | ---------------------------- | +| path | string | The path portion. | /images | /\_next/static/media | +| name | string | The file name part. | sample | sample.{hash} | +| width | number | That image is the resized width. | 1920 | 1920 | +| quality | number | The `quality` specified in the `next/image` component. Default is 75. | 75 | 75 | +| extension | string | The extension of that image. | png | png | + +You can customize the generation of file names. + +e.g. '/images/sample.png' + +```js +const config = { + filenameGenerator: ({ path, name, width, quality, extension }) => + `${path.replace(/^\//, '').replace(/\//g, '-')}-${name}.${width}.${quality}.${extension}`, +} +``` + +```diff +- '/images/sample_1920_75.png' ++ 'images-sample.1920.75.png' +``` + +#### ❗️Attention + +When making this setting, make sure that the file names (including the path part) of different images do not cover each other. +Specifically, include the name, width, quality, and extension in the return value. If path is not included, all src's should be specified with `import` or `require` so that they can be distinguished by their hash value even if they have the same filename. + +### `sharpOptions` + +- Type: Object + +| Key | Description | +| ---- | ----------------------------------------------- | +| png | https://sharp.pixelplumbing.com/api-output#png | +| jpg | https://sharp.pixelplumbing.com/api-output#jpeg | +| webp | https://sharp.pixelplumbing.com/api-output#webp | +| avif | https://sharp.pixelplumbing.com/api-output#avif | + +You can set optimization options for each extension. +Please refer to the official sharp documentation for more information.