Оптимизируйте загрузку изображений в 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 Extensions Hub и выберите «Установить в консоли Firebase» . Следуйте инструкциям на экране.

Настройте локальную оптимизацию изображения (необязательно)

Если ваше приложение использует локальные изображения, которые вы хотите оптимизировать с помощью этого расширения, вам необходимо настроить параметр «Hostname» во время процесса установки расширения.

  1. Во время настройки расширения: Когда вы достигнете шага «Настройка расширения», найдите параметр «Имя хоста».

  2. Задайте имя хоста: введите домен по умолчанию для вашего бэкенда Firebase App Hosting . Обычно этот домен заканчивается на .hosted.app .

После завершения установки API обработки изображений будет развёрнут как функция в Cloud 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 .