Vinculando Páginas

Parte da seção Essenciais do Next.js do Journey de React da Coddy — lição 7 de 47.

Duas páginas que ninguém consegue acessar ainda não formam um site. Você precisa de links, e o Next.js tem o seu próprio:

import Link from 'next/link';

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

Ele se parece com um <a>, e no HTML final ele é um: mesmo href, permite clique com o botão direito, legível por leitores de tela e mecanismos de busca. Então por que não apenas escrever <a href="/about">?

Por conta do que o navegador faz com um link comum: ele descarta a página atual e carrega uma completamente nova. Todo script é baixado novamente, o React reinicia do zero e tudo na memória é perdido: o menu aberto, o formulário preenchido pela metade, os itens no carrinho.

Link intercepta o clique e substitui apenas a parte da tela que realmente difere. O app nunca é reiniciado, portanto o estado sobrevive e a nova página aparece instantaneamente.

<a href>: recarregamento completo, o app reinicia, o estado é perdido
<Link href>: mesma URL, mesmo <a> no HTML, sem recarregamento

A regra é simples: dentro do seu aplicativo, sempre use Link. Reserve o <a> simples para links que saem do seu site.

Desafio

Fácil

As duas páginas existem, mas não há como navegar entre elas. Conecte-as com Link.

Em ambos os arquivos, importe Link de next/link.
Em app/page.jsx, adicione um link para /about com id="to-about".
Em app/about/page.jsx, adicione um link de volta para / com id="to-home".

O texto do link fica a seu critério. Os testes clicam em cada link e verificam se você chegou à página correta.

Experimente você mesmo

import './globals.css';

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

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