تحسين تحميل الصور على 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. انتقِل إلى لوحة بيانات الدوال في وحدة تحكّم 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.