Roteamento Programático

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

<Link> cobre a navegação que o usuário escolhe. Mas às vezes o aplicativo decide: após o envio de um formulário, após um login bem-sucedido, após o clique em um botão que tem trabalho a fazer primeiro.

Para esses casos, você navega através do código com o useRouter:

'use client';

import { useRouter } from 'next/navigation';

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

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

O objeto router oferece:

router.push(url): navega até lá e adiciona ao histórico
router.replace(url): navega até lá, substituindo a entrada atual (sem opção de voltar para ela)
router.back(): volta um passo
router.refresh(): executa novamente a renderização no servidor da rota atual

Duas regras que valem a pena lembrar. Primeiro, useRouter vem de next/navigation, e não do antigo next/router. Segundo, ele é um hook, portanto precisa de 'use client'.

Quando um link comum for suficiente, use um link: é um <a> de verdade, então funciona com teclados, leitores de tela e clique com o botão do meio. Recorra ao router.push quando a navegação for uma consequência de algo, não a coisa em si.

Desafio

Fácil

A página inicial tem um botão "Order now" que não faz nada. Faça ele navegar.

Em components/OrderButton.jsx, obtenha o router com useRouter().
Ao clicar, envie o usuário para /menu com router.push.

Deixe o id="order-btn" do botão como está: os testes clicam nele.

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