💡
[Next.js] Linkコンポーネントの基本的な使い方
Next.jsのLinkコンポーネントは、クライアントサイドでのページ遷移を簡単に実現できる機能です。以下に基本的な使い方をまとめます。
1. Linkコンポーネントのインポート
まずはじめに、Linkコンポーネントをインポートします。
import Link from 'next/link';
2. Linkコンポーネントの使用
Linkコンポーネントを使って、ページ遷移を行いたい場所に記述します。href属性に遷移先のパスを指定します。
<Link href="/about">
<a>Aboutページへ</a>
</Link>
ここで、<a>タグを使ってテキストや画像などをクリック可能なリンクとして設定しています。
3. 動的なルーティング
Next.jsでは、動的なルーティングもサポートしています。例えば、[id].jsのようなファイル名でページを作成することで、id部分が動的に変更されるページ遷移が可能です。
<Link href={`/post/${postId}`}>
<a>投稿 {postId} を見る</a>
</Link>
4. クエリパラメータの追加
リンク先にクエリパラメータを追加することもできます。
<Link href={`/search?keyword=${keyword}`}>
<a>検索結果を見る</a>
</Link>
まとめ
Next.jsのLinkコンポーネントは、クライアントサイドでのページ遷移を簡単に実現できる便利な機能です。適切にインポートして、href属性を指定することで、簡単にページ遷移が可能になります。動的ルーティングやクエリパラメータの追加も簡単に行うことができます。
Discussion