Enrutamiento programático

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

<Link> cubre la navegación que el usuario elige. Pero a veces la aplicación decide: después de enviar un formulario, después de que un inicio de sesión tenga éxito, después del clic en un botón que tiene trabajo por hacer primero.

Para esos casos, navegas desde el código con useRouter:

'use client';

import { useRouter } from 'next/navigation';

export default function CheckoutButton() {
    const router = useRouter();

    return (
        <button onClick={() => router.push('/thanks')}>
            Check out
        </button>
    );
}

El objeto router te ofrece:

router.push(url): ir allí y añadirlo al historial
router.replace(url): ir allí, reemplazando la entrada actual (sin posibilidad de volver atrás)
router.back(): un paso hacia atrás
router.refresh(): volver a ejecutar el renderizado del servidor de la ruta actual

Dos reglas que vale la pena recordar. Primero, useRouter proviene de next/navigation, no del antiguo next/router. Segundo, es un hook, por lo que necesita 'use client'.

Cuando un enlace simple sea suficiente, usa un enlace: es un <a> real, por lo que funciona con teclados, lectores de pantalla y clic central. Recurre a router.push cuando la navegación sea una consecuencia de algo, no la acción en sí misma.

Desafío

Fácil

La página de inicio tiene un botón "Order now" que no hace nada. Haz que navegue.

En components/OrderButton.jsx, obtén el router con useRouter().
Al hacer clic, envía al usuario a /menu con router.push.

Deja intacto el id="order-btn" del botón: las pruebas hacen clic en él.

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