Un en-tête dynamique

Dérivez le titre de l'en-tête depuis la route active afin qu'il ne soit jamais désynchronisé.

Un en-tête qui affiche toujours « Dashboard » devient rapidement obsolète. Puisque le layout connaît déjà l'élément de navigation actif, réutilisez-le pour le titre de l'en-tête — une seule source de vérité.

src/app/layout.tsx

const title = NAV.find((n) => active(path, n.href))?.label ?? "Dashboard";

<header className="hd">
  <h1>{title}</h1>
</header>

Naviguez dans l'aperçu — le titre de l'en-tête suit la route. Pour le SEO, définissez également le titre du document avec generateMetadata sur chaque page :

src/app/products/page.tsx

export function generateMetadata() {
  return { title: "Products — Acme Admin" };
}

ASTUCE

Besoin de boutons spécifiques à une page dans l'en-tête (comme « + Nouveau produit ») ? Rendez-les depuis la page elle-même — nous en ajouterons un au tableau des produits à l'étape suivante.