Linking Pages

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

Two pages that nobody can reach aren't a site yet. You need links, and Next.js has its own:

import Link from 'next/link';

export default function Home() {
    return (
        <nav>
            <Link href="/about">About</Link>
        </nav>
    );
}

It looks like an <a>, and in the finished HTML it is one: same href, right-clickable, readable by screen readers and search engines. So why not just write <a href="/about">?

Because of what a browser does with a plain link: it throws the current page away and loads a whole new one. Every script re-downloads, React boots from scratch, and everything in memory is gone: the open menu, the half-filled form, the items in the cart.

Link intercepts the click and swaps only the part of the screen that actually differs. The app never restarts, so state survives and the new page appears instantly.

<a href>: full reload, app restarts, state lost
<Link href>: same URL, same <a> in the HTML, no reload

The rule is simple: inside your app, always Link. Save plain <a> for links that leave your site.

Challenge

Easy

The two pages exist but there's no way to walk between them. Wire them up with Link.

In both files, import Link from next/link.
In app/page.jsx, add a link to /about with id="to-about".
In app/about/page.jsx, add a link back to / with id="to-home".

The link text is up to you. The tests click each link and check you landed on the right page.

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