Développement d'applications Next.js avec App Router, Server Components, SSR, ISR, API routes et middleware. Se déclenche avec "Next.js", "NextJS", "App Router", "Server Components", "SSR", "getServerSideProps". Also triggers on "Next.js App Router", "ISR and SSR".
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
Développement d'applications Next.js avec App Router, Server Components, SSR, ISR, API routes et middleware. Se déclenche avec "Next.js", "NextJS", "App Router", "Server Components", "SSR", "getServerSideProps". Also triggers on "Next.js App Router", "ISR and SSR".
Guide Next.js (App Router — 2026)
1. Critères de décision stratégique
Choix de la stratégie de rendu par page :
Besoin
Stratégie
Config
Données dynamiques par requête
SSR
export const dynamic = 'force-dynamic'
Données rarement modifiées
ISR
export const revalidate = 60
Contenu totalement statique
SSG
generateStaticParams + cache par défaut
Interactivité pure, auth client
CSR
"use client" + SWR/React Query
Latence critique, edge-compatible
Edge SSR
export const runtime = 'edge'
Quand utiliser "use client" : uniquement pour useState, useEffect, event handlers DOM, hooks navigateur (window, localStorage). Tout le reste = Server Component.
2. Initialisation du projet
# Next.js 15 avec TypeScript, Tailwind, App Router, ESLint
npx create-next-app@latest my-app \
--typescript --tailwind --app --eslint --src-dir --import-alias "@/*"
my-app && npm run dev
// Utilisation dans un form
<form action={createUser}>
<inputname="name"required /><inputname="email"type="email"required /><buttontype="submit">Créer</button>
</form>
Sans NEXT_PUBLIC_ → accessible uniquement côté serveur (Server Components, API routes, middleware).
Avec NEXT_PUBLIC_ → bundle client. Ne jamais y mettre clés secrètes.
10. Garde-fous et anti-patterns
Waterfalls de fetch — ne jamais faire await en séquence quand les requêtes sont indépendantes. Utiliser Promise.all.
"use client" trop haut — ne pas marquer un layout ou une page entière comme client. Pousser "use client" au composant feuille qui a besoin d'interactivité.
Données sensibles dans les composants client — ne jamais passer process.env.SECRET_KEY ou tokens JWT à un composant client. Les garder dans les Server Actions ou Route Handlers.
Oublier revalidatePath/revalidateTag après une mutation — la page affichera des données périmées après une Server Action.
params non awaité (Next 15) — params et searchParams sont des Promises dans Next.js 15. Toujours les await.
export const dynamic = 'force-dynamic' sur tout — désactive le cache partout, détruit les performances. Utiliser uniquement quand les données changent à chaque requête.
Fetch sans gestion d'erreur — un fetch échoué dans un Server Component non protégé par error.tsx fait planter toute la page.
11. Déploiement
# Build de production
npm run build && npm start
# Standalone (Docker)# next.config.ts
output: 'standalone'# Dockerfile minimal
FROM node:22-alpine AS runner
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
CMD ["node", "server.js"]
