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

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

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

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

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

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

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

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

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

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

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

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

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

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