به‌طور پیش‌فرض، بهینه‌سازی تصویر داخلی Next.js در App Hosting غیرفعال است، مگر اینکه صراحتاً images.unoptimized را روی false تنظیم کنید یا از یک Image Loader سفارشی استفاده کنید.
می‌توانید یک بارکننده تصویر سراسری Next.js را با برنامه افزودنی Firebase پردازش تصویر پیکربندی کنید تا بهینه‌سازی و تحویل تصاویر را در برنامه Next.js در App Hosting فعال کنید.
پیش نیازها
- شما یک پروژه Firebase و یک App Hosting Backend دارید.
- Cloud Storage در پروژه شما فعال است.
- Cloud Functions for Firebase در پروژه شما فعال است.
افزونه را نصب کنید
به افزونه پردازش تصویر در مرکز برنامه افزودنی Firebase بروید و Install in Firebase Console را انتخاب کنید. دستورالعمل های روی صفحه را دنبال کنید.
پیکربندی بهینه سازی تصویر محلی (اختیاری)
اگر برنامه شما از تصاویر محلی استفاده می کند که می خواهید با استفاده از این افزونه بهینه سازی کنید، باید پارامتر "Hostname" را در طول فرآیند نصب برنامه افزودنی پیکربندی کنید.
در طول پیکربندی برنامه افزودنی: هنگامی که به مرحله "پیکربندی افزونه" رسیدید، پارامتر "نام میزبان" را پیدا کنید.
نام میزبان را تنظیم کنید: دامنه پیش‌فرض را برای باطن App Hosting Firebase خود وارد کنید. این دامنه معمولاً به
.hosted.appختم می شود.
پس از اتمام نصب، Image Processing API باید به عنوان یک تابع در Cloud Functions مستقر شود. به داشبورد توابع در کنسول Firebase بروید و URL راه‌اندازی API پردازش تصویر را کپی کنید.
یک بارگذار تصویر سفارشی تنظیم کنید
یک بارگیری تصویر ایجاد کنید که از API پردازش تصویر مستقر شده برای هر جزء تصویر بهینه شده استفاده کند. به عنوان یک بهینه سازی، روی آن بازنویسی کنید تا تحت همان دامنه App Hosting Firebase ارائه شود و در پشت همان CDN جهانی برنامه Next.js شما ذخیره شود.
ابتدا فیلدهای زیر را به فایل next.config.js خود اضافه کنید:
// @ts-check
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
loader: "custom",
loaderFile: "./loader.js",
},
async rewrites() {
return [
{
source: "/_fah/image/:path*",
destination:
"<CLOUD_FUNCTIONS_URL>/:path*",
},
];
},
}
module.exports = nextConfig;
سپس یک فایل loader.js در دایرکتوری ریشه خود با محتوای زیر ایجاد کنید:
"use client"
export default function myImageLoader({ src, width, quality }) {
if (process.env.NODE_ENV === "development") {
return src;
}
const operations = [
{
operation: "input",
type: "url",
url: src,
},
{ operation: "resize", width: width },
{ operation: "output", format: "webp", quality: quality || 75 },
];
const encodedOperations = encodeURIComponent(JSON.stringify(operations));
return `/_fah/image/process?operations=${encodedOperations}`;
}
یک commit ایجاد کنید که شامل این تغییرات باشد و آن را به شاخه زنده خود فشار دهید. سپس منتظر بمانید تا عرضه App Hosting تکمیل شود.