Suporte para Amplify Next.js 11 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á.

Suporte para Amplify Next.js 11 SSR

Se você implantou um aplicativo Next.js no Amplify antes do lançamento do Amplify Hosting compute em 17 de novembro de 2022, seu aplicativo está usando o provedor SSR anterior do Amplify, Classic (somente Next.js 11). A documentação desta seção se aplica somente aos aplicativos implantados usando o provedor SSR Classic (somente Next.js 11).

nota

É altamente recomendável que você migre seus aplicativos Next.js 11 para o provedor SSR gerenciado por computação da Amplify Hosting. Para obter mais informações, consulte Migrando um aplicativo SSR Next.js 11 para a computação do Amplify Hosting.

A lista a seguir descreve os recursos específicos que o provedor de SSR Amplify Classic (somente Next.js 11) suporta.

Recursos suportados
  • 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)

  • Variáveis de ambiente

Recursos do não compatíveis
  • Otimização de imagem

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

  • Roteamento de domínio internacionalizado (i18n)

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

  • Middleware

  • Rotas de API

Preços dos aplicativos SSR do Next.js 11

Ao implantar seu aplicativo SSR Next.js 11, o Amplify cria recursos adicionais de back-end em suaAWS conta, incluindo:

  • Um bucket do Amazon Simple Storage Service (Amazon S3) que armazena os recursos dos ativos estáticos do seu aplicativo. Para obter mais informações sobre as cobranças do Amazon S3, consulte Definição de preços do Amazon S3.

  • Uma CloudFront distribuição da Amazon para servir o aplicativo. Para obter informações sobre CloudFront cobranças, consulte Amazon CloudFront Pricing.

  • Quatro funções do Lambda @Edge para personalizar o conteúdo CloudFront fornecido.

AWS Identity and Access Managementpermissões para aplicativos SSR do Next.js 11

O Amplify requer permissõesAWS Identity and Access Management (IAM) para implantar um aplicativo SSR. Sem as permissões mínimas necessárias, você receberá um erro ao tentar implantar seu aplicativo SSR. Para fornecer ao Amplify as permissões necessárias, você deve especificar uma função de serviço.

Para criar uma função de serviço do IAM que o Amplify assume ao chamar outros serviços em seu nome, consulteAdicionar uma função de serviço. Essas instruções demonstram como criar uma função que vincule a políticaAdministratorAccess-Amplify gerenciada.

A políticaAdministratorAccess-Amplify gerenciada fornece acesso a váriosAWS serviços, incluindo ações do IAM, e deve ser considerada tão poderosa quanto aAdministratorAccess política. Essa política fornece mais permissões do que o necessário para implantar seu aplicativo SSR.

É recomendável seguir a prática recomendada de concessão de privilégio mínimo e redução das permissões concedidas à função de serviço. Em vez de conceder permissões de acesso de administrador à sua função de serviço, você pode criar sua própria política de IAM gerenciada pelo cliente que concede somente as permissões necessárias para implantar seu aplicativo SSR. Consulte Criação de políticas do IAM no Guia do usuário do IAM para obter instruções sobre como criar uma política gerenciada pelo cliente.

Se você criar sua própria política, consulte a lista a seguir das permissões mínimas necessárias para implantar um aplicativo SSR.

acm:DescribeCertificate acm:ListCertificates acm:RequestCertificate cloudfront:CreateCloudFrontOriginAccessIdentity cloudfront:CreateDistribution cloudfront:CreateInvalidation cloudfront:GetDistribution cloudfront:GetDistributionConfig cloudfront:ListCloudFrontOriginAccessIdentities cloudfront:ListDistributions cloudfront:ListDistributionsByLambdaFunction cloudfront:ListDistributionsByWebACLId cloudfront:ListFieldLevelEncryptionConfigs cloudfront:ListFieldLevelEncryptionProfiles cloudfront:ListInvalidations cloudfront:ListPublicKeys cloudfront:ListStreamingDistributions cloudfront:UpdateDistribution cloudfront:TagResource cloudfront:UntagResource cloudfront:ListTagsForResource cloudfront:DeleteDistribution iam:AttachRolePolicy iam:CreateRole iam:CreateServiceLinkedRole iam:GetRole iam:PutRolePolicy iam:PassRole iam:UpdateAssumeRolePolicy iam:DeleteRolePolicy lambda:CreateFunction lambda:EnableReplication lambda:DeleteFunction lambda:GetFunction lambda:GetFunctionConfiguration lambda:PublishVersion lambda:UpdateFunctionCode lambda:UpdateFunctionConfiguration lambda:ListTags lambda:TagResource lambda:UntagResource lambda:ListEventSourceMappings lambda:CreateEventSourceMapping route53:ChangeResourceRecordSets route53:ListHostedZonesByName route53:ListResourceRecordSets s3:CreateBucket s3:GetAccelerateConfiguration s3:GetObject s3:ListBucket s3:PutAccelerateConfiguration s3:PutBucketPolicy s3:PutObject s3:PutBucketTagging s3:GetBucketTagging sqs:CreateQueue sqs:DeleteQueue sqs:GetQueueAttributes sqs:SetQueueAttributes amplify:GetApp amplify:GetBranch amplify:UpdateApp amplify:UpdateBranch

