Chapter5 Navigating Between Pages

[ShotaroHirose59]

https://nextjs.org/learn/dashboard-app/navigating-between-pages In the previous chapter, you created the dashboard layout and pages. Now, let's add some links to allow users to navigate between the dashboard routes.

Topics

• How to use the next/link component.
• How to show an active link with the usePathname() hook.
• How navigation works in Next.js.

キーワード

• next/link
• usePathname()

[ShotaroHirose59]

Why optimize navigation?

Web標準のaタグではナビゲーションでページ全体が更新される。 Next.jsのLinkコンポーネントを使うとクライアントサイドナビゲーションが可能になり、ページ全体を更新する必要がなくなる

Automatic code-splitting and prefetching

Next.jsではナビゲーション体験の向上を狙っている

• 従来のSPA: ブラウザが初期ロード時にすべてのアプリケーションコードをロードする
• Next.js: ルートセグメントごとにアプリケーションを自動的にコード分割
  • ページが分離されるということ。あるページがエラーを投げても、アプリケーションの残りの部分は動作する。
  • 本番環境では、コンポーネントがブラウザのビューポートに表示されるたびに、Next.jsはバックグラウンドでリンクされたルートのコードを自動的にプリフェッチする →ユーザーがリンクをクリックするころには、リンク先ページのコードはすでにバックグラウンドで読み込まれている！

あとで見る How Routing and Navigation Works

[ShotaroHirose59]

Pattern: Showing active links

usePathname()フックで現在のURLのPathを取得できる URLのpathが/dashboard/invoicesページであれば/dashboard/invoicesを取得される

[ShotaroHirose59]

more

useParams

• オブジェクトの各プロパティは、アクティブな動的セグメント
• プロパティ名はセグメント名で、プロパティ値はセグメントを埋めるもの
• プロパティの値は、動的セグメントのタイプによって、文字列か 文字列の配列になる
• ルートに動的パラメータが含まれていない場合、useParamsは空のオブジェクトを返す