Next.jsと同じドメインで異なるフレームワークを使っているときの注意

パスベースのルーティングで、一部はNext.js、一部はVue、一部はRails…といった感じで異なるWebフレームワークが同じドメインの中で混在するときの注意点です。

Next.jsから、Next.jsじゃないページへのリンクには <Link> を使わない

これだけです。

何が起こるのか？

next/link が提供する <Link> コンポーネントで、Next.jsじゃない例えばRailsのページへリンクを作ったとします。このリンクをクリックすると、Next.jsは fetch で遷移先のコンテンツを取得しようとします。

しかし、遷移先のRailsページはAjax的に fetch されたとしても単なるHTMLコンテンツを返すだけです（実装方法によってはエラー）。Next.jsではパフォーマンスのために遷移時にHTMLを部分的に書き換える挙動をします。いわゆるSoft Navigationと言われるもので、RailsだとTurboですし、SPA的な体験を得られます。

話を元に戻すと、Next.jsは fetch で遷移先コンテンツを取得しますが、レスポンス内容からHTMLの書き換えはできないと判断し、通常のHard Navigationに切り替えます。

つまり、リンクをクリックすると 2回、遷移先にリクエストします。はっきり言って無駄なリクエストです。さらにHTMLだけでなくアセットのリクエストもするので余計に遅くなります。

ドメインが異なる外部リンクの場合は、このような問題は発生しません。

対応方法

ということで、同じドメインの中で、遷移先がNext.jsじゃない場合は <Link> ではなく <a> を使うようにしましょう。

ちなみに、 <Link> コンポーネントに限らず useRouter の router.push() の遷移も同様です。こちらは location.href という古のやり方で遷移させると良いでしょう。

<a> タグを使わずに、<Link> コンポーネントの onNavigate を使うことで、パスに応じて遷移を横取りして処理する方法もあります。

<Link onNavigate={(e) => {
  if (path === '/not-nextjs') {
    e.preventDefault();
    location.href = path;
  }
}} />

useRouter は現時点では遷移ステータスを取得したりインターセプトする方法がないので、個別対応するしかなさそうです