Cours Next.js Complet ▲
Les 12 chapitres essentiels — App Router, Server Components, API Routes et déploiement
🏠 Hub Programmation
⚛️ React (prérequis)
⚡ JavaScript
🔷 TypeScript
☁️ AWS Cloud Practitioner
Introduction et installation
Next.js est le framework React de référence pour la production. Il ajoute à React tout ce qui manque : routing, rendu serveur (SSR), génération statique (SSG), API routes, optimisation d'images et de fonts. Créé par Vercel, c'est le framework utilisé par Netflix, TikTok, Nike, Twitch et Notion.
npx create-next-app@latest mon-app
# ✅ TypeScript? Yes
# ✅ ESLint? Yes
# ✅ Tailwind CSS? Yes
# ✅ App Router? Yes
cd mon-app
npm run dev # → http://localhost:3000
# Structure App Router :
# mon-app/
# ├── app/
# │ ├── layout.tsx (layout racine)
# │ ├── page.tsx (page d'accueil /)
# │ ├── globals.css
# │ └── about/
# │ └── page.tsx (page /about)
# ├── public/ (fichiers statiques)
# ├── next.config.js
# └── package.json
| Fonctionnalité | Description |
|---|---|
| App Router | Routing basé sur le système de fichiers |
| Server Components | Composants rendus côté serveur par défaut |
| SSR / SSG / ISR | Rendu serveur, statique ou incrémental |
| API Routes | Backend intégré (Route Handlers) |
| Server Actions | Mutations serveur sans API explicite |
| Image / Font | Optimisation automatique |
| Middleware | Logique avant chaque requête (auth, redirect) |
App Router et routing
//
// app/page.tsx → /
// app/about/page.tsx → /about
// app/blog/page.tsx → /blog
// app/blog/[slug]/page.tsx → /blog/mon-article (dynamique)
// app/blog/[…slug]/page.tsx → /blog/a/b/c (catch-all)
// app/page.tsx — page d'accueil
export default function Home()
// app/blog/[slug]/page.tsx — route dynamique
export default async function BlogPost(: )
| Fichier | Rôle |
|---|---|
| page.tsx | Page (rend la route accessible) |
| layout.tsx | Layout partagé (persistent entre navigations) |
| loading.tsx | UI de chargement (Suspense automatique) |
| error.tsx | Gestion d'erreur (Error Boundary) |
| not-found.tsx | Page 404 personnalisée |
| route.ts | API Route (Route Handler) |
| template.tsx | Comme layout mais re-monté à chaque navigation |
Chaque dossier avec un page.tsx crée une route. Les dossiers sans page.tsx ne sont pas accessibles — c'est utile pour organiser le code. Les dossiers entre parenthèses (group) regroupent sans affecter l'URL.
Server vs Client Components
// Ils s'exécutent sur le serveur UNIQUEMENT
// app/users/page.tsx
export default async function UsersPage()
import from « react »;
// Nécessaire UNIQUEMENT pour :
// – useState, useEffect, hooks React
// – onClick, onChange, événements
// – APIs navigateur (localStorage, window)
export default function Counter()
Règle d'or : gardez le maximum côté serveur. N'ajoutez « use client » que quand c'est nécessaire (interactivité, hooks, événements). Les Server Components sont plus rapides (0 KB de JS envoyé au client) et peuvent accéder directement à la DB.
| Besoin | Server Component | Client Component |
|---|---|---|
| Fetch data / DB | ✅ | ❌ (via API) |
| Variables env secrètes | ✅ | ❌ |
| useState / useEffect | ❌ | ✅ |
| onClick / onChange | ❌ | ✅ |
| localStorage / window | ❌ | ✅ |
| JS envoyé au client | 0 KB | Oui |
Layouts et pages
import from « next/font/google »;
import « ./globals.css »;
const inter = Inter();
export const metadata = ;
export default function RootLayout(: )
// app/dashboard/layout.tsx — layout imbriqué
export default function DashboardLayout(: )
Les layouts sont persistants : ils ne se re-montent PAS quand vous naviguez entre les pages du même segment. La sidebar, le header, la navigation restent en place — seul le contenu (children) change. C'est ultra-performant.
export default function Loading()
// app/dashboard/error.tsx — gestion d'erreurs
« use client »; // Error components doivent être Client Components
export default function Error(: )
Navigation et liens
// Link — navigation déclarative (préféré)
// Link prefetch automatiquement les routes visibles
import from « next/navigation »;
function NavigationComponent()
API Routes (Route Handlers)
import from « next/server »;
// GET /api/users
export async function GET()
// POST /api/users
export async function POST(request: Request)
// app/api/users/[id]/route.ts — route dynamique
export async function GET(
request: Request,
:
)
Server Actions
« use server »;
import from « next/cache »;
export async function createTodo(formData: FormData)
export async function deleteTodo(id: string)
import from « ../actions »;
export default async function TodosPage()
Les Server Actions remplacent les API CRUD simples. Le formulaire appelle directement une fonction serveur — pas de fetch, pas d'API route, pas de gestion d'état client. Le code est considérablement réduit. Utilisez les API Routes pour les endpoints publics ou les intégrations tierces.
Data Fetching
export default async function PostsPage()
const data = await fetch(« https://api.example.com/data », );
// Dynamique — toujours frais (pas de cache)
const data = await fetch(« https://api.example.com/data », );
// ISR — revalider toutes les 60 secondes
const data = await fetch(« https://api.example.com/data », );
// Revalidation à la demande (Server Action / Route Handler)
import from « next/cache »;
revalidatePath(« /posts »); // Revalider une page
revalidateTag(« posts »); // Revalider par tag
| Stratégie | Quand | Usage |
|---|---|---|
| force-cache | Build time | Pages statiques (blog, docs) |
| revalidate: N | Toutes les N sec | Données semi-dynamiques (prix, stocks) |
| no-store | Chaque requête | Données en temps réel (dashboard) |
Middleware et authentification
import from « next/server »;
import type from « next/server »;
export function middleware(request: NextRequest)
// Matcher — sur quelles routes le middleware s'applique
export const config = ;
Le middleware s'exécute sur l'Edge Runtime (avant que la requête n'atteigne le serveur). Il est ultra-rapide mais limité : pas d'accès à la DB, pas de Node.js APIs lourds. Idéal pour l'authentification, les redirections, et les headers.
// app/api/auth/[…nextauth]/route.ts
import NextAuth from « next-auth »;
import GitHubProvider from « next-auth/providers/github »;
const handler = NextAuth();
export ;
// Utilisation dans un Server Component
import from « next-auth »;
export default async function Dashboard()
Optimisation et performance
import Image from « next/image »;
src=« /photo.jpg »
alt=« Description »
width=
height=
priority
/>
// Image responsive
src=« /hero.jpg »
alt=« Hero »
fill
className=« object-cover »
sizes=« (max-width: 768px) 100vw, 50vw »
/>
// next/font — chargement optimal (pas de flash)
import from « next/font/google »;
const inter = Inter();
const mono = Roboto_Mono();
export const metadata = ;
// Metadata dynamique
export async function generateMetadata()
// Sitemap automatique — app/sitemap.ts
export default async function sitemap()
Déploiement
# Push sur GitHub → déploiement automatique
npm i -g vercel
vercel
# 2. Build statique (export)
# next.config.js: output: « export »
npm run build # → dossier out/ (hébergeable partout)
# 3. Node.js classique
npm run build
npm start # → serveur Node.js sur port 3000
# 4. Docker
# Dockerfile multi-stage optimisé disponible dans les docs Next.js
| Plateforme | Type | Idéal pour |
|---|---|---|
| Vercel | Serverless | Meilleure intégration, gratuit pour perso |
| Netlify | Serverless | Alternative populaire |
| AWS / GCP | Node.js / Docker | Contrôle total, entreprise |
| Export statique | CDN | Sites sans SSR (Cloudflare Pages) |
DATABASE_URL=postgresql://…
API_SECRET=sk_secret_key
# NEXT_PUBLIC_ = exposé au client (attention !)
NEXT_PUBLIC_API_URL=https://api.example.com
// Serveur — accès direct
process.env.DATABASE_URL // ✅ Server only
process.env.API_SECRET // ✅ Server only
// Client — uniquement les NEXT_PUBLIC_
process.env.NEXT_PUBLIC_API_URL // ✅ Client OK
process.env.API_SECRET // ❌ undefined côté client
Patterns et bonnes pratiques
├── app/
│ ├── (auth)/ # Route group (pas dans l'URL)
│ │ ├── login/page.tsx
│ │ └── register/page.tsx
│ ├── (main)/
│ │ ├── layout.tsx # Layout pour toutes les pages main
│ │ ├── page.tsx # /
│ │ └── dashboard/
│ │ ├── page.tsx # /dashboard
│ │ └── loading.tsx
│ ├── api/
│ │ └── users/route.ts
│ ├── layout.tsx # Root layout
│ └── globals.css
├── components/
│ ├── ui/ # Composants UI réutilisables
│ └── features/ # Composants métier
├── lib/
│ ├── db.ts # Connexion DB
│ ├── utils.ts # Utilitaires
│ └── actions.ts # Server Actions
├── public/
├── middleware.ts
└── next.config.js
// app/dashboard/@analytics/page.tsx
// app/dashboard/@team/page.tsx
// app/dashboard/layout.tsx
export default function DashboardLayout(: )
✅ À FAIRE
• Server Components par défaut
• « use client » seulement si nécessaire
• Server Actions pour les mutations
• next/image pour toutes les images
• next/font pour les polices
• Metadata sur chaque page
• loading.tsx et error.tsx
• revalidatePath après mutation
• .env.local pour les secrets
❌ À ÉVITER
• « use client » sur tout
• useEffect pour fetch les données
• API routes pour les CRUD internes
• au lieu de next/image
• Secrets dans NEXT_PUBLIC_
• Ignorer le cache/revalidation
• Layout qui contient du state
• fetch côté client si possible serveur
• Build sans vérifier les types
🏠 Hub Programmation
⚛️ Cours React
⚡ Cours JavaScript
🔷 Cours TypeScript
☁️ AWS Cloud Practitioner
Cours Next.js Complet — App Router, Server Components et déploiement
Référence : nextjs.org/docs | Vercel
