Métadonnées dynamiques

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

Un objet metadata est une constante, il ne peut donc pas aider une route dynamique : app/dishes/[slug]/page.jsx sert un plat différent à chaque URL, et chacun a besoin de son propre titre.

Pour cela, exportez plutôt une fonction :

export async function generateMetadata({ params }) {
    const { slug } = await params;
    return { title: DISHES[slug].name };
}

Il reçoit les mêmes params que la page reçoit (une promesse, donc vous l'await) et renvoie la même forme que l'objet metadata. Utilisez l'un ou l'autre, jamais les deux dans le même fichier.

Modèles de titre (Title templates)

Répéter le nom du site dans le titre de chaque page devient vite lassant. Un layout peut transmettre un motif au lieu d'une simple chaîne :

// app/layout.jsx
export const metadata = {
    title: {
        default: 'Coddy Eats',
        template: '%s | Coddy Eats',
    },
};

default : le titre pour les pages qui n'en définissent pas
template : le motif pour les pages qui en définissent un ; leur titre est inséré là où se trouve %s

Ainsi, une page renvoyant title: 'Margherita' se retrouve sous la forme Margherita | Coddy Eats dans l'onglet, et la page d'accueil, qui ne définit rien, reste Coddy Eats. Écrivez le branding une seule fois, dans le layout.

Défi

Moyen

Chaque page de plat affiche actuellement Coddy Eats dans l'onglet. Donnez à chacune son propre titre.

Dans app/dishes/[slug]/page.jsx, ajoutez une fonction async exportée appelée generateMetadata qui :

Prend { params } et l'attend (await) pour obtenir slug
Retourne { title: DISHES[slug].name }

app/layout.jsx contient déjà le modèle '%s | Coddy Eats', donc /dishes/margherita devrait avoir pour titre Margherita | Coddy Eats. Jetez un œil au layout : vous n'avez pas besoin de le modifier.

Essayez vous-même

import './globals.css';

export const metadata = {
    title: {
        default: 'Coddy Eats',
        template: '%s | Coddy Eats',
    },
};

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