Recap: Layouts

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

Challenge

Medium

Chapter recap: give Coddy Eats its shell: a shared nav and real tab titles.

In app/layout.jsx, inside <body> and above {children}, add a <nav> with id="nav" holding a <Link> to / with id="home-link" and the text Home, and a <Link> to /menu with id="menu-link" and the text Menu.
Still in the layout, change the metadata title to exactly Coddy Eats.
In app/menu/page.jsx, export a metadata object with the title Our Menu, so the menu tab names itself.

The tests read the tab title on both pages and check the nav is still there after moving to /menu.

Try it yourself

import './globals.css';
import Link from 'next/link';

export const metadata = {
    title: 'My App',
};

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

All lessons in Next.js Essentials

1Why Next.js

What Next.js Adds The App Folder Your First Page Recap: Why Next.js

4Server & Client

Two Kinds of Component Reading the Error The 'use client' Line Keep Client Parts Small Server Inside Client Recap: Server & Client

7Client Navigation

The Active Link Programmatic Routing Filtering with the URL Route Handlers Recap: Navigation

3Layouts & Metadata

The Root Layout Shared Navigation Nested Layouts Page Metadata Dynamic MetadataRecap: Layouts

6Server Actions

What Is a Server Action Forms That Act Reading Form Data Refreshing the Page Recap: Server Actions