Next.jsにおけるナビゲーションの最適化
メニューを表示するにはスワイプしてください
必要なページがすべて揃ったので、ユーザーがそれらのページ間をどのように移動できるかを見ていきます。従来は、デフォルトのHTMLの <a> タグを使用することが一般的です。しかし、この方法ではページ全体がリロードされてしまい、ユーザー体験に影響を与えます。
Next.js では <Link> コンポーネントの使用が推奨されており、クライアントサイドナビゲーションを実現できます。
注意
クライアントサイドナビゲーションの詳細については、以下のドキュメントを参照してください: docs
または、このままプロジェクトを進めても問題ありません。Link コンポーネントを使用することでより良い方法となることは確かであり、プロジェクト内でその実践的な実装を見ることができます。
プロジェクトに戻る
クライアントサイドナビゲーションを実装するには、app/ui/dashboard/nav-links.tsx にアクセスし、Link から next/link コンポーネントをインポートし、<a> タグを <Link> に置き換えます。
変更を保存した後、ローカルホストでテストし、ページのリフレッシュなしでシームレスなページ遷移を有効化。
実践例
すべて明確でしたか？
フィードバックありがとうございます！
セクション 3. 章 4
AIに質問する
AIに質問する
何でも質問するか、提案された質問の1つを試してチャットを始めてください
セクション 3. 章 4
