Nested Routes

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

Now do it. Adding a page to a Next.js app is two moves: make a folder, put a page.jsx in it.

// app/about/page.jsx   ->  /about
export default function About() {
    return <h1>About us</h1>;
}

That's the whole file. No route table to update, no import anywhere else, nothing to restart. The component is ordinary React. The only thing that turned it into a URL was where you saved it.

Two details worth locking in:

It must be a default export: that's how Next.js picks the page component out of the file.
The component's name is yours. About, AboutPage, Whatever: the URL comes from the folder, never from the function.

Want /about/team as well? Make app/about/team/ and drop another page.jsx in there. The pattern doesn't change as the site grows, which is the point.

Challenge

Beginner

The app has a home page. Give it an about page.

Create the file app/about/page.jsx.
Default-export a component from it.
It must return an <h1> with id="about-title" and the exact text About us.

Leave app/page.jsx alone: the tests visit both URLs.

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>
    );
}