Déployer Next.js sur AWS (export statique) : S3 et CloudFront en 5 minutes avec CDK
Héberger une application Next.js en statique sur AWS suit le même schéma : un bucket S3 privé pour les fichiers, CloudFront pour la diffusion globale, et OAC pour verrouiller l’accès direct à S3. Le CDK TypeScript automatise le tout, sans dépendre de Route 53 pour commencer.
Dans ce guide, nous créons une app Next.js en export statique, puis nous déployons la sortie exportée (out/) vers S3 derrière CloudFront en une commande.
Important
Cet article est le premier d’une série d’articles liés à un projet (Daily Actions).
Il regroupera plusieurs modules et nous permettra d’interagir avec différents services AWS (S3, Lambda, DynamoDB, Cognito), et même avec l’IA via AWS Bedrock.
À chaque avancée, nous créerons une branche Git pour la sauvegarde.
N’hésitez pas à lire le README.md du projet.
Objectif du tutoriel
- Organiser un monorepo contenant le front et l’infra.
- Créer un bucket S3 privé.
- Configurer CloudFront pour servir les pages exportées Next.js.
- Déployer le tout en une seule commande.
Prérequis
Avant de commencer, il vous faut :
- Node.js (LTS recommandé)
- AWS CLI configurée :
aws configure- AWS CDK installé globalement :
npm install -g aws-cdk- Un compte AWS actif
npmoupnpm/yarnpour le front
1. Structure du projet
Nous regroupons l’application et l’infrastructure dans un dossier racine unique :
/host-nextjs-app
├── /frontend --------------> Application Next.js (export statique)
└── /infrastructure --------------> Code AWS CDKCréation du dossier et du frontend Next.js
mkdir host-nextjs-app && cd host-nextjs-app
npx create-next-app@latest frontend --typescript --eslint --app
cd frontend && npm install && cd ..Activer l’export statique Next.js
Modifiez frontend/next.config.js (ou next.config.mjs) et définissez :
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
};
module.exports = nextConfig;Ensuite, lancez :
cd frontend
npm run buildNext.js générera le site statique dans frontend/out/.
Création de l’infrastructure
mkdir infrastructure && cd infrastructure
cdk init app --language typescript2. Le code de l’infrastructure (CDK)
Ouvrez infrastructure/lib/infrastructure-stack.ts. Ce stack crée le bucket S3, la distribution CloudFront avec OAC, et le déploiement de l’export statique Next.js (out/). Pour les routes introuvables, on mappe 404 vers 404.html.
import * as cdk from 'aws-cdk-lib/core';
import { Construct } from 'constructs';
import * as s3 from 'aws-cdk-lib/aws-s3';
import * as cloudfront from 'aws-cdk-lib/aws-cloudfront';
import * as s3deploy from 'aws-cdk-lib/aws-s3-deployment';
import * as origins from 'aws-cdk-lib/aws-cloudfront-origins';
export class InfrastructureStack extends cdk.Stack {
constructor(scope: Construct, id: string, props?: cdk.StackProps) {
super(scope, id, props);
const bucket = new s3.Bucket(this, 'NextAppBucket', {
removalPolicy: cdk.RemovalPolicy.DESTROY,
autoDeleteObjects: true,
blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL,
bucketName: 'next-daily-app',
});
const distribution = new cloudfront.Distribution(this, 'NextAppDistribution', {
defaultBehavior: {
origin: origins.S3BucketOrigin.withOriginAccessControl(bucket),
viewerProtocolPolicy: cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
},
defaultRootObject: 'index.html',
errorResponses: [
{
httpStatus: 404,
responseHttpStatus: 404,
responsePagePath: '/404.html',
},
],
});
// Export statique Next.js : sortie par défaut dans frontend/out
new s3deploy.BucketDeployment(this, 'DeployNextApp', {
sources: [s3deploy.Source.asset('../frontend/out')],
destinationBucket: bucket,
distribution,
distributionPaths: ['/*'],
});
new cdk.CfnOutput(this, 'DistributionDomainName', {
value: distribution.domainName,
});
}
}Note
Pour Next.js en export statique, les fichiers générés se trouvent dans frontend/out/.
CloudFront doit servir des pages HTML réelles, donc 404.html doit exister dans out/ (créez une page 404 si nécessaire).
3. Déploiement en une étape
Dans infrastructure/package.json, ajoutez un script qui build le front puis lance le déploiement CDK (chemins relatifs depuis le dossier infrastructure) :
"deploy:all": "cd ../frontend && npm run build && cd ../infrastructure && cdk deploy"Puis :
cd infrastructure
npm run deploy:allEn sortie, récupérez l’URL CloudFront (domaine du type https://xxxxxxxxxxxx.cloudfront.net/) pour ouvrir l’application.
4. Pointer votre domaine (sans Route 53) — bonus
Si votre domaine est chez OVH, GoDaddy ou un autre registrar, créez un enregistrement CNAME :
- Nom :
www(ou votre sous-domaine) - Valeur : le domaine CloudFront affiché par le stack (ex.
d1234567890.cloudfront.net)
Important
Pour servir votre propre nom de domaine en HTTPS, il faudra un certificat dans AWS Certificate Manager (ACM) et l’associer à la distribution. L’URL *.cloudfront.net fournie par défaut est déjà en HTTPS.
5. Nettoyer
Pour éviter des coûts après les tests :
cd infrastructure
cdk destroyConclusion
Dans cet article nous avons :
- créé une application Next.js en export statique et son dossier
out/; - configuré un bucket S3 privé et une distribution CloudFront ;
- automatisé build + déploiement avec le CDK.
- projet gitlab
Note
Votre interface est prête ; l’étape suivante logique est d’ajouter l’authentification (par exemple AWS Cognito) ou de brancher votre app sur une API déjà déployée sur AWS.
Commentaires