Navigate Between Pagesを読む
1ページ目
アプリにページ遷移を追加する
ルーティングで新しいページを追加する
Linkコンポーネント
コード分割とプリフェッチ
2ページ目
前回ダウンロード済みなのでOK
3ページ目
Next.js ではページは pages に入る
pages/index.js は / ルート
pages/posts/first-post.js は /posts/first-post にしてみる
コンポーネントには任意の名前をつけられるが、デフォルトエクスポートする必要がある
4ページ目
Link コンポーネントを使う
import Link from 'next/link'; をファイルの一番上に書く
<Link href="/">Back to home</Link> みたいに書く
5ページ目
Devtool で html 要素に background: yellow; を設定する
ページ遷移する
背景色は変わらず黄色のまま
-> ブラウザーがページ全体をロードしておらず、クライアント側のナビゲーションが機能している
Link コンポーネントではなく、普通の a 要素でリンクを書くとページ全体をロードすることになり、背景色は変わる
コード分割により必要な箇所だけロードしてくれる
表示が速くなる