Amplifique o suporte para Next.js

O Amplify oferece suporte à implantação e hospedagem de aplicativos web renderizados (SSR) do lado do servidor criados usando Next.js. Next.js é uma estrutura React para desenvolvimento SPAs com JavaScript. Você pode implantar aplicativos criados com o Next.js 14 com recursos como otimização de imagem e middleware.

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

A pré-renderização pode melhorar o desempenho e a otimização de mecanismos de pesquisa. Como o Next.js pré-renderiza todas as páginas no servidor, o HTML conteúdo 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 na SEO classificação do site. A pré-renderização também melhora SEO ao permitir que os robôs dos mecanismos de pesquisa encontrem e rastreiem o conteúdo de um site com facilidade. HTML

O Next.js fornece suporte analítico 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 do Next.js.

Suporte ao atributo Next.js

A computação do Amplify Hosting gerencia totalmente a renderização do lado do servidor (SSR) para aplicativos criados com Next.js 12, 13 e 14. 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 é compatível com 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 gerenciado de computação SSR Amplify Hosting.

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

Atributos compatíveis

• Páginas renderizadas do lado do servidor () SSR

• Páginas estáticas

• APIrotas

• 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

• Diretório de aplicativos Next.js 13

Atributos não compatíveis

• Edge API Routes (o middleware Edge não é suportado)

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

• Transmissão de Next.js

• Executando middleware em ativos estáticos e imagens otimizadas

Imagens do Next.js

O tamanho máximo de saída de uma imagem não pode exceder 4,3 MB. Você pode ter um arquivo de imagem maior armazenado em algum lugar e usar o componente de imagem Next.js para redimensioná-lo e otimizá-lo em um AVIF formato Webp ou, em seguida, exibi-lo como um tamanho menor.

Observe que a documentação do Next.js recomenda que você instale o módulo Sharp de processamento de imagem para habilitar o funcionamento correto da otimização de imagem em produção. Porém, isso não é necessário para implantações do Amplify. O Amplify implanta automaticamente o Sharp para você.