Linkコンポーネント

ウェブサイトのページ間をリンクする場合、<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以降ではこれは必須ではありません。

動作するか確認してみましょう。各ページにリンクが追加され、行き来できるようになっているはずです