تحسين تحميل الصور على Next.js

بشكلٍ تلقائي، تكون ميزة تحسين الصور في Next.js مفعّلة على App Hosting ما لم تضبط images.unoptimized على "خطأ" أو تستخدم Image Loader مخصّصًا.

يمكنك ضبط أداة تحميل صور شاملة في Next.js باستخدام إضافة Image Processing Firebase Extension لتفعيل تحسين الصور وتسليمها عند الطلب في تطبيق Next.js على App Hosting.

المتطلبات الأساسية

• لديك مشروع على Firebase وخادم خلفية App Hosting.
• تم تفعيل Cloud Storage في مشروعك.
• تم تفعيل Cloud Functions for Firebase في مشروعك.

تثبيت الإضافة

انتقِل إلى إضافة معالجة الصور في "مركز إضافات Firebase"، ثم انقر على تثبيت في وحدة تحكّم Firebase. اتّبِع التعليمات الظاهرة على الشاشة.

ضبط تحسين الصور المحلية (اختياري)

إذا كان تطبيقك يستخدم صورًا محلية تريد تحسينها باستخدام هذه الإضافة، عليك ضبط المَعلمة "اسم المضيف" أثناء عملية تثبيت الإضافة.

1. أثناء ضبط إعدادات الإضافة: عند الوصول إلى خطوة "ضبط إعدادات الإضافة"، ابحث عن المَعلمة "اسم المضيف".

2. ضبط اسم المضيف: أدخِل النطاق التلقائي لخادم Firebase الخلفي App Hosting ينتهي هذا النطاق عادةً بـ .hosted.app.

بعد اكتمال التثبيت، يجب نشر Image Processing API كدالة في Cloud Functions. انتقِل إلى لوحة بيانات Functions في وحدة تحكّم Firebase وانسخ عنوان URL لتفعيل Image Processing API.

إعداد أداة تحميل صور مخصّصة

أنشئ برنامج تحميل صور يستخدم Image Processing API الذي تم نشره لكل مكوّن صورة محسّن. كتحسين، يمكنك إعادة كتابة عنوان URL لكي يتم عرضه ضمن نطاق Firebase App Hosting نفسه وتخزينه مؤقتًا خلف شبكة توصيل المحتوى (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.