Next.js 14 App Router en production — leçons après 6 mois sur Nexus

Server Components, streaming, layouts imbriqués, Server Actions, parallel routes : ce qui marche vraiment et ce qui pique en production sur une plateforme fintech.

Six mois de production sur Next.js 14 avec l'App Router et les Server Components. Ce qui a marché, ce qui a fait mal, ce que je referais et ce que je ne referais plus.

1. Le contexte

Sur Nexus (plateforme fintech), j'ai migré une stack Pages Router de Next.js 13 vers App Router en 14. Les promesses : Server Components, streaming, layouts imbriqués, data fetching simplifié, parallèles routes. Six mois plus tard, le bilan est nuancé. Énormément de valeur, mais aussi quelques pièges qui coûtent cher en production.

Cet article condense les apprentissages. Pas de "Next.js c'est génial" générique : ce qui fonctionne vraiment, ce qui dérape, et comment s'en sortir.

2. Ce qui a marché immédiatement

2.1 Layouts imbriqués

L'avantage est énorme. Avant, on avait un _app.tsx global et des composants Layout partagés à la main. Maintenant chaque segment a son layout.tsx, qui ne re-render pas quand on navigue dans ses enfants.

TSX

1// app/dashboard/layout.tsx
2export default function DashboardLayout({ children }: { children: React.ReactNode }) {
3  return (
4    <div className="dashboard">
5      <DashboardSidebar />
6      <main>{children}</main>
7    </div>
8  );
9}

Le sidebar reste statique entre les routes /dashboard/portfolio et /dashboard/transactions. Gain perçu énorme côté utilisateur.

2.2 Streaming + Suspense

Pouvoir streamer une page section par section change le ressenti de chargement. Le hero s'affiche immédiatement, les blocs de données arrivent progressivement. Sur Nexus, le LCP a chuté de 3,2 s à 1,4 s en moyenne juste avec ça.

TSX

1// app/dashboard/page.tsx
2export default async function DashboardPage() {
return (
  <>
    <PortfolioHeader />
    <Suspense fallback={<TransactionsSkeleton />}>
      <RecentTransactions />
    </Suspense>
    <Suspense fallback={<ChartSkeleton />}>
      <MarketChart />
    </Suspense>
  </>
);
14}

2.3 generateMetadata par segment

La métadonnée par page est devenue trivial. Plus de next/head à orchestrer manuellement.

TSX

1// app/projects/[slug]/page.tsx
2export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
3  const project = await fetchProject(params.slug);
4  return {
5    title: `${project.title} — Portfolio`,
6    description: project.excerpt,
7    openGraph: { images: [project.image] },
8  };
9}

1	// app/dashboard/page.tsx — Server Component
2	import { InteractiveChart } from "@/components/InteractiveChart";
3
4	export default async function DashboardPage() {
5	const data = await fetchData(); // serveur
6	return <InteractiveChart data={data} />; // composant client, fichier séparé
7	}
8
9	// components/InteractiveChart.tsx
10	"use client";
11	import { useState } from "react";
12	// ... composant interactif

1	// ❌ Mauvais — solde figé à la première requête
2	const balance = await fetch("/api/balance").then(r => r.json());
3
4	// ✅ Bon — refetch à chaque requête
5	const balance = await fetch("/api/balance", { cache: "no-store" }).then(r => r.json());
6
7	// ✅ Aussi bon — revalidate régulier
8	const balance = await fetch("/api/balance", { next: { revalidate: 30 } }).then(r => r.json());

1	app/
2	layout.tsx
3	page.tsx ← page d'accueil
4	@modal/
5	default.tsx ← rien par défaut
6	(.)projects/[slug]/page.tsx ← intercepté : ouvre une modale
7	projects/
8	[slug]/page.tsx ← navigation directe : page complète

1	// app/(auth)/login/actions.ts
2	"use server";
3	import { redirect } from "next/navigation";
4
5	export async function loginAction(formData: FormData) {
6	const email = formData.get("email") as string;
7	const password = formData.get("password") as string;
8
9	const session = await authService.login(email, password);
10	if (!session) {
11	return { error: "Identifiants invalides" };
12	}
13
14	cookies().set("session", session.token, { httpOnly: true, secure: true });
15	redirect("/dashboard");
16	}
17
18	// app/(auth)/login/page.tsx
19	import { loginAction } from "./actions";
20
21	export default function LoginPage() {
22	return (
23	<form action={loginAction}>
24	<input name="email" type="email" required />
25	<input name="password" type="password" required />
26	<button type="submit">Connexion</button>
27	</form>
28	);
29	}

1	// app/blog/[slug]/page.tsx
2	export async function generateStaticParams() {
3	const posts = await fetchAllSlugs();
4	return posts.map((slug) => ({ slug }));
5	}
6
7	export const revalidate = 3600;

Next.js 14 App Router en production — leçons après 6 mois sur Nexus

1. Le contexte

2. Ce qui a marché immédiatement

2.1 Layouts imbriqués

2.2 Streaming + Suspense

2.3 generateMetadata par segment

Réactions des lecteurs

Transformer cette lecture en décision produit.

3. Ce qui m'a fait mal

3.1 La frontière Server / Client est subtile

3.2 Le cache agressif de `fetch`

3.3 Hydratation et flash

3.4 Parallel routes — puissant mais ésotérique

4. Server Actions — la vraie révolution

5. Le coût des Server Components

6. Le déploiement Vercel vs self-hosted

7. SEO et SSR pur

8. Migrations difficiles

8.1 `getServerSideProps` → Server Component

8.2 `next/router` → `next/navigation`

8.3 API Routes → Route Handlers

9. Pièges à éviter

10. Ce que je referais

11. Ce que je ne referais plus

12. Conclusion

1	// app/dashboard/layout.tsx
2	export default function DashboardLayout({ children }: { children: React.ReactNode }) {
3	return (
4	<div className="dashboard">
5	<DashboardSidebar />
6	<main>{children}</main>
7	</div>
8	);
9	}

1	// app/dashboard/page.tsx
2	export default async function DashboardPage() {
3	return (
4	<>
5	<PortfolioHeader />
6	<Suspense fallback={<TransactionsSkeleton />}>
7	<RecentTransactions />
8	</Suspense>
9	<Suspense fallback={<ChartSkeleton />}>
10	<MarketChart />
11	</Suspense>
12	</>
13	);
14	}

1	// app/projects/[slug]/page.tsx
2	export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
3	const project = await fetchProject(params.slug);
4	return {
5	title: `${project.title} — Portfolio`,
6	description: project.excerpt,
7	openGraph: { images: [project.image] },
8	};
9	}

1	// Avant (Pages Router)
2	export async function getServerSideProps(ctx) {
3	const session = await getSession(ctx);
4	if (!session) return { redirect: { destination: "/login", permanent: false } };
5	return { props: { user: session.user } };
6	}
7
8	// Après (App Router)
9	export default async function Page() {
10	const session = await getSession();
11	if (!session) redirect("/login");
12	return <Dashboard user={session.user} />;
13	}

1	// app/api/users/route.ts
2	import { NextResponse } from "next/server";
3
4	export async function GET() {
5	const users = await db.user.findMany();
6	return NextResponse.json(users);
7	}
8
9	export async function POST(req: Request) {
10	const body = await req.json();
11	const created = await db.user.create({ data: body });
12	return NextResponse.json(created, { status: 201 });
13	}

Piège	Symptôme	Correction
`"use client"` trop large	Bundle JS gonfle	Isoler les composants client dans des fichiers dédiés
Cache fetch implicite	Données figées	`cache: "no-store"` ou `revalidate`
Hydratation mismatch	Console warnings + flash	Calculs runtime via `useEffect`
ISR sur données utilisateur	Données d'un user montrées à un autre	Jamais d'ISR sur du contenu personnalisé
Self-hosted sans tuning	Streaming buffer, ISR cassée	Config Nginx + cache filesystem partagé
Server Actions sans validation	Risque bypass client	Zod ou validateur côté serveur systématique
Routes parallèles non documentées	Équipe perdue	README + diagrammes explicites

Next.js 14 App Router en production — leçons après 6 mois sur Nexus

1. Le contexte

2. Ce qui a marché immédiatement

2.1 Layouts imbriqués

2.2 Streaming + Suspense

2.3 generateMetadata par segment

Transformer cette lecture en décision produit.

Recevoir les prochaines notes techniques.

3. Ce qui m'a fait mal

3.1 La frontière Server / Client est subtile

3.2 Le cache agressif de fetch

3.3 Hydratation et flash

3.4 Parallel routes — puissant mais ésotérique

4. Server Actions — la vraie révolution

5. Le coût des Server Components

6. Le déploiement Vercel vs self-hosted

7. SEO et SSR pur

8. Migrations difficiles

8.1 getServerSideProps → Server Component

8.2 next/router → next/navigation

8.3 API Routes → Route Handlers

9. Pièges à éviter

10. Ce que je referais

11. Ce que je ne referais plus

12. Conclusion

3.2 Le cache agressif de `fetch`

8.1 `getServerSideProps` → Server Component

8.2 `next/router` → `next/navigation`