Page Metadata

Part of the Next.js Essentials section of Coddy's React journey — lesson 14 of 47.

The browser tab, the bookmark, the Google result, the link preview in a chat: all of them read the page's <title> and <meta> tags. You never write those tags by hand in Next.js.

Instead, a page or layout exports an object called metadata:

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

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

The name matters: it must be exactly metadata, exported from the route file. Next.js reads it while rendering and writes the head for you.

Metadata merges down the tree, in the same outside-in order as layouts: the root layout sets defaults, and any page can override them. A page with no metadata export simply inherits whatever the layout set, which is why every page so far has been called after your root layout.

Challenge

Beginner

Right now every tab of Coddy Eats says Coddy Eats, because that's what the root layout sets. The menu page deserves its own.

In app/menu/page.jsx, above the component, export a metadata object.
Give it a title of exactly Our Menu.

The tests read the document title on /, then navigate to /menu and read it again.

Try it yourself

import './globals.css';

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

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