Next.jsのLinkとRouterの挙動がよく分からなかったので、Next.jsのコードリーディングをした。ページ遷移やページロードの仕組みが結構つかめたのでメモ。
- LinkではクリックするとsingletonRouterのpushを呼んでいる
- pushはchangeメソッドを呼んでいる
next/next-server/lib/router/router.tschange- pathnameやqueryは、url、つまりLinkのhrefから抽出している
- routeはただpathnameから最後の/を消しただけ
- dynamic routeの場合(
/posts/[id]みたいになっているやつ)なら、hrefとasを比べてパラメータを抜き出して、queryに突っ込んでいる - このへんでgetRouteInfoを使って、routeとかpathnameからコンポーネントを特定しようとしてそう
- getRouteInfoではfetchComponentでrouteからコンポーネントを特定する。routeだけがルーティングに関係ありそう
- RouteInfoが取得できたら、Routerをsetで更新する