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

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

يمكنك ضبط أداة تحميل صور عامة في Next.js باستخدام إضافة Firebase لمعالجة الصور، وذلك لإتاحة تحسين الصور وعرضها عند الطلب في تطبيق 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. انتقِل إلى لوحة بيانات الدوال في وحدة تحكّم 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.