Metadane strony

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 14 z 47.

Karta przeglądarki, zakładka, wynik wyszukiwania Google, podgląd linku na czacie: wszystkie odczytują tagi <title> i <meta> strony. W Next.js nigdy nie zapisujesz tych tagów ręcznie.

Zamiast tego strona lub układ eksportuje obiekt o nazwie metadata:

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

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

Nazwa ma znaczenie: musi być dokładnie taka jak metadata, eksportowana z pliku trasy. Next.js odczytuje ją podczas renderowania i tworzy za Ciebie sekcję head.

Metadane łączą się w dół drzewa, w tej samej kolejności od zewnątrz do wewnątrz co układy: układ główny ustawia wartości domyślne, a każda strona może je nadpisać. Strona bez eksportu metadata po prostu dziedziczy wszystko, co ustawił układ — dlatego wszystkie dotychczasowe strony były wywoływane po układzie głównym.

Wyzwanie

Początkujący

W tej chwili każda karta ma tytuł Coddy Eats, ponieważ taki tytuł ustawia główny układ. Strona menu zasługuje na własny.

W pliku app/menu/page.jsx, nad komponentem, wyeksportuj obiekt metadata.
Ustaw dla niego title o dokładnej wartości Our Menu.

Testy odczytują tytuł dokumentu na stronie /, a następnie przechodzą do /menu i odczytują go ponownie.

Spróbuj swoich sił

import './globals.css';

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

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