L'App Router dispose d'une Metadata API intégrée pour les balises SEO (<title>, <meta>, Open Graph, etc.) — vous exportez les métadonnées d'un layout.tsx ou page.tsx et Next.js génère les balises correctes.
L'App Router dispose d'une Metadata API intégrée pour les balises SEO (<title>, <meta>, Open Graph, etc.) — vous exportez les métadonnées d'un layout.tsx ou page.tsx et Next.js génère les balises correctes.
<head>// app/about/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "About Us",
description: "Learn about our company and team.",
openGraph: {
title: "About Us",
images: ["/og-about.png"],
},
};
export default function About() { return <h1>About</h1>; }
Next.js lit l'objet metadata exporté et génère <title>, <meta name="description">, les balises OG, etc. — sans modification manuelle du <head>.
Pour les pages dont le titre dépend du contenu récupéré (un article de blog, un produit), exportez une fonction async generateMetadata :
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
const post = await getPost(params.slug); // fetch the post
return {
title: post.title,
description: post.excerpt,
openGraph: { images: [post.coverImage] },
};
}
Cette fonction s'exécute sur le serveur et permet à chaque page dynamique d'avoir des métadonnées précises et spécifiques au contenu — essentielles pour le SEO et le partage social de contenu dynamique.
// app/layout.tsx — defaults + a title template
export const metadata: Metadata = {
title: { default: "My Site", template: "%s | My Site" }, // child titles become "About | My Site"
};
Les métadonnées définies dans une layout sont fusionnées avec (et peuvent être remplacées par) les pages enfants — vous définissez donc les valeurs par défaut au niveau du site une seule fois et les valeurs par page où nécessaire. Le template ajoute automatiquement le nom du site.
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
Les fichiers spéciaux génèrent automatiquement les métadonnées/routes correspondantes.
De bonnes métadonnées driving le SEO et les aperçus de partage social.
La Metadata API la rend déclarative et type-safe — metadata statiques pour les pages fixes, generateMetadata async pour les pages pilotées par les données, et les valeurs par défaut au niveau de la layout avec des templates — remplaçant la gestion manuelle du <head> par un système propre et rendu côté serveur.
Une bibliothèque de questions d'entretien IT avec des réponses détaillées — du Junior au Senior.
Faire un don