Recap: Routing

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

Challenge

Medium

Chapter recap: turn a one-page app into a small site, using everything from this chapter.

Create app/about/page.jsx. Default-export a component that returns an <h1> with id="about-title" and the exact text About us.
In app/page.jsx, import Link from next/link and add a link to /about with id="to-about".
Create the dynamic route app/menu/[slug]/page.jsx: an async component that awaits params and renders the matched slug inside an <h1> with id="dish".

The tests click your link, then visit two different dishes and expect two different headings.

Try it yourself

import './globals.css';

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

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