next image export optimizer
v1.18.0
next.js Advanced <image/>静的エクスポート機能を使用して使用します。 Next.jsの静的エクスポートの後、すべての静的画像を追加のステップで最適化します。
パス文字列を使用した画像の場合：（例：src = "/profile.png"）
パブリック/画像のようなパブリックフォルダー内のフォルダーに画像を配置します
静的インポートを使用した画像の場合：（例：src = {profileimage}）
プロジェクトのどこにでも画像を配置できます。画像は最適化され、エクスポートフォルダーにコピーされます。
リモート画像の場合：（例：src = "https://example.com/image.jpg"）
リモート画像のセクションを参照してください。
npm install next-image-export-optimizer
# Or
yarn add next-image-export-optimizer
pnpm install next-image-export-optimizer
次をnext.config.jsに追加します。 TypeScriptプロジェクトにnext.config.ts使用することもできます。
// next.config.js
module . exports = {
output : "export" ,
images : {
loader : "custom" ,
imageSizes : [ 16 , 32 , 48 , 64 , 96 , 128 , 256 , 384 ] ,
deviceSizes : [ 640 , 750 , 828 , 1080 , 1200 , 1920 , 2048 , 3840 ] ,
} ,
transpilePackages : [ "next-image-export-optimizer" ] ,
env : {
nextImageExportOptimizer_imageFolderPath : "public/images" ,
nextImageExportOptimizer_exportFolderPath : "out" ,
nextImageExportOptimizer_quality : "75" ,
nextImageExportOptimizer_storePicturesInWEBP : "true" ,
nextImageExportOptimizer_exportFolderName : "nextImageExportOptimizer" ,
nextImageExportOptimizer_generateAndUseBlurImages : "true" ,
nextImageExportOptimizer_remoteImageCacheTTL : "0" ,
} ,
} ; package.jsonでビルドコマンドを更新します
{
- "build": "next build",
+ "build": "next build && next-image-export-optimizer"
}<image />コンポーネントを<exportedimage />コンポーネントに置き換えます。
例：
// Old
import Image from "next/image" ;
< Image
src = "images/VERY_LARGE_IMAGE.jpg"
alt = "Large Image"
width = { 500 }
height = { 500 }
/> ;
// Replace with either of the following:
// With static import (Recommended)
import ExportedImage from "next-image-export-optimizer" ;
import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" ;
< ExportedImage src = { testPictureStatic } alt = "Static Image" /> ;
// With dynamic import
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage
src = "images/VERY_LARGE_IMAGE.jpg"
alt = "Large Image"
width = { 500 }
height = { 500 }
/> ; リモート画像の場合、exportedImageコンポーネントのHTTPまたはHTTPSから始まる文字列としてSRCを指定する必要があります。
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage src = "https://example.com/remote-image.jpg" alt = "Remote Image" /> ;ビルド時に画像の最適化を正しく動作させるには、プロジェクトのルートディレクトリ（ next.config.jsも保存されている場合）に、 remoteoptimizedimages.jsというファイルにすべてのリモート画像URLを指定する必要があります。ファイルは、リモート画像のURLを含む文字列の配列をエクスポートする必要があります。このような配列の約束を返すこともサポートされています。
例：
// remoteOptimizedImages.js
module . exports = [
"https://example.com/image1.jpg" ,
"https://example.com/image2.jpg" ,
"https://example.com/image3.jpg" ,
// ...
] ; // Or with a promise
module . exports = new Promise ( ( resolve ) =>
resolve ( [
"https://example.com/image1.jpg" ,
"https://example.com/image2.jpg" ,
"https://example.com/image3.jpg" ,
// ...
] )
) ;
// Or with an async API call
module . exports = fetch ( "https://example.com/api/images" ) . catch ( ( error ) => {
console . error ( error ) ;
return [ ] ; // return an empty array in case of error
} ) ;ビルド時に、画像はダウンロードされるか、キャッシュから読み取られます。画像URLは、エクスポートされた画像コンポーネントの最適化された画像URLに置き換えられます。
nextImageExportOptimizer_remoteImageCacheTTL環境変数をnext.config.jsファイルに設定することにより、数秒でキャッシュの時間を指定できます。デフォルト値は0秒です（画像が変更された可能性があるため）。
次のように設定してください。
ユーザーからリモート画像URLを非表示にする場合は、ExportedImageコンポーネントのOverRidesRC Propを使用できます。これにより、画像タグのSRC属性がOverridesRC Propの値に置き換えられます。
OverridesRC Propを使用しているときに最適化された画像がまだ生成されていない場合、画像コンポーネントが元の画像URLに戻ることができないことに注意してください。これにより、画像が壊れます。
次のものをnext.config.jsに追加することにより、リモート最適化された画像のファイル名をカスタマイズできます。
module . exports = {
env : {
// ... other env variables
nextImageExportOptimizer_remoteImagesFilename : "remoteOptimizedImages.cjs" ,
} ,
// ... other config options
} ;next.jsプロジェクトがコマンドを実行しているルートディレクトリにない場合、たとえばモノレポを使用している場合、スクリプトの引数としてnext.config.jsの場所を指定できます。
"export" : " next build && next-image-export-optimizer --nextConfigPath path/to/my/next.config.js "環境変数を介して出力フォルダーパスを指定します。
// next.config.js
{ "env" : {
"nextImageExportOptimizer_exportFolderPath" : "path/to/my/export/folder"
} }または、引数をスクリプトに渡すことによって：
"export" : " next build && next-image-export-optimizer --exportFolderPath path/to/my/export/folder "アプリをドメインのサブフォルダーに展開する場合は、basepathをnext.config.jsファイルに設定できます。
module . exports = {
basePath : "/subfolder" ,
} ;ExportedImageコンポーネントには、ベースパスをコンポーネントに渡すために使用できるベースパスプロップがあります。
import ExportedImage from "next-image-export-optimizer" ;
import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" ;
< ExportedImage
src = { testPictureStatic }
alt = "Static Image"
basePath = "/subfolder"
/> ;小さなぼやけたプレースホルダー画像の自動生成が必要ない場合は、 nextImageExportOptimizer_generateAndUseBlurImages環境変数をfalseに設定し、 placeholderプロップを<exportedimage />コンポーネントからemptyに設定します。
エクスポートフォルダー名の名前の名前を変更する場合は、 nextImageExportOptimizer_exportFolderPath環境変数を目的のフォルダー名に設定します。デフォルトはnextImageExportOptimizerです。
デフォルトでは、画像はWebP形式に保存されます。
WebP形式を使用したくない場合は、 nextImageExportOptimizer_storePicturesInWEBP環境変数をfalseに設定します。
<exportedimage />コンポーネントは、next.jsの<画像 />コンポーネントの周りのラッパーです。カスタムローダー機能を使用して、元の画像のさまざまな解像度のSRCSETを生成します。ブラウザは、現在のビューポートサイズに基づいて正しいサイズをロードできます。
画像変換操作は、ハッシュを使用して画像がすでに最適化されているかどうかを判断するため、最適化されています。このようにして、画像は1回のみ最適化され、ビルドコマンドが実行されるたびに最適化されます。
<exportedimage />コンポーネントは、開発モードで最適化された画像がまだ生成されていない場合、元の画像に戻ります。エクスポートされたStatic Reactアプリでは、レスポンシブ画像がSRCSETとして利用可能であり、ブラウザによって動的にロードされます。
静的インポート方法は、元の画像サイズについてクライアントに通知するため、推奨されます。元の画像幅よりも大きい幅が要求されると、デバイスの次の最大の画像サイズが配列（ next.config.jsで指定）がSRCSET属性の生成に使用されます。画像をパス文字列として指定すると、このライブラリは、デバイス内の各画像サイズの元の画像の複製を作成し、元の画像サイズよりも大きい配列を作成します。
unoptimizedプロップを使用して、元の最適化されていない画像を出力できます。例：
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage
src = { testPictureStatic }
alt = "Original, unoptimized image"
unoptimized = { true }
/> ;レガシーイメージコンポーネントのnext/legacy/image使用できます。
import ExportedImage from "next-image-export-optimizer/legacy/ExportedImage" ;
import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" ;
< ExportedImage src = { testPictureStatic } alt = "Static Image" layout = "fixed" /> ;アニメーション画像：.gifおよびアニメーション.webp画像を使用できます。 Next-Image-Export-Optimizerは、アニメーション画像を自動的に最適化し、さまざまな解像度のSRCSETを生成します。
変数NextImageExportoptimizer_StorePictureSinWebpをTrueに設定すると、アニメーション画像が.Webp形式に変換され、ファイルサイズを大幅に削減できます。アニメーション化されたPNG画像は、このパッケージによってサポートされていないことに注意してください。
Reactapp.dev/next-image-export-optimizerでこのライブラリの使用の実証模様を見ることができます
警告バージョン1.0.0は壊れた変更です。次の13.0.0で導入された変更に続き、
next/imageコンポーネントをnext/future/imageに置き換えます。次の12以下を使用している場合は、バージョン0.17.1を使用してください。
