Next.js は、React 上に構築された人気のオープンソース フレームワークで、開発者がサーバー レンダリングの React アプリケーションを構築できるように設計されています。その強力な機能の 1 つは、組み込みの next/link コンポーネントのおかげで、ページ全体のリロードをトリガーせずに、ページ間のクライアント側の遷移を作成できることです。この記事では、小さな Next.js アプリケーションを構築して next/link の使用方法を学びます。
次/リンクとは何ですか?
の 次へ/リンク は、Next.js アプリケーションのページ間のリンクを作成できる React コンポーネントです。通常のHTMLアンカータグとは異なり、 次へ/リンク ユーザーがリンクをクリックしたときにページ全体のリロードはトリガーされません。代わりに、クライアント側のナビゲーションを使用して、アプリケーションの現在の状態を維持しながら新しいページを読み込みます。これは、アプリケーションがより高速になり、ユーザーへの応答性が向上することを意味します。
構文： 使用するための構文 リンク は簡単です。からコンポーネントをインポートできます。 次へ/リンク モジュール:
// Import import Link from 'next/link'; // Link component New Page>
次に、JSX コードで Link コンポーネントを使用して、別のページへのリンクを作成できます。の href prop には、リンク先のページの URL と、その子要素を指定します。 リンク コンポーネントはリンクのコンテンツです。
Spring Boot の注釈
NextJS アプリケーションを作成します。 ターミナルまたはコマンド プロンプトを開き、次のコマンドを実行します
npx create-next-app next-link>
アプリ/プロジェクト ディレクトリに移動します。
cd next-link>
プロジェクトの構造:
NextJs 次へ/リンク
「next/link」の基本的な使い方: この例では、2 つのページを持つ単純な Next.js アプリケーションを作成します。 家 そして について 。我々は使用するだろう 次へ/リンク ページ間にリンクを作成します。
という名前の新しいディレクトリを作成します。 ページ プロジェクトのルートにあります。ここに Next.js ページを保存します。という名前の新しいファイルを作成します インデックス.js の中で ページ ディレクトリ。これは、 家 アプリケーションのページ。次のコードを追加します インデックス.js:
コアJava
ファイル名:index.js
JavaScript
import Link from>'next/link'>;> > export>default> function> Home() {> >return> (> >> >> >>
> >{posts.map(post =>(> >>> >))}> >>> >> >);> }> |
>
>
次のコマンドを使用して開発サーバーを実行します。
CSSで太字にする
npm run dev>
Web ブラウザを開いて、次の場所に移動します。 http://ローカルホスト:3000 。をご覧ください。 家 アプリケーションのページに次のリストが表示されます ブログ 投稿。いずれかのリンクをクリックして、個々の投稿ページに移動します。をご覧ください。 ブログ 対応するものを投稿してください ナメクジ URLにあります。
出力：
NextJs 次へ/リンク
この例では、次の使用方法を示しました。 次へ/リンク 動的ルーティングを使用します。個人向けに新しいページテンプレートを作成しました ブログ 投稿と使用 リンク 個々の投稿ページへのリンクを作成します。私たちも使用しました useRouter からのフック 次へ/ルーター にアクセスするには ナメクジ URL からパラメータを取得し、対応するパラメータを表示します ブログ 役職。
結論は、 次へ/リンク は、Next.js アプリケーションのナビゲーションを簡素化し、高速で応答性の高いクライアント側レンダリングを可能にする強力なツールです。その単純な構文と使いやすさにより、ページ間のリンクと動的ルーティングを作成するための開発者の間で人気の選択肢となっています。