Otimizar o carregamento de imagens no Next.js

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

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

Pré-requisitos

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

Instalar a extensão

Navegue até a extensão de processamento de imagens na Central de extensões do Firebase e selecione Instalar no console do Firebase. Siga as instruções na tela.

Configurar a otimização de imagens locais (opcional)

Se o aplicativo usa imagens locais que você quer otimizar usando essa extensão, é necessário configurar o parâmetro "Nome do host" durante o processo de instalação da extensão.

  1. Durante a configuração da extensão:quando chegar à etapa "Configurar extensão", localize o parâmetro "Nome do host".

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

Quando a instalação for concluída, a API de processamento de imagens será implantada como uma função no Cloud Functions. Navegue até o Functions dashboard no Firebase console e copie o URL do gatilho da API de processamento de imagens.

Configurar um carregador de imagens personalizado

Crie um carregador de imagens que use a API de processamento de imagens implantada para cada componente de imagem otimizado. Como an optimization, reescreva para que ele seja veiculado no mesmo Firebase App Hosting domínio e armazenado em cache na mesma CDN global que o aplicativo Next.js.

Primeiro, adicione os seguintes campos ao seu next.config.js arquivo:

// @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 alterações e envie para a ramificação ativa. Em seguida, aguarde a conclusão da implantação do App Hosting.