ページのリンク

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

誰も到達できない2つのページは、まだサイトとは言えません。リンクが必要であり、Next.jsには独自のリンク機能があります：

import Link from 'next/link';

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

見た目は <a> のようであり、最終的な HTML でも <a> タグそのものになります。同じ href を持ち、右クリック可能で、スクリーンリーダーや検索エンジンにも読まれます。では、なぜ単に <a href="/about"> と書かないのでしょうか？

通常のリンクにおいてブラウザが何を行うかが理由です。ブラウザは現在のページを破棄し、まったく新しいページを読み込みます。すべてのスクリプトが再ダウンロードされ、React がゼロから起動し、メモリ内のすべてが消去されます：開いているメニュー、入力途中のフォーム、カート内の商品などです。

Link はクリックをインターセプトし、実際に異なる画面の領域のみを置き換えます。アプリは決して再起動しないため、状態は維持され、新しいページが即座に表示されます。

<a href>: フルリロード、アプリが再起動、状態は失われる
<Link href>: 同じ URL、HTML 内では同じ <a>、リロードなし

ルールはシンプルです。アプリ内では常に Link を使用します。通常の <a> はサイトから離れるリンク用に取っておきます。

チャレンジ

簡単

2つのページは存在しますが、相互に行き来する方法がありません。Link を使用して相互にリンクを設定しましょう。

両方のファイルで、next/link から Link を import します。
app/page.jsx で、id="to-about" を指定して /about へのリンクを追加します。
app/about/page.jsx で、id="to-home" を指定して / へのリンクを追加します。

リンクのテキストは自由です。テストでは各リンクをクリックして、正しいページに到達したかを確認します。

自分で試してみよう

import './globals.css';

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

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