リンクコンポーネント

Web サイトのページ間をリンクする場合、<a> HTML タグを使用します。

Next.js では、Link コンポーネント next/link を使用して、アプリケーション内のページ間をリンクできます。 <Link> を使用すると、クライアントサイドナビゲーションを実行でき、ナビゲーションの動作をより詳細に制御できる プロパティ を受け入れることができます。

<Link> の使用

まず、pages/index.js を開き、next/link から Link コンポーネントをインポートします。そのためには、先頭に次の行を追加します。

import Link from 'next/link';

次に、次のような h1 タグを見つけます。

<h1 className={styles.title}>
  Learn <a href="https://nextjs.dokyumento.jp">Next.js!</a>
</h1>

そして、それを次のように変更します。

<h1 className={styles.title}>
  Read <Link href="/posts/first-post">this page!</Link>
</h1>

次に、pages/posts/first-post.js を開き、その内容を次のように置き換えます。

import Link from 'next/link';

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">Back to home</Link>
      </h2>
    </>
  );
}

ご覧のとおり、Link コンポーネントは <a> タグを使用するのと似ていますが、<a href="…"> の代わりに <Link href="…"> を使用します。

**注:** Next.js 12.2 より前では、Link コンポーネントが <a> タグをラップする必要がありましたが、バージョン 12.2 以降ではこれは不要になりました。

動作するかどうかを確認してみましょう。これで各ページにリンクが表示され、行き来できるようになります。