به طور پیش‌فرض، بهینه‌سازی تصویر Next.js داخلی در App Hosting غیرفعال است، مگر اینکه صریحاً images.unoptimized روی false تنظیم کنید یا از یک Image Loader سفارشی استفاده کنید.
شما می‌توانید یک بارگذار تصویر سراسری Next.js را با افزونه‌ی پردازش تصویر Firebase پیکربندی کنید تا بهینه‌سازی و تحویل تصاویر در صورت تقاضا را در برنامه‌ی Next.js خود در App Hosting فعال کنید.
پیش‌نیازها
- شما یک پروژه Firebase و یک backend App Hosting دارید.
- Cloud Storage در پروژه شما فعال شده است.
- Cloud Functions for Firebase در پروژه شما فعال شده است.
افزونه را نصب کنید
به بخش افزونه‌های پردازش تصویر در مرکز افزونه‌های فایربیس بروید و گزینه نصب در کنسول فایربیس را انتخاب کنید. دستورالعمل‌های روی صفحه را دنبال کنید.
پیکربندی بهینه‌سازی تصویر محلی (اختیاری)
اگر برنامه شما از تصاویر محلی استفاده می‌کند که می‌خواهید با استفاده از این افزونه بهینه‌سازی شوند، باید پارامتر "نام میزبان" را در طول فرآیند نصب افزونه پیکربندی کنید.
در طول پیکربندی افزونه: وقتی به مرحله «پیکربندی افزونه» رسیدید، پارامتر «نام میزبان» را پیدا کنید.
نام میزبان را تنظیم کنید: دامنه پیش‌فرض برای backend App Hosting Firebase خود را وارد کنید. این دامنه معمولاً با
.hosted.appخاتمه می‌یابد.
پس از اتمام نصب، رابط برنامه‌نویسی کاربردی پردازش تصویر (Image Processing API) باید به عنوان یک تابع در Cloud Functions مستقر شود. به داشبورد Functions در کنسول Firebase بروید و URL مربوط به trigger 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}`;
}
یک کامیت ایجاد کنید که شامل این تغییرات باشد و آن را به شاخه اصلی خود ارسال کنید. سپس، منتظر بمانید تا راه‌اندازی App Hosting تکمیل شود.