Оптимизируйте загрузку изображений в Next.js

По умолчанию встроенная оптимизация изображений Next.js отключена на App Hosting , если вы явно не установите параметр images.unoptimized в значение false или не используете собственный загрузчик изображений.

Вы можете настроить глобальный загрузчик изображений 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 .

После завершения установки API обработки изображений следует развернуть в качестве функции в Cloud Functions . Перейдите на панель управления Functions в консоли Firebase и скопируйте URL-адрес триггера API обработки изображений.

Настройте собственный загрузчик изображений.

Создайте загрузчик изображений , который использует развернутый 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 .