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