Enlaces entre páginas

Parte de la sección Esenciales de Next.js del Journey de React de Coddy — lección 7 de 47.

Dos páginas a las que nadie puede acceder aún no forman un sitio. Necesitas enlaces, y Next.js tiene los suyos propios:

import Link from 'next/link';

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

Se ve como un <a>, y en el HTML final es uno: el mismo href, se puede hacer clic derecho sobre él, y es legible por lectores de pantalla y motores de búsqueda. Entonces, ¿por qué no solo escribir <a href="/about">?

Debido a lo que hace un navegador con un enlace normal: desecha la página actual y carga una completamente nueva. Cada script se vuelve a descargar, React se inicia desde cero y todo lo que está en memoria desaparece: el menú abierto, el formulario a medio llenar, los artículos en el carrito.

Link intercepta el clic y cambia solo la parte de la pantalla que realmente difiere. La aplicación nunca se reinicia, por lo que el estado se conserva y la nueva página aparece de forma instantánea.

<a href>: recarga completa, la aplicación se reinicia, se pierde el estado
<Link href>: misma URL, mismo <a> en el HTML, sin recarga

La regla es simple: dentro de tu app, usa siempre Link. Reserva <a> simple para los enlaces que salen de tu sitio.

Desafío

Fácil

Las dos páginas existen pero no hay forma de navegar entre ellas. Conéctalas con Link.

En ambos archivos, importa Link desde next/link.
En app/page.jsx, añade un enlace a /about con id="to-about".
En app/about/page.jsx, añade un enlace de regreso a / con id="to-home".

El texto del enlace depende de ti. Las pruebas harán clic en cada enlace y verificarán que hayas llegado a la página correcta.

Pruébalo tú mismo

import './globals.css';

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

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