Déploiement & Modes de Rendu
Mets ton site en ligne et choisis comment chaque page est générée.
8.1Les 3 modes de rendu
C'est LE concept clé de Next.js. Chaque page peut être rendue différemment selon tes besoins :
| Mode | Quand ? | Cas d'usage | Vitesse |
|---|---|---|---|
| SSG | Au build | Blog, docs, landing page | ⚡ Instantané |
| SSR | À chaque requête | Dashboard, page perso | Rapide |
| ISR | Au build + revalidation | E-commerce, actualités | ⚡ + frais |
8.2SSG : Static Site Generation
C'est le mode par défaut de Next.js. Si ta page n'utilise pas de données dynamiques, elle est automatiquement pré-rendue au moment du build.
// app/about/page.tsx
// ✅ SSG automatique (aucune donnée dynamique)
export default function AboutPage() {
return (
<div>
<h1>À propos</h1>
<p>Ce site est génial.</p>
</div>
)
}Pour les pages dynamiques (comme un blog), utilise generateStaticParams pour dire à Next.js quelles pages créer :
// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
const articles = await getArticles()
return articles.map((article) => ({
slug: article.slug,
}))
}
export default async function BlogPost({
params,
}: {
params: Promise<{ slug: string }>
}) {
const { slug } = await params
const article = await getArticle(slug)
return <article>{article.content}</article>
}8.3SSR : Server-Side Rendering
Si ta page a besoin de données fraîches à chaque visite, elle sera rendue côté serveur à chaque requête. Pour forcer le SSR :
// app/dashboard/page.tsx
// Option 1 : via le cache du fetch
async function getData() {
const res = await fetch('https://api.example.com/data', {
cache: 'no-store', // ← Force le SSR
})
return res.json()
}
// Option 2 : via la configuration de la route
export const dynamic = 'force-dynamic'
export default async function DashboardPage() {
const data = await getData()
return <div>{/* Données toujours fraîches */}</div>
}Le SSR est parfait pour les pages qui affichent des données personnalisées (dashboard, profil) ou qui changent toutes les secondes.
8.4ISR : Incremental Static Regeneration
Le meilleur des deux mondes : la vitesse du SSG avec la fraîcheur du SSR. La page est pré-rendue, mais se régénère en arrière-plan toutes les X secondes.
// app/produits/page.tsx
async function getProduits() {
const res = await fetch('https://api.example.com/produits', {
next: { revalidate: 60 }, // ← Régénère toutes les 60 secondes
})
return res.json()
}
export default async function ProduitsPage() {
const produits = await getProduits()
return (
<div>
<h1>Nos produits</h1>
{produits.map((p: any) => (
<div key={p.id}>{p.name} - {p.price}€</div>
))}
</div>
)
}Pendant 60 secondes, tous les visiteurs reçoivent la page en cache (ultra rapide). Après 60 secondes, le prochain visiteur déclenche une régénération en arrière-plan. Le résultat : performance maximale + données fraîches.
8.5Déployer sur Vercel
Vercel, c'est la plateforme créée par l'équipe derrière Next.js. Le déploiement est ridiculement simple :
- Pousse ton code sur GitHub (ou GitLab/Bitbucket).
- Va sur vercel.com et connecte ton repo.
- Vercel détecte automatiquement que c'est du Next.js.
- Clique sur "Deploy". C'est tout.
Ce que Vercel fait automatiquement :
- Build : compile ton projet.
- CDN mondial : tes pages statiques sont servies depuis le serveur le plus proche.
- Serverless Functions : tes Server Components et API Routes tournent sur des fonctions edge.
- Preview Deployments : chaque Pull Request a sa propre URL de preview.
- HTTPS automatique : certificat SSL gratuit.
# Tu peux aussi déployer via CLI
npm i -g vercel
vercel
# Variables d'environnement
vercel env pull .env.local # Récupère les variables depuis Vercel8.6Variables d'environnement
Tes clés API et secrets ne doivent jamais être dans le code. Next.js gère les variables d'environnement avec des conventions simples :
# .env.local (JAMAIS commité dans Git !)
# 🔒 Côté serveur uniquement (Server Components, API Routes)
DATABASE_URL="postgres://user:pass@host/db"
API_SECRET="mon-secret-mega-secure"
# Accessible côté client aussi (préfixe NEXT_PUBLIC_)
NEXT_PUBLIC_SITE_URL="https://monsite.com"
NEXT_PUBLIC_ANALYTICS_ID="GA-123456"// En Server Component → accès direct
const dbUrl = process.env.DATABASE_URL // ✅ Fonctionne
// En Client Component → seulement NEXT_PUBLIC_
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL // ✅ Fonctionne
const secret = process.env.API_SECRET // ❌ undefined côté client8.7Auto-hébergement (alternative à Vercel)
Tu peux aussi héberger Next.js sur ton propre serveur. C'est un peu plus de travail mais tu gardes le contrôle total :
# Build de production
npm run build
# Démarre le serveur Node.js
npm run start # ← tourne sur le port 3000 par défaut
# Ou avec Docker
FROM node:20-alpine
WORKDIR /app
COPY . .
RUN npm ci && npm run build
EXPOSE 3000
CMD ["npm", "start"]Les services comme Fly.io, Railway ou un VPS classique (OVH, Hetzner) fonctionnent très bien avec Next.js.