【Next.js】リンクコンポーネントとは

リンクコンポーネントとは

リンクコンポーネントは、Reactアプリケーション内でのページ間のナビゲーションを容易にするための特別なコンポーネントです。通常、Reactアプリケーションでは、<a>要素を使用してリンクを作成しますが、これは通常のブラウザのナビゲーションをトリガーし、ページ全体を再読み込みしてしまいます。

Next.jsの<Link>コンポーネントは、クライアントサイドのルーティングを実現するためにNext.jsが提供するものであり、通常の<a>要素とは異なります。これにより、ページ間のナビゲーションがよりスムーズになり、ページの再読み込みが行われることなく、Reactアプリケーション内での移動が可能になります。

記述方法

<Link>コンポーネントを使用すると、次のように記述します：

import Link from 'next/link';

const MyComponent = () => (
  <Link href="/about">
    <a>About Page</a>
  </Link>
);

これにより、/aboutへのリンクが作成され、クリックした際にページが再読み込みされずに、クライアントサイドのナビゲーションがトリガーされます。これにより、ユーザーエクスペリエンスが向上し、アプリケーションのパフォーマンスが向上します。