プログラムによるルーティング

CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 35/47。

<Link> はユーザーが*選択する*ナビゲーションをカバーします。しかし、時にはアプリ側がナビゲーションを決定することもあります。例えば、フォームの送信後、ログインの成功後、あるいは事前に処理を行う必要があるボタンのクリック後などです。

それらについては、コードから useRouter を使ってナビゲートします：

'use client';

import { useRouter } from 'next/navigation';

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

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

ルーターオブジェクトには以下が含まれます：

router.push(url): そのURLに移動し、履歴に追加します
router.replace(url): 現在のエントリを置き換えて移動します（戻ることはできません）
router.back(): 1つ前のページに戻ります
router.refresh(): 現在のルートのサーバーレンダリングを再実行します

覚える価値のある2つのルールがあります。1つ目は、useRouter は古い next/router からではなく、next/navigation からインポートすること。2つ目は、これはフックであるため、'use client' が必要になることです。

通常のリンクで十分な場合は、リンクを使用してください。本物の <a> であるため、キーボード、スクリーンリーダー、中クリックでも動作します。router.push は、ナビゲーションがそれ自体ではなく、何らかの結果として行われる場合に使用してください。

チャレンジ

簡単

ホームページには何も動作しない "Order now" ボタンがあります。これが遷移するように修正してください。

components/OrderButton.jsx 内で、useRouter() を使用してルーターを取得します。
クリック時に、router.push を使用してユーザーを /menu に遷移させます。

ボタンの id="order-btn" は変更しないでください。テストがこれをクリックします。

自分で試してみよう

import './globals.css';

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

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