React Router と Nextjs

経緯

head タグの中をコンポーネントごとに書き換えるのに react router だと react helmet async というライブラリを使うことになり、Nextjs ではフレームワークに盛り込んであるgenerateMetadataを使うことになる。react router だと外部ライブラリということもあり、いつなくなるかわからないリスクを背負うことになる。

これらを踏まえて下記2つの環境の差分をメモしておく。

• react v18(vite) & react router v6
• nextjs v13 (app router)

Link の違い

react router と Nextjs の Link に大きな違いがある。

react router には state でデータを渡し useLocation で取り出すという伝統芸能があるが nextjs にはない。

メタデータ

冒頭の通り、react router では外部ライブラリを使用し、nextjs ではフレームワークに含まれているものを使う。

static exports

react router では js の範囲を一つの js ファイルにまとめられるが nextjs だと複数のファイルに分割される。リクエスト回数を抑えるという評価軸があるのならば選択肢は react router だけとなる。

フォルダ構成

react router では自分で構成を組み立てることが求められる。nextjs ではapp ディレクトリ以下が強力な独自仕様で固められているのでやっていいこと悪いことが明確なのでテストごとにそれを潰すことになる。

React.Suspense の扱い

react router では throw Promise で機能させることができるが別途コンポーネントが用意されている(Await Component)。nextjs では async Component を作成していた(Parallel Data Fetching)。フレームワーク、ライブラリによって扱いが大きく違うので結構な困りものである。

総括

js ソースを一つに固めてリクエスト回数を減らすという点とフレームワーク組み込みの metaTag マネジメントがトレードオフになっている状態である。