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. # Fonctionnalités prises en charge par le SSR Cette section fournit des informations sur le support d'Amplify pour les fonctionnalités SSR. Amplify fournit une prise en charge de la version de Node.js correspondant à la version de Node.js utilisée pour créer votre application. Amplify fournit une fonction d'optimisation d'image intégrée qui prend en charge toutes les applications SSR. Si vous ne souhaitez pas utiliser la fonctionnalité d'optimisation d'image par défaut, vous pouvez implémenter un chargeur d'optimisation d'image personnalisé. **Topics** + [Prise en charge de la version Node.js pour les applications Next.js](#node-version-support-ssr) + [Optimisation de l'image pour les applications SSR](#image-optimization) + [Amazon CloudWatch Logs pour les applications SSR](#ssr-CloudWatch-logs) + [Prise en charge du SSR Amplify Next.js 11](#ssr-nextjs11-support) ## Prise en charge de la version Node.js pour les applications Next.js Lorsqu'Amplify crée et déploie une application de calcul Next.js, elle utilise la version Node.js d'exécution qui correspond à la version principale de Node.js celle utilisée pour créer l'application. **Note** À compter du 15 septembre 2025, l'hébergement Amplify ne prendra plus en charge les environnements d'exécution Node.js 14, Node.js 16 et Node.js 18. Les environnements d'exécution pris en charge incluent Node.js 20 et Node.js 22. Vous pouvez spécifier la Node.js version à utiliser dans la fonction de **remplacement du package Live de** la console Amplify. Pour plus d'informations sur la configuration des mises à jour des packages en direct, consultez[Utilisation de versions de package et de dépendance spécifiques dans l'image de construction](custom-build-image.md#setup-live-updates). Vous pouvez également spécifier la Node.js version à l'aide d'autres mécanismes, tels que nvm des commandes. Si vous ne spécifiez pas de version, Amplify utilise par défaut la version actuelle utilisée par le conteneur de compilation Amplify. ## Optimisation de l'image pour les applications SSR Amplify Hosting fournit une fonctionnalité d'optimisation d'image intégrée qui prend en charge toutes les applications SSR. Grâce à l'optimisation d'image d'Amplify, vous pouvez fournir des images de haute qualité au format, aux dimensions et à la résolution adaptés à l'appareil qui y accède, tout en conservant la plus petite taille de fichier possible. Actuellement, vous pouvez soit utiliser le composant Image Next.js pour optimiser les images à la demande, soit implémenter un chargeur d'images personnalisé. Si vous utilisez Next.js 13 ou une version ultérieure, vous n'avez aucune autre action à effectuer pour utiliser la fonction d'optimisation d'image d'Amplify. Si vous implémentez un chargeur personnalisé, consultez la rubrique suivante sur *l'utilisation d'un chargeur d'images personnalisé*. ### Utilisation d'un chargeur d'images personnalisé Si vous utilisez un chargeur d'image personnalisé, Amplify détecte le chargeur dans le `next.config.js` fichier de votre application et n'utilise pas la fonction d'optimisation d'image intégrée. Pour plus d'informations sur les chargeurs personnalisés pris en charge par Next.js, consultez la documentation relative aux [images Next.js](https://nextjs.org/docs/pages/api-reference/next-config-js/images). ## Amazon CloudWatch Logs pour les applications SSR Amplify envoie des informations sur votre environnement d'exécution SSR à Amazon CloudWatch Logs dans votre. Compte AWS Lorsque vous déployez une application SSR, celle-ci nécessite un rôle de service IAM qu'Amplify assume lorsqu'il appelle d'autres services en votre nom. Vous pouvez soit autoriser le calcul d'Amplify Hosting à créer automatiquement un rôle de service pour vous, soit spécifier un rôle que vous avez créé. Si vous choisissez d'autoriser Amplify à créer un rôle IAM pour vous, le rôle aura déjà les autorisations nécessaires pour créer des journaux. CloudWatch Si vous créez votre propre rôle IAM, vous devrez ajouter les autorisations suivantes à votre politique pour permettre à Amplify d'accéder à Amazon CloudWatch Logs. ``` logs:CreateLogStream logs:CreateLogGroup logs:DescribeLogGroups logs:PutLogEvents ``` Pour de plus amples informations sur les rôles de service, veuillez consulter [Ajouter un rôle de service avec des autorisations pour déployer des ressources de backend](amplify-service-role.md). ## Prise en charge du SSR 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 de plus amples informations, veuillez consulter [Migration d'une application Next.js 11 SSR vers Amplify Hosting Compute](update-app-nextjs-version.md). 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 SSR 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](https://aws.amazon.com/s3/pricing/). + Une CloudFront distribution Amazon pour diffuser l'application. Pour plus d'informations sur CloudFront les frais, consultez [Amazon CloudFront Pricing](https://aws.amazon.com/cloudfront/pricing/). + Quatre [fonctions Lambda @Edge](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/lambda-at-the-edge.html) pour personnaliser le contenu diffusé. CloudFront ### Gestion des identités et des accès AWS autorisations pour les applications Next.js 11 SSR Amplify nécessite des autorisations Gestion des identités et des accès AWS (IAM) pour déployer une application SSR. Pour les applications SSR, Amplify déploie des ressources telles qu'un compartiment Amazon S3, CloudFront une distribution, des fonctionsLambda@Edge, une file d'attente Amazon SQS (si vous utilisez l'ISR) et des rôles IAM. Si vous ne disposez pas des autorisations minimales requises, vous recevrez un `Access Denied` 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 avec des autorisations pour déployer des ressources de backend](amplify-service-role.md) 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](https://docs.aws.amazon.com/IAM/latest/UserGuide/access_policies_create-console.html) 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: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 iam:AttachRolePolicy iam:CreateRole iam:CreateServiceLinkedRole iam:GetRole iam:PutRolePolicy iam:PassRole lambda:CreateFunction lambda:EnableReplication lambda:DeleteFunction lambda:GetFunction lambda:GetFunctionConfiguration lambda:PublishVersion lambda:UpdateFunctionCode lambda:UpdateFunctionConfiguration lambda:ListTags lambda:TagResource lambda:UntagResource route53:ChangeResourceRecordSets route53:ListHostedZonesByName route53:ListResourceRecordSets s3:CreateBucket s3:GetAccelerateConfiguration s3:GetObject s3:ListBucket s3:PutAccelerateConfiguration s3:PutBucketPolicy s3:PutObject s3:PutBucketTagging s3:GetBucketTagging lambda:ListEventSourceMappings lambda:CreateEventSourceMapping iam:UpdateAssumeRolePolicy iam:DeleteRolePolicy sqs:CreateQueue // SQS only needed if using ISR feature 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 SSR 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. **Topics** + [Le répertoire de sortie de mon application est remplacé](#output-directory-overridden) + [Je reçois une erreur 404 après le déploiement de mon site SSR](#404-error) + [Il manque la règle de réécriture pour les distributions CloudFront SSR dans mon application](#cloudfront-rewrite-rule-missing) + [Mon application est trop volumineuse pour être déployée](#app-too-large-to-deploy) + [Ma compilation échoue en raison d'une erreur de mémoire insuffisante](#out-of-memory) + [Mon application possède à la fois des branches SSR et SSG](#ssr-and-ssg-branches) + [Mon application stocke les fichiers statiques dans un dossier avec un chemin réservé](#amplify-reserved-path) + [Ma candidature a atteint une CloudFront limite](#cloudfront-distribution-limit) + [Les fonctions Lambda @Edge sont créées dans la région USA Est (Virginie du Nord)](#nextjs-version-lambda-edge-functions) + [Mon application Next.js utilise des fonctionnalités non prises en charge](#nextjs-version-support) + [Les images de mon application Next.js ne se chargent pas](#image-size-limit) + [Régions non prises en charge](#amplify-region-support) #### Le répertoire de sortie de mon application 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, consultez[Configuration des paramètres de compilation pour une application Amplify](build-settings.md). 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/**/* ``` #### Je reçois une erreur 404 après le déploiement de mon 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,[Le répertoire de sortie de mon application est remplacé](#output-directory-overridden). #### Il manque la règle de réécriture pour les distributions CloudFront SSR dans mon application 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.\]](http://docs.aws.amazon.com/fr_fr/amplify/latest/userguide/images/amplify-ssr-troubleshooting1.png) #### Mon 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 }, } ``` #### Ma 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_OPTIONS`environnement de votre fichier de paramètres de compilation. Définissez plutôt la variable d'`NODE_OPTIONS`environnement 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éfinition de variables d'environnement](setting-env-vars.md) 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](https://nextjs.org/docs/app/guides/ci-build-caching#aws-codebuild) sur le site Web Next.js. #### Mon 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. #### Mon 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. #### Ma candidature a atteint une CloudFront limite [CloudFront les quotas de service](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/cloudfront-limits.html) 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](https://docs.aws.amazon.com/servicequotas/latest/userguide/request-quota-increase.html) dans le *Guide de l’utilisateur Service Quotas*. #### 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](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/edge-functions-restrictions.html) dans le manuel *Amazon CloudFront Developer Guide*. #### Mon 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](#supportedfeatures) 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 SSR vers Amplify Hosting Compute](update-app-nextjs-version.md). #### Les images de mon 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.