Next.js 15の新機能――ルーティングとキャッシュの制御の変更を中心に解説

Next.jsがApp Routerの"次"に目指すもの 第2回

その他の改善点

　さて、Next.js 15には他にも改善点がありますので、簡単に紹介しておきましょう。筆者が特に魅力を感じているのは、Formコンポーネントの追加と、ハイドレーションエラーの改善です。

Formコンポーネントの追加

　<form>要素のaction属性に関数を渡すことでServer Actionを実行する機能は、Reactが持つ機能のひとつです。「action属性に関数を渡す」というインターフェースは一見奇妙ですが、Web標準と異なる形にすることでReact独自の挙動を埋め込みやすくしている側面もあります。

　さて、Server Actionを扱う場合にはReactやApp Routerと連携する余地もあるのですが、Web標準と同様に action属性に文字列を渡した場合は、<form>要素はWeb標準そのままに動作するため、App Router向けの副作用を埋め込んだりすることが困難になっています。

　特に問題になるのが、method="GET"に相当するフォームです。主に画面遷移やパラメータ更新のために使われるGETメソッドのフォームでは、App Routerの画面遷移に関するAPIと密に連携したいところですが、<form>要素のままではprefetchを挟むこともできません。

　そこで、Next.js 15では、App Routerの画面遷移に関するAPIを使いやすくするためのFormコンポーネントが追加されました。リスト4のように使います。

［リスト4］app/form/page.js

import Form from 'next/form'

export default function MyForm() {
  return (
    <div className="container p-10">
      <h1 className="text-2xl font-bold mb-4">Form</h1>
      <Form action="/search">{/* (1) */}
        <input type="text" name="query" className="border p-1 mb-2" />
        <button type="submit">Submit</button>
      </Form>
    </div>
  )
}

　（1）で<Form>コンポーネントを利用していること以外は、特段変わったこともないUIです。実行してhttp://localhost:3000/formにアクセスすると図2のような見た目になります。

図2：Formコンポーネントの使用例

　実はこのとき、<Form>コンポーネントの内部では、action属性に指定されたパスに対してプリフェッチ処理が実行され、画面遷移後に必要になるリソースを事前に取得しています。また、submitボタンを押すと、action属性に指定されたパスに対して、Client Routerによる画面遷移が行われます。プリフェッチが済んでいる場合、画面遷移後の通信はServer Componentの差分のみになるため、高速な画面遷移が期待できます。

　自分で実装しようと思えばできる範囲のものではありますが、公式に実装してもらえていると、開発者にとってはありがたいですね。

　少なくともNext.js 15の時点では、このFormコンポーネントはGETメソッドのフォームに対してのみ有効です。POSTメソッドのフォームに対しては、従来通りの<form>要素を使ってServer Actionsを実行するとよいでしょう。

ハイドレーションエラーの改善

　最後にもうひとつ、地味ですがうれしい改善として、ハイドレーションエラーの改善があります。

　まずは、Reactにおけるハイドレーション（hydration）についておさらいしておきましょう。OGP対応や画面の初期表示の高速化などの文脈から、初期表示の時点でコンテンツを一通り埋め込んだ状態のHTMLをサーバーからブラウザへと配信しておき、後から追いかける形でJavaScriptのロードを行うことがあります。このとき、HTMLによって構築されたDOMツリーと、後からブラウザ上のReactで構築されたツリーを擦り合わせて、DOMツリーをReactの管理下へと掌握する処理をハイドレーションと呼びます。

　ハイドレーションエラーとは、サーバーから配信されたHTMLと、後からReactで構築されたDOMツリーが一致しないことによって発生するエラーのことです。サーバーとクライアントでのコンポーネントの構築方法が異なる場合などに、ハイドレーションエラーが発生しやすくなります。特に新しいUIライブラリを導入してすぐの開発中などは、サーバー側での設定不足などが理由でハイドレーションエラーが発生しやすいです。

　さて、このハイドレーションエラーですが、これまでもざっくりどの辺りで齟齬が起きているのかはエラー画面に表示されていました（図3）。

図3：Next.js 14までの表示（リリースノートより抜粋）

　しかし、これだと「どこ」が原因なのかはわかるものの、「どんな」誤りによってエラーが起きているのかはわからず、原因究明が困難になっていました。

　Next.js 15では、このエラーメッセージが改善され、どんな差分があるのかが表示されるようになりました（図4）。

図4：Next.js 15以降の表示（リリースノートより抜粋）

　差分がしっかりと出ているおかげで、サーバー側とクライアント側のどちらが意図しない挙動をしているのかが一目瞭然になり、原因究明がしやすくなりました。このような地味な改善も、開発体験を向上させるためには欠かせないものですね。

まとめ

　Next.js 15の改善点をかいつまんで解説しました。ユーザーのフィードバックがよく反映された素晴らしいリリースになっていると感じています。特に、キャッシュの挙動が変更されたことで、開発者が意図しない挙動をすることが減り、安心して開発に取り組めるようになったのは大きな進歩だと思います。こういった改善を引き続き進めていくのであれば、Next.jsはますます多くの開発者に支持されるフレームワークになることでしょう。

　さて、Next.js 15の解説としてはここで一区切りですが、Next.jsチームが今後のキャッシュの扱い方をどうしていくのかを発信しており、興味深いものなので、次回はその内容について解説していきたいと思います。