next image export optimizer
v1.18.0
استخدم Next.js Advanced <Image/> مكون مع وظيفة التصدير الثابتة. يحسن جميع الصور الثابتة في خطوة إضافية بعد التصدير الثابت next.js.
للصور التي تستخدم سلسلة المسار: (على سبيل المثال src = "/profile.png")
ضع الصور في مجلد داخل المجلد العام مثل Public/Images
للصور التي تستخدم استيراد ثابت: (على سبيل المثال 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 . يمكنك أيضًا استخدام next.config.ts لمشاريع TypeScript:
// 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 /> بمكون <portedImage /> :
مثال:
// 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 }
/> ; بالنسبة للصور عن بُعد ، يجب عليك تحديد SRC كسلسلة تبدأ إما HTTP أو HTTPS في مكون التصدير.
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage src = "https://example.com/remote-image.jpg" alt = "Remote Image" /> ; من أجل تحسين الصورة في وقت الإنشاء للعمل بشكل صحيح ، يجب عليك تحديد جميع عناوين URL الخاصة بالصور عن بُعد في ملف يسمى RemoteOptimizedImages.js في الدليل الجذر لمشروعك (حيث يتم تخزين next.config.js أيضًا). يجب على الملف تصدير مجموعة من الأوتار التي تحتوي على عناوين 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 الخاصة بـ Image بعنوان URL المحسّن في مكون الصورة المصدر.
يمكنك تحديد وقت العيش من ذاكرة التخزين المؤقت في ثوانٍ من خلال تعيين متغير بيئة nextImageExportOptimizer_remoteImageCacheTTL في ملف next.config.js . القيمة الافتراضية هي 0 ثانية (كما قد تغيرت الصورة).
اضبطها على:
إذا كنت ترغب في إخفاء عناوين URL الخاصة بالصور عن بُعد من المستخدم ، فيمكنك استخدام ProgridesRC Prop لمكون التصدير. سيحل هذا محل سمة SRC لعلامة الصورة بقيمة ProgridesRC Prop.
احذر من أن مكون الصورة لا يمكن أن يعود إلى عنوان URL الأصلي للصورة إذا لم يتم إنشاء الصور المحسنة بعد عند استخدام ProgridesRC Prop. سيؤدي هذا إلى رابط صورة مكسور.
يمكنك تخصيص اسم الملف للصور المحسنة عن بُعد عن طريق إضافة ما يلي إلى التالي. next.config.js :
module . exports = {
env : {
// ... other env variables
nextImageExportOptimizer_remoteImagesFilename : "remoteOptimizedImages.cjs" ,
} ,
// ... other config options
} ; إذا لم يكن مشروع next.js الخاص بك في دليل الجذر الذي تقوم فيه بتشغيل الأوامر ، على سبيل المثال عندما تستخدم monorepo ، يمكنك تحديد موقع the 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 على دعامة BasePath التي يمكنك استخدامها لتمرير BasePath إلى المكون.
import ExportedImage from "next-image-export-optimizer" ;
import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" ;
< ExportedImage
src = { testPictureStatic }
alt = "Static Image"
basePath = "/subfolder"
/> ; إذا كنت لا ترغب في الجيل التلقائي من صور العناصر النائمة الصغيرة والحيوية ، فقم بتعيين false بيئة nextImageExportOptimizer_generateAndUseBlurImages وضبط الدعامة placeholder من مكون <ExportEdImage /> empty .
إذا كنت ترغب في إعادة تسمية اسم مجلد التصدير ، فقم بتعيين متغير البيئة nextImageExportOptimizer_exportFolderPath إلى اسم المجلد المطلوب. الافتراضي هو nextImageExportOptimizer .
بشكل افتراضي ، يتم تخزين الصور بتنسيق الويب.
إذا كنت لا ترغب في استخدام تنسيق WebP ، فقم بتعيين متغير البيئة nextImageExportOptimizer_storePicturesInWEBP إلى false .
مكون <PortedImage /> هو غلاف حول مكون <image /> من Next.js. يستخدم ميزة Loader المخصصة لإنشاء SRCSET لدقة مختلفة من الصورة الأصلية. يمكن للمتصفح بعد ذلك تحميل الحجم الصحيح بناءً على حجم منفذ العرض الحالي.
تم تحسين عملية تحويل الصور لأنها تستخدم تجزئة لتحديد ما إذا كانت الصورة قد تم بالفعل تحسينها أم لا. وبهذه الطريقة ، يتم تحسين الصور فقط مرة واحدة وليس في كل مرة يتم فيها تشغيل أمر الإنشاء.
يعود مكون <PortedImage /> إلى الصورة الأصلية إذا لم يتم إنشاء الصور المحسنة بعد في وضع التطوير. في تطبيق React و 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" /> ;الصور المتحركة: يمكنك استخدام. سيقوم Exptor-Exptimizer التالي بتحسين الصور المتحركة تلقائيًا وإنشاء SRCSEST للقرارات المختلفة.
إذا قمت بتعيين المتغير 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 .
