Otimizar o carregamento de imagens no Next.js

Por padrão, a otimização de imagens do Next.js integrada 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 do Firebase de processamento de imagens para ativar a otimização e a entrega sob demanda de imagens no app Next.js em App Hosting.

Pré-requisitos

• Você tem um projeto do Firebase e um back-end App Hosting.
• O Cloud Storage está ativado no seu projeto.
• O Cloud Functions for Firebase está ativado 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 imagens locais (opcional)

Se o aplicativo usa imagens locais que você quer otimizar com essa extensão, configure 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 "Nome do host".

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

Quando a instalação for concluída, a API Image Processing será implantada como uma função em Cloud Functions. Navegue até o painel Functions no console Firebase e copie o URL de acionamento 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 na mesma CDN global que 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 sua ramificação ativa. Aguarde a conclusão do lançamento do App Hosting.