Solução de problemas de implantações de SSR do Next.js 11

Se você tiver problemas inesperados ao implantar um aplicativo SSR clássico (somente Next.js 11) com o Amplify, consulte os seguintes tópicos de solução de problemas.

Seu diretório de saída foi substituído

O diretório de saída de um aplicativo Next.js implantado com o Amplify deve ser definido como.next. Se o diretório de saída do seu aplicativo estiver sendo substituído, verifique onext.config.js arquivo. Para ter o diretório de saída de compilação como padrão.next, remova a seguinte linha do arquivo:

distDir: 'build'

Verifique se o diretório de saída está definido como.next nas configurações de compilação. Para obter informações sobre como visualizar as configurações de compilação do seu aplicativo, consulteDefinindo as configurações de compilação.

A seguir está um exemplo das configurações de compilação de um aplicativo em quebaseDirectory está definido como.next.

version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: .next files: - '**/*' cache: paths: - node_modules/**/*

Você recebe um erro 404 após implantar seu site SSR

Se você receber um erro 404 após implantar seu site, o problema pode ser causado pela substituição do diretório de saída. Para verificar seunext.config.js arquivo e verificar o diretório de saída de compilação correto na especificação de compilação do seu aplicativo, siga as etapas do tópico anterior,Seu diretório de saída foi substituído.

Seu aplicativo não tem a regra de reescrita para distribuições de CloudFront SSR

Quando você implanta um aplicativo SSR, o Amplify cria uma regra de reescrita para suas distribuições de CloudFront SSR. Se você não conseguir acessar seu aplicativo em um navegador da Web, verifique se a regra de CloudFront reescrita existe em suaAWS conta. Se estiver faltando, você pode adicioná-lo manualmente ou reimplantar seu aplicativo.

Para visualizar ou editar as regras de reescrita e redirecionamento de um aplicativo no console do Amplify, no painel de navegação, escolha Configurações do aplicativo e, em seguida, Reescreve e redireciona. A captura de tela a seguir mostra um exemplo das regras de reescrita que o Amplify cria para você quando você implanta um aplicativo SSR.


              O painel de regravações e redirecionamentos no console do Amplify.

Seu aplicativo é muito grande para ser implantado

O Amplify limita o tamanho de uma implantação de SSR a 50 MB. Se você tentar implantar um aplicativo SSR Next.js no Amplify e receber umRequestEntityTooLargeException erro, seu aplicativo é muito grande para ser implantado. Você pode tentar contornar esse problema adicionando código de limpeza de cache ao seunext.config.js arquivo.

Veja a seguir um exemplo de código nonext.config.js arquivo que executa a limpeza do cache.

module.exports = { webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => { config.optimization.splitChunks.cacheGroups = { } config.optimization.minimize = true; return config }, }

Sua compilação falha com um erro de falta de memória

O Next.js permite que você armazene artefatos de construção em cache para melhorar o desempenho nas compilações subsequentes. Além disso, oAWS CodeBuild contêiner do Amplify comprime e carrega esse cache para o Amazon S3, em seu nome, para melhorar o desempenho de compilação subsequente. Isso pode fazer com que sua compilação falhe com um erro de falta de memória.

Execute as ações a seguir para evitar que seu aplicativo exceda o limite de memória durante a fase de criação. Primeiro, remova.next/cache/**/* da seção cache.paths das configurações de compilação. Em seguida, remova a variável deNODE_OPTIONS ambiente do seu arquivo de configurações de compilação. Em vez disso, defina a variável deNODE_OPTIONS ambiente no console do Amplify para definir o limite máximo de memória do Node. Para obter mais informações sobre como configurar variáveis de ambiente usando o console do Amplify, consulteDefinição de variáveis de ambiente.

Depois de fazer essas alterações, tente criar novamente. Se for bem-sucedido, adicione.next/cache/**/* novamente à seção cache.paths do seu arquivo de configurações de compilação.

Para obter mais informações sobre a configuração do cache do Next.js para melhorar o desempenho da compilação, consulte a AWS CodeBuild no site Next.js.

Seu aplicativo tem ramificações SSR e SSG

Você não pode implantar um aplicativo que tenha ramificações SSR e SSG. Se você precisar implantar ramificações SSR e SSG, deverá implantar um aplicativo que use somente ramificações SSR e outro aplicativo que use somente ramificações SSG.

Seu aplicativo armazena arquivos estáticos em uma pasta com um caminho reservado

O Next.js pode servir arquivos estáticos de uma pasta chamadapublic que está armazenada no diretório raiz do projeto. Quando você implanta e hospeda um aplicativo Next.js com o Amplify, seu projeto não pode incluir pastas com o caminhopublic/static. O Amplify reserva opublic/static caminho para uso ao distribuir o aplicativo. Se seu aplicativo incluir esse caminho, você deverá renomear astatic pasta antes de implantá-la com o Amplify.

Seu aplicativo atingiu um CloudFront limite

CloudFront as cotas de serviço limitam suaAWS conta a 25 distribuições com funções Lambda @Edge anexadas. Se você exceder essa cota, poderá excluir todas as CloudFront distribuições não utilizadas da sua conta ou solicitar um aumento da cota. Para obter mais informações, consulte Solicitar um aumento de cota no Guia do usuário do Service Quotas.

As variáveis de ambiente não são transferidas para as funções do Lambda

As variáveis de ambiente que você especifica no console do Amplify para um aplicativo SSR não são transferidas para asAWS Lambda funções do aplicativo. ConsulteTornando as variáveis de ambiente acessíveis aos tempos de execução do lado do servidor, para obter instruções detalhadas sobre como adicionar variáveis de ambiente que você pode referenciar a partir de suas funções do Lambda.

As funções do Lambda @Edge são criadas na região Leste dos EUA (Norte da Virgínia)

Quando você implanta um aplicativo Next.js, o Amplify cria funções do Lambda @Edge para personalizar o conteúdo CloudFront fornecido. As funções do Lambda @Edge são criadas na região Leste dos EUA (Norte da Virgínia), não na região em que o aplicativo está implantado. Essa é uma restrição do Lambda @Edge. Para obter mais informações sobre as funções do Lambda @Edge, consulte Restrições às funções de borda no Guia do CloudFront desenvolvedor da Amazon.

Seu aplicativo Next.js usa recursos não suportados

Os aplicativos implantados com o Amplify suportam as versões principais do Next.js até a versão 11. Para obter uma lista detalhada dos recursos do Next.js que são suportados e não suportados pelo Amplify, consultesupported features.

Quando você implanta um novo aplicativo Next.js, o Amplify usa a versão mais recente suportada do Next.js por padrão. Se você tiver um aplicativo Next.js existente que você implantou no Amplify com uma versão mais antiga do Next.js, você pode migrar o aplicativo para o provedor SSR de computação do Amplify Hosting. Para obter instruções, consulte Migrando um aplicativo SSR Next.js 11 para a computação do Amplify Hosting.

As imagens em seu aplicativo Next.js não estão carregando

Quando você adiciona imagens ao seu aplicativo Next.js usando onext/image componente, o tamanho da imagem não pode exceder 1 MB. Quando você implanta o aplicativo no Amplify, imagens maiores que 1 MB retornarão um erro 503. Isso é causado por um limite do Lambda @Edge que restringe o tamanho de uma resposta gerada por uma função do Lambda, incluindo cabeçalhos e corpo, a 1 MB.

O limite de 1 MB se aplica a outros artefatos em seu aplicativo, como arquivos PDF e documentos.

Regiões sem suporte

O Amplify não suporta a implantação do aplicativo SSR Classic (somente Next.js 11) em todas asAWS regiões em que o Amplify está disponível. O SSR clássico (somente Next.js 11) não é suportado nas seguintes regiões: Europa (Milão) eu-south-1, Oriente Médio (Bahrein) me-south-1 e Ásia-Pacífico (Hong Kong) ap-east-1.