Métadonnées de page

Fait partie de la section L'essentiel de Next.js du Journey React de Coddy — leçon 14 sur 47.

L'onglet du navigateur, le marque-page, le résultat Google, l'aperçu du lien dans un chat : tous lisent les balises <title> et <meta> de la page. Vous n'écrivez jamais ces balises à la main dans Next.js.

À la place, une page ou un layout exporte un objet appelé metadata :

// app/menu/page.jsx
export const metadata = {
    title: 'Our Menu',
    description: 'Everything we cook.',
};

export default function Menu() {
    return <h1>Our Menu</h1>;
}

Le nom a son importance : il doit s'agir exactement de metadata, exporté depuis le fichier de route. Next.js le lit pendant le rendu et écrit le head pour vous.

Les métadonnées se fusionnent le long de l'arbre, dans le même ordre de l'extérieur vers l'intérieur que les layouts : le layout racine définit les valeurs par défaut, et n'importe quelle page peut les surcharger. Une page sans metadata `export` hérite simplement de ce que le layout a défini, ce qui explique pourquoi chaque page jusqu'à présent a porté le nom défini par votre layout racine.

Défi

Débutant

Pour l'instant, chaque onglet de Coddy Eats indique Coddy Eats, car c'est ce que définit le layout racine. La page du menu mérite le sien.

Dans app/menu/page.jsx, au-dessus du composant, exportez un objet metadata.
Donnez-lui un title valant exactement Our Menu.

Les tests lisent le titre du document sur /, puis naviguent vers /menu et le lisent à nouveau.

Essayez vous-même

import './globals.css';

export const metadata = {
    title: 'Coddy Eats',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}