Prise en charge d'Amplify Next.js 11 - AWS Amplify Hébergement

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Prise en charge d'Amplify Next.js 11

Si vous avez déployé une application Next.js sur Amplify avant la sortie d'Amplify Hosting Compute le 17 novembre 2022, votre application utilise l'ancien fournisseur SSR d'Amplify, Classic (Next.js 11 uniquement). La documentation de cette section s'applique uniquement aux applications déployées à l'aide du fournisseur SSR Classic (Next.js 11 uniquement).

Note

Nous vous recommandons vivement de migrer vos applications Next.js 11 vers le fournisseur SSR géré par le calcul Amplify Hosting. Pour plus d’informations, consultez Migration d'une application Next.js 11 vers Amplify Hosting Compute.

La liste suivante décrit les fonctionnalités spécifiques prises en charge par le fournisseur SSR Amplify Classic (Next.js 11 uniquement).

Fonctionnalités prises en charge
  • Pages rendues côté serveur (SSR)

  • Pages statiques

  • Routes d'API

  • Routes dynamiques

  • Suivez tous les itinéraires

  • SSG (génération statique)

  • Régénération statique incrémentielle (ISR)

  • Routage de sous-chemins internationalisé (i18n)

  • Variables d’environnement

Fonctions non prises en charge
  • Optimisation de l'image

  • Régénération statique incrémentielle (ISR) à la demande

  • Routage de domaine internationalisé (i18n)

  • Détection automatique des paramètres régionaux internationalisée (i18n)

  • Intergiciel

  • Intergiciel Edge

  • Routes de l'API Edge

Tarification des applications Next.js 11

Lors du déploiement de votre application Next.js 11 SSR, Amplify crée des ressources backend supplémentaires dans AWS votre compte, notamment :

  • Un bucket Amazon Simple Storage Service (Amazon S3) qui stocke les ressources des actifs statiques de votre application. Pour plus d'informations sur les frais d'Amazon S3, consultez la section Tarification d'Amazon S3.

  • Une CloudFront distribution Amazon pour diffuser l'application. Pour plus d'informations sur CloudFront les frais, consultez Amazon CloudFront Pricing.

  • Quatre fonctions Lambda @Edge pour personnaliser le contenu diffusé. CloudFront

AWS Identity and Access Management autorisations pour les applications Next.js 11 SSR

Amplify nécessite des autorisations AWS Identity and Access Management (IAM) pour déployer une application SSR. Si vous ne disposez pas des autorisations minimales requises, vous recevrez un message d'erreur lorsque vous tenterez de déployer votre application SSR. Pour fournir à Amplify les autorisations requises, vous devez spécifier un rôle de service.

Pour créer un rôle de service IAM qu'Amplify assume lorsqu'il appelle d'autres services en votre nom, voir. Ajouter un rôle de service Ces instructions montrent comment créer un rôle qui associe la politique AdministratorAccess-Amplify gérée.

La politique AdministratorAccess-Amplify gérée donne accès à de multiples AWS services, y compris aux actions IAM, et doit être considérée comme aussi puissante que la AdministratorAccess politique. Cette politique fournit plus d'autorisations que ce qui est nécessaire pour déployer votre application SSR.

Il est recommandé de suivre la meilleure pratique consistant à accorder le moindre privilège et à réduire les autorisations accordées au rôle de service. Au lieu d'accorder des autorisations d'accès d'administrateur à votre rôle de service, vous pouvez créer votre propre politique IAM gérée par le client qui accorde uniquement les autorisations requises pour déployer votre application SSR. Reportez-vous à la section Création de politiques IAM dans le Guide de l'utilisateur IAM pour obtenir des instructions sur la création d'une politique gérée par le client.

Si vous créez votre propre politique, reportez-vous à la liste suivante des autorisations minimales requises pour déployer une application 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

Résolution des problèmes liés aux déploiements de Next.js 11

Si vous rencontrez des problèmes inattendus lors du déploiement d'une application SSR classique (Next.js 11 uniquement) avec Amplify, consultez les rubriques de résolution des problèmes suivantes.

Votre répertoire de sortie est remplacé

Le répertoire de sortie d'une application Next.js déployée avec Amplify doit être défini sur. .next Si le répertoire de sortie de votre application est remplacé, vérifiez le next.config.js fichier. Pour que le répertoire de sortie de build soit défini par défaut sur.next, supprimez la ligne suivante du fichier :

distDir: 'build'

Vérifiez que le répertoire de sortie est défini sur .next dans vos paramètres de compilation. Pour plus d'informations sur l'affichage des paramètres de compilation de votre application, consultezConfiguration des paramètres de compilation.

Voici un exemple des paramètres de génération d'une application où le paramètre baseDirectory est défini sur.next.

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

Vous obtenez une erreur 404 après le déploiement de votre site SSR

Si vous recevez une erreur 404 après le déploiement de votre site, le problème peut être dû au remplacement de votre répertoire de sortie. Pour vérifier votre next.config.js fichier et vérifier le répertoire de sortie de compilation correct dans les spécifications de compilation de votre application, suivez les étapes décrites dans la rubrique précédente,Votre répertoire de sortie est remplacé.

Votre application ne dispose pas de la règle de réécriture pour les distributions CloudFront SSR

Lorsque vous déployez une application SSR, Amplify crée une règle de réécriture pour CloudFront vos distributions SSR. Si vous ne pouvez pas accéder à votre application dans un navigateur Web, vérifiez que la règle de CloudFront réécriture existe pour votre application dans la console Amplify. S'il est absent, vous pouvez l'ajouter manuellement ou redéployer votre application.

Pour afficher ou modifier les règles de réécriture et de redirection d'une application dans la console Amplify, dans le volet de navigation, choisissez Paramètres de l'application, puis Réécritures et redirections. La capture d'écran suivante montre un exemple des règles de réécriture qu'Amplify crée pour vous lorsque vous déployez une application SSR. Notez que dans cet exemple, une règle CloudFront de réécriture existe.

La page Réécritures et redirections d'une application SSR.

Votre application est trop volumineuse pour être déployée

Amplify limite la taille d'un déploiement SSR à 50 Mo. Si vous essayez de déployer une application SSR Next.js sur Amplify et que vous obtenez RequestEntityTooLargeException une erreur, cela signifie que votre application est trop volumineuse pour être déployée. Vous pouvez essayer de contourner ce problème en ajoutant du code de nettoyage du cache à votre next.config.js fichier.

Voici un exemple de code contenu dans le next.config.js fichier qui effectue le nettoyage du cache.

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

Votre compilation échoue en raison d'une erreur de mémoire insuffisante

Next.js vous permet de mettre en cache des artefacts de build afin d'améliorer les performances lors des builds suivants. En outre, le AWS CodeBuild conteneur d'Amplify compresse et télécharge ce cache sur Amazon S3, en votre nom, afin d'améliorer les performances de compilation ultérieures. Cela pourrait entraîner l'échec de votre compilation en raison d'une erreur de mémoire insuffisante.

Effectuez les actions suivantes pour empêcher votre application de dépasser la limite de mémoire pendant la phase de création. Tout d'abord, .next/cache/**/* supprimez-le de la section cache.paths de vos paramètres de compilation. Supprimez ensuite la variable d'NODE_OPTIONSenvironnement de votre fichier de paramètres de compilation. Définissez plutôt la variable d'NODE_OPTIONSenvironnement dans la console Amplify pour définir la limite de mémoire maximale du nœud. Pour plus d'informations sur la définition des variables d'environnement à l'aide de la console Amplify, consultez. Définir les variables d'environnement

Après avoir apporté ces modifications, réessayez de créer. En cas de succès, ajoutez-le à .next/cache/**/* nouveau à la section cache.paths de votre fichier de paramètres de compilation.

Pour plus d'informations sur la configuration du cache Next.js afin d'améliorer les performances de compilation, consultez AWS CodeBuild sur le site Web Next.js.

Votre application possède à la fois des branches SSR et SSG

Vous ne pouvez pas déployer une application qui possède à la fois des branches SSR et SSG. Si vous devez déployer à la fois des branches SSR et SSG, vous devez déployer une application qui utilise uniquement des branches SSR et une autre qui utilise uniquement des branches SSG.

Votre application stocke les fichiers statiques dans un dossier avec un chemin réservé

Next.js peut servir des fichiers statiques à partir d'un dossier nommé public qui est stocké dans le répertoire racine du projet. Lorsque vous déployez et hébergez une application Next.js avec Amplify, votre projet ne peut pas inclure de dossiers avec le chemin. public/static Amplify réserve le public/static chemin à utiliser lors de la distribution de l'application. Si votre application inclut ce chemin, vous devez renommer le static dossier avant de le déployer avec Amplify.

Votre application a atteint une CloudFront limite

CloudFront les quotas de service limitent votre AWS compte à 25 distributions associées à des fonctions Lambda @Edge. Si vous dépassez ce quota, vous pouvez soit supprimer les CloudFront distributions non utilisées de votre compte, soit demander une augmentation du quota. Pour plus d’informations, consultez Demande d’augmentation de quota dans le Guide de l’utilisateur Service Quotas.

Les variables d'environnement ne sont pas transmises aux fonctions Lambda

Les variables d'environnement que vous spécifiez dans la console Amplify pour une application SSR ne sont pas répercutées sur les fonctions de l'application. AWS Lambda ConsultezRendre les variables d'environnement accessibles aux environnements d'exécution côté serveur, pour des instructions détaillées sur la façon d'ajouter des variables d'environnement auxquelles vous pouvez faire référence à partir de vos fonctions Lambda.

Les fonctions Lambda @Edge sont créées dans la région USA Est (Virginie du Nord)

Lorsque vous déployez une application Next.js, Amplify crée des fonctions Lambda @Edge pour personnaliser le contenu diffusé. CloudFront Les fonctions Lambda @Edge sont créées dans la région USA Est (Virginie du Nord), et non dans la région où votre application est déployée. Il s'agit d'une restriction Lambda @Edge. Pour plus d'informations sur les fonctions Lambda @Edge, consultez la section Restrictions relatives aux fonctions Edge dans le manuel Amazon CloudFront Developer Guide.

Votre application Next.js utilise des fonctionnalités non prises en charge

Les applications déployées avec Amplify prennent en charge les versions principales de Next.js jusqu'à la version 11. Pour une liste détaillée des fonctionnalités de Next.js prises en charge et non prises en charge par Amplify, voir. supported features

Lorsque vous déployez une nouvelle application Next.js, Amplify utilise par défaut la dernière version prise en charge de Next.js. Si vous avez une application Next.js existante que vous avez déployée sur Amplify avec une ancienne version de Next.js, vous pouvez migrer l'application vers le fournisseur de calcul SSR d'Amplify Hosting. Pour obtenir des instructions, veuillez consulter Migration d'une application Next.js 11 vers Amplify Hosting Compute.

Les images de votre application Next.js ne se chargent pas

Lorsque vous ajoutez des images à votre application Next.js à l'aide du next/image composant, la taille de l'image ne peut pas dépasser 1 Mo. Lorsque vous déployez l'application sur Amplify, les images de plus de 1 Mo renvoient une erreur 503. Cela est dû à une limite Lambda @Edge qui limite la taille d'une réponse générée par une fonction Lambda, y compris les en-têtes et le corps, à 1 Mo.

La limite de 1 Mo s'applique aux autres artefacts de votre application, tels que les fichiers PDF et les documents.

Régions non prises en charge

Amplify ne prend pas en charge le déploiement de l'application SSR classique (Next.js 11 uniquement) dans toutes les régions AWS où Amplify est disponible. Le SSR classique (Next.js 11 uniquement) n'est pas pris en charge dans les régions suivantes : Europe (Milan) eu-south-1, Moyen-Orient (Bahreïn) me-south-1 et Asie-Pacifique (Hong Kong) ap-east-1.