Otimizar o carregamento de imagens no Next.js

Por padrão, a otimização de imagens Next.js é desativada no App Hosting, a menos que você defina explicitamente images.unoptimized como falso ou use um carregador de imagens personalizado.

É possível configurar um carregador de imagens global do Next.js com a extensão do Firebase para processamento de imagens e ativar a otimização e o envio de imagens sob demanda no app Next.js em App Hosting.

Pré-requisitos

  • Você tem um projeto do Firebase e um back-end App Hosting.
  • Cloud Storage está ativada no seu projeto.
  • Cloud Functions for Firebase está ativada no seu projeto.

Instalar a extensão

Acesse a Extensão de processamento de imagens no Hub de extensões do Firebase e selecione Instalar no console do Firebase. Siga as instruções na tela.

Configurar a otimização de imagem local (opcional)

Se o aplicativo usar imagens locais que você quer otimizar usando essa extensão, será necessário configurar o parâmetro "Hostname" durante o processo de instalação da extensão.

  1. Durante a configuração da extensão:quando você chegar à etapa "Configurar extensão", localize o parâmetro "Hostname".

  2. Definir o nome do host:digite o domínio padrão do back-end do App Hosting do Firebase. Esse domínio geralmente termina com .hosted.app.

Quando a instalação for concluída, a API Image Processing vai ser implantada como uma função em Cloud Functions. Navegue até o painel de Funções no console Firebase e copie o URL do acionador da API Image Processing.

Configurar um carregador de imagens personalizado

Crie um carregador de imagens que use a API Image Processing implantada para cada componente de imagem otimizado. Como uma otimização, reescreva para que ele seja veiculado no mesmo domínio App Hosting do Firebase e armazenado em cache atrás da mesma CDN global do seu aplicativo Next.js.

Primeiro, adicione os seguintes campos ao arquivo 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;

Em seguida, crie um arquivo loader.js no diretório raiz com o seguinte conteúdo:

"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}`;
}

Crie uma confirmação que inclua essas mudanças e envie para a ramificação ativa. Em seguida, aguarde a conclusão do lançamento do App Hosting.