Workshop Next.js 16.
Deux jours pour passer App Router en confiance. Server Components, Server Actions, RSC patterns, Turbopack, streaming UI, performance INP. On part d’un vrai projet — le vôtre si possible, sinon on monte un projet support ensemble. À la fin du jour 2, votre équipe sait quand utiliser quoi et pourquoi.
Cette offre vous parle si…
- Votre équipe code en Next.js mais reste sur Pages Router — la migration App Router vous fait peur.
- Vous êtes déjà sur App Router mais Server vs Client Components reste flou et tout le monde met "use client" partout par sécurité.
- Vous voulez activer Server Actions sereinement, pas en lire un thread Twitter contradictoire.
- Vous avez 2 à 15 devs full-stack ou front qui ont besoin de cadre commun avant un refactor.
- Vos INP / LCP partent en vrille et vous voulez comprendre quelles décisions Next.js sont responsables.
- Vous avez besoin d’une formation Qualiopi pour activer le financement OPCO (en cours côté Opcodia).
App Router est puissant, mais ses pièges coûtent six mois si on les apprend seul
Next.js 16 a redistribué les cartes. Server Components par défaut, Server Actions stables, Turbopack désormais par défaut, le caching modèle qui a changé trois fois en 18 mois. Les équipes qui apprennent seules tombent toutes dans les mêmes trois pièges : "use client" partout par sécurité, fetch parallèles ratés, cache mal géré qui invalide tout à chaque requête. Deux jours focus avec quelqu’un qui code en Next.js 16 tous les jours, ça vous évite le détour.
- "use client" en tête de tous les fichiers par défaut → tout le bénéfice RSC perdu
- Fetch en cascade (await dans une boucle) au lieu de Promise.all → 4× plus lent
- Cache mal géré qui invalide tout ou ne se rafraîchit jamais
- Migration Pages → App tentée sans plan → projet bloqué 3 mois
- INP qui dépasse 200 ms sans qu’on sache d’où ça vient
Scope concret, sans flou
- Jour 1 matin01
Server vs Client Components — la frontière comprise
La distinction Server / Client est la décision structurante d’App Router. On code des cas concrets pour ancrer le mental model : où "use client" doit s’arrêter, comment passer des Server Components dans des Client Components, quand le pattern fail et pourquoi.
- Mental model : qui rend où, qui hydrate quoi, qui ship du JS
- Pattern "Server Component dans Client Component" via children prop
- Anti-pattern "use client" en tête de layout → cascade involontaire
- Suspense boundaries : où les placer, comment streamer correctement
- Jour 1 après-midi02
Server Actions + revalidation + cache tags
Server Actions sont stables depuis Next.js 14, mais leur mise en œuvre prod demande du soin. On code un formulaire complet : validation Zod côté serveur, revalidation ciblée par cache tag, gestion d’erreur propre côté client, optimistic updates.
- Server Action vs route handler — quand l’un, quand l’autre
- Validation Zod côté serveur, jamais côté client en source de vérité
- revalidateTag vs revalidatePath — différences et pièges
- useFormStatus + useOptimistic pour une UX fluide sans JS lourd
- Jour 2 matin03
Streaming UI + Suspense + loading.tsx
Le streaming est la feature qui fait de Next.js 16 un vrai framework full-stack. On apprend à découper une page en streams parallèles, à montrer du squelette en attendant, à hiérarchiser le LCP critique au-dessus de la fold.
- loading.tsx, error.tsx, not-found.tsx — boundaries imbriqués
- Streaming parallèle vs séquentiel — quand chaque approche gagne
- Skeleton UI bien fait : pas un spinner mais un layout fantôme
- Hiérarchie LCP : ce qu’on stream tôt, ce qu’on peut reporter
- Jour 2 après-midi04
Performance INP, Turbopack, bundle analysis
L’après-midi du jour 2 on durcit l’app. INP devient la métrique Core Web Vital la plus dure à tenir en 2026 — on apprend à la diagnostiquer et la réparer. Puis Turbopack en dev et prod, et bundle analysis pour traquer les imports gourmands.
- INP : capture en RUM, repérage handlers lourds, fixes pratiques
- Turbopack en prod : ce qui change, ce qui casse, comment migrer
- @next/bundle-analyzer : lecture du treemap, top 10 à virer
- Dynamic imports + ssr: false bien placés (sans casser le RSC)
- Tout au long05
Vrai projet, code committé dans votre repo
On travaille sur votre repo dès le matin du jour 1 sur une branche dédiée. Fin de jour 2 : PR ouvert, CI verte, plan de migration documenté pour le reste de la stack. C’est cette continuité avec votre code réel qui fait la différence entre une formation utile et un séminaire oublié en 2 semaines.
- Branche dédiée + PR ouvert sur votre repo
- README dans le PR avec patterns adoptés et anti-patterns interdits
- Plan de migration si Pages Router à convertir derrière
- Tests sur les cas tordus rencontrés en live
Le scope complet, sans surprise sur la facture
- Support PDF 60+ pages (patterns RSC, anti-patterns, cheatsheet)
- Accès Slack privé 30 jours après la session
- Replay vidéo des 2 journées (mp4 + chapitres)
- Code sources committé dans votre repo
- PR ouvert avec README + tests
- Cheatsheet caching Next.js 16 (revalidate, tags, dynamic)
- Templates de starter : Server Action + Zod prêts à copier
- Snippets bundle analyzer + INP tracking
- Attestation de présence Qualiopi (en cours, OPCO bientôt activable)
- Brief préparatoire 45 min en visio pour cadrer le projet support
- Debrief 1h en visio à J+30 — revue du PR poussé en prod
- Pas de commission cachée, pas d’upsell
Prix posé, sans devis à rallonge
2 jours intensifs (9h-17h30 chaque jour). Tarif selon taille équipe : 2 600 € pour 2-4 personnes, 3 400 € pour 5-8, 4 300 € pour 9-12, 5 200 € pour 13-15. Brief préparatoire 45 min inclus pour cadrer le projet support.
- En présentiel ou visio
- Qualiopi en cours
- OPCO bientôt possible
- 2 à 15 personnes
On vous a vu venir
Quelle taille d’équipe minimum / maximum ?
Minimum 2 personnes, maximum 15. En dessous de 2, le coaching 1-1 (240 €/h) est plus efficace. Au-delà de 15, on découpe en deux sessions de 2 jours, espacées d’une semaine, pour garder du temps de Q&R par participant.
Présentiel ou visio ?
Les deux marchent. En présentiel je me déplace sur Paris / IDF sans surcoût, ailleurs en France on ajoute les frais réels. En visio, screen share permanent sur Meet ou Zoom selon votre préf. Le présentiel marche un peu mieux pour des équipes 8+ — les discussions de couloir pendant les pauses sont souvent les plus utiles.
Quels prérequis pour les participants ?
Confort avec React (hooks, props, state) et TypeScript de base. Avoir déjà touché à Next.js suffit, peu importe que ce soit Pages Router ou App Router. Si certains devs sont juniors et d’autres seniors, ça marche : les seniors aident pendant les exos, ce qui consolide leur propre compréhension.
Le replay vidéo est dispo combien de temps ?
À vie. Lien Vimeo privé envoyé sous 72h après la session, chapitres marqués, pas de DRM. Vous pouvez le repartager dans l’équipe à des collègues qui n’ont pas participé — c’est inclus dans le tarif, pas par siège.
Vous délivrez un certificat reconnu ?
Attestation de présence Opcodia à la fin du jour 2 (signée, datée, programme détaillé). La certification Qualiopi est en cours côté studio — une fois validée, on pourra activer le financement OPCO. En attendant, le coût passe en frais de formation classique, déductible.
Deux jours, et votre équipe arrête de bricoler Next.js.
Brief préparatoire offert pour cadrer le projet support et briefer les participants. Si on se rend compte qu’un workshop n’est pas le bon format (vous êtes déjà solides sur App Router mais vous bloquez sur un sujet précis), on bascule sur du coaching ciblé.
Réserver le brief préparatoire