Parent : [[INDEX-WEB-UIUX]]

Coexistence V1/V2 : middleware pathname + layout conditionnel

Problème

Reconstruire une app Next.js sans casser l'ancienne version. Le router Next.js ne supporte qu'un seul répertoire app/. Comment faire cohabiter deux design systems / layouts distincts ?

Solution

Utiliser le middleware pour injecter le pathname dans les headers, puis conditionner le root layout côté serveur.

1. Middleware

// middleware.ts
import { type NextRequest, NextResponse } from 'next/server'

export async function middleware(request: NextRequest) {
  const response = NextResponse.next()
  response.headers.set('x-pathname', request.nextUrl.pathname)
  return response
}

2. Root layout conditionnel

// app/layout.tsx
import { headers } from 'next/headers'

export default async function RootLayout({ children }) {
  const h = await headers()
  const pathname = h.get('x-pathname') || ''
  const isV2 = pathname.startsWith('/v2')

  if (isV2) {
    return (
      <html lang="fr">
        <body>{children}</body>
      </html>
    )
  }

  // Layout legacy complet avec sidebar, header, ticker...
  return (
    <html lang="fr">
      <body style={{ backgroundColor: '#0B0B0F' }}>
        <Sidebar />
        <main className="md:ml-[220px]">{children}</main>
      </body>
    </html>
  )
}

3. Structure des routes

app/
├── layout.tsx       # Root conditionnel
├── page.tsx         # Legacy /
├── news/            # Legacy /news
└── v2/
    ├── layout.tsx   # Layout V2 (sans html/body)
    ├── page.tsx     # V2 /
    └── feed/
        └── page.tsx # V2 /feed

Pourquoi ça marche

Le middleware s'exécute avant le render, garantissant que x-pathname est disponible dans le Server Component root.
Le layout conditionnel évite de charger le legacy CSS/JS sur les routes V2.
Pas besoin de sous-domaine ni de projet séparé.

Quand ne PAS l'utiliser

Si vous faites un hard cut (pas de coexistence nécessaire).
Si vous utilisez generateStaticParams sur des routes V2 : le middleware ne s'exécute pas au build time pour les pages statiques. Utilisez alors un client-side redirect ou un layout group avec son propre parent.

Source

Projet : ai-hub
Contexte : Reconstruction V2 sans interruption du legacy
Validé le : 2026-05-16

Liens connexes

[[KNOW-PAT-138|KNOW-PAT-138]]