Amplify o suporte para Next.js SSR - AWS AmplifyHospedagem

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Amplify o suporte para Next.js SSR

O Amplify suporta implantação e hospedagem de aplicativos web renderizados no lado do servidor (SSR) criados usando apenas o Next.js. Next.js é uma estrutura React para o desenvolvimento de SPAs com JavaScript. Você pode implantar aplicativos criados com o Next.js 13 com recursos como otimização de imagens e scripts, regeneração estática incremental (ISR) e middleware.

Os desenvolvedores podem usar o Next.js para combinar geração de site estático (SSG) e SSR em um único projeto. As páginas SSG são pré-renderizadas no momento da criação e as páginas SSR são pré-renderizadas no momento da solicitação.

A pré-renderização pode melhorar o desempenho e a otimização dos mecanismos de pesquisa. Como o Next.js pré-renderiza todas as páginas no servidor, o conteúdo HTML de cada página está pronto quando chega ao navegador do cliente. Esse conteúdo também pode ser carregado mais rápido. Tempos de carregamento mais rápidos melhoram a experiência do usuário final com um site e impactam positivamente a classificação de SEO do site. A pré-renderização também melhora o SEO ao permitir que os robôs dos mecanismos de pesquisa encontrem e rastreiem o conteúdo HTML de um site com facilidade.

O Next.js fornece suporte de análise integrado para medir várias métricas de desempenho, como Time to first byte (TTFB) e First contentful paint (FCP). Para obter mais informações sobre o Next.js, consulte Introdução no site Next.js.

Compatibilidade dos recursos do Next.js

A computação do Amplify Hosting gerencia totalmente a renderização do lado do servidor (SSR) para aplicativos criados com o Next.js 12 ou posterior. Se você implantou um aplicativo Next.js no Amplify antes do lançamento da computação do Amplify Hosting, seu aplicativo está usando o provedor SSR anterior do Amplify, Classic (somente Next.js 11). A computação do Amplify Hosting não oferece suporte a aplicativos criados usando o Next.js versão 11 ou anterior. É altamente recomendável que você migre seus aplicativos Next.js 11 para o provedor SSR gerenciado por computação da Amplify Hosting.

A lista a seguir descreve os recursos específicos que o provedor de SSR de computação da Amplify Hosting suporta.

Recursos compatíveis
  • Páginas renderizadas do lado do servidor (SSR)

  • Páginas estáticas

  • Rotas de API

  • Rotas dinâmicas

  • Detecção de todas as rotas

  • SSG (geração estática)

  • Regeneração estática incremental (ISR)

  • Roteamento de subcaminhos internacionalizado (i18n)

  • Roteamento de domínio internacionalizado (i18n)

  • Detecção automática de localidade internacionalizada (i18n)

  • Middleware

  • Variáveis de ambiente

  • Otimização de imagem.

Recursos do não compatíveis
  • Rotas de API

  • Regeneração estática incremental sob demanda (ISR)

  • Diretório de aplicativos Next.js 13 (beta)

Usando a otimização de imagem do Next.js

A documentação do Next.js recomenda que você instale o módulo de processamento de imagem Sharp para permitir que a otimização de imagens funcione corretamente na produção. No entanto, isso não é necessário para implantações do Amplify. O Amplify implanta automaticamente o Sharp para você.

O tamanho máximo de saída da imagem não pode exceder 6 MB. Você pode ter um arquivo de imagem maior armazenado em algum lugar e usar onext/image componente para redimensioná-lo e otimizá-lo em um formato Webp ou AVIF e, em seguida, servi-lo em um tamanho menor.