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

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

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

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

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

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

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

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

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

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

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

بعد اكتمال التثبيت، من المفترض أن يتم نشر Image Processing API كـ دالة في Cloud Functions. انتقِل إلى لوحة بيانات الوظائف dashboard في وحدة تحكّم Firebase وانسخ عنوان URL الذي يؤدي إلى تفعيل Image Processing API.

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

أنشِئ أداة تحميل صور تستخدم Image Processing API المنشورة لكل مكوّن صور محسّنة. لتحسين الأداء، أعِد كتابة أداة التحميل ليتم عرضها ضمن نطاق 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.