Next.js 13登場、動的なWebサイトの実現を強化。複数ページでの動的データの共有や、ステートを維持した共通ナビゲーションの構築など容易に。Next.js Conf 2022

2022年10月27日

Reactベースのサーバサイドフレームワークとして知られるNext.jsの開発元のVercelは、日本時間10月25日深夜にイベント「Next.js Conf 2022」を開催。Next.jsの最新バージョンとなる「Next.js 13」を発表しました。

Next.js 13

Layouts
React Server Components w/ Streaming
Component-based Data Fetching & Caching
Turbopack: the Rust-based Webpack successor
Improved next/image
@next/fonthttps://t.co/jub9Mdske5
— Vercel (@vercel) October 25, 2022

Next.js 13では動的なWebサイトの実現を容易にするための機能強化が主に行われました。

新しく登場した「appディレクトリ」では、既存のNext.jsのWebページを維持しつつアプリケーションのコードによる動的な要素を追加できるようになります。複数のページで動的なデータを共有することや、ステートを維持しつつ遷移する共通のナビゲーションUIの構築なども容易になりました。

Next.js Conf 2022の基調講演から、Next.js 13に関する説明が行われた部分をまとめました（ただしかなり説明が端折られているので、本文中で括弧を用いて説明を補足しています。もし間違いや勘違いなど発見されたらご指摘ください）。

設定不要で使えるルーターの機能がバージョンアップ

Vercel Senior Developer Advocate Delba Oliveira氏。

Next.jsでもっとも愛されている機能の1つが、フォルダ内にファイルを配置すると、そのままアプリケーションのルートとなるファイルシステムベースのルーターでしょう。

設定は何も必要ありません。

Next.jsのルーターは過去6年間、世界最大のWebアプリケーションのいくつかの表示に使われ、毎日数十億ページビューを表示してきました。

これは私たちが最高のルーターを提供し続けることに役立っています。

動的なデータを複数のページで簡単に共有可能に

（ここまでが「pagesディレクトリ」による従来のルーターの機能の説明。以下からは「appディレクトリ」設置により利用できるNext.js 13で追加された新しいルーティング機能の説明）

われわれは、コンポーネント群内部にデータフェッチを簡単に設置できるようにし、アプリケーション全体を通して共通するレイアウトでのデータフェッチを可能にしました。例えば、複数のページで動的なデータを共有したい場合に有効です。

ルート（routes）に対してアプリケーションのコードを、まるでコンポーネントやスタイルやテストのように簡単に設置できるようにしました。チームが（ルートに対して処理を付加する際の）独自の規約や構成を考えなくても済みます。

（ネスト可能なレイアウトによって）ナビゲーション全体に渡ってステートを維持するような複雑なユーザーインターフェースの設定を容易にしました。（変化する部分だけが描画されるので）処理を重くする再レンダリングやアニメーションの再描画も回避できます。

Next.jsの改善およびReactの数年にわたる並行処理アーキテクチャの改善の組み合わせが、従来のファイルシステムベースのルーターのバージョンアップを可能にし、新しいルーターを実現する機会を与えてくれました。

この新しいルーターは「appディレクトリ」の導入により利用を開始でき、既存の「pagesディレクトリ」によるルーティングと共存できるため、段階的な導入が可能です。

新しいルーティング機能の例

例を見てみましょう。まず（appディレクトリ配下に）1つのファイル「page.js」でホームページを作成します。左側のサイドバーにはユーザーの興味に合わせて「Popular Topics」の動的なリストを表示することにします。

次に、サイドバーの「Popular Topics」のリストからリンクされる個々のページを作成しましょう。このページにはネスト可能なレイアウトとダイナミックルーティングのために、すでにご存じの構文が使われています。

このページには、ホームページで使ったのと同じサイドバーによるナビゲーションを再利用したいと思います。

そこで先ほどのコードをリファクタリングして、両方のページで使われているUIをコンポーネントとしてlayout.jsの中に記述します（layout.jsに記述したUIは共通のナビゲーションUIとして扱われるようです）。

これはコードの再利用だけでなく、画面の変更される部分だけが再描画されるので、クライアントとサーバの両方において再レンダリングが合理化されるのです。

画面が遷移しても、検索フィールドがステートを保持していることや、アニメーションが継続していることもお分かりでしょうか。

シンプルに記述できる新しいデータフェッチAPI

さて、「Popular Topics」のリストはユーザーによってカスタマイズされるため、Webページは静的なページではなく、動的でなくてはなりません。

動的なWebサイトを実現するために、クライアントで大量のJavaScriptを処理することなくサーバからデータをフェッチするにはどうすればよいでしょうか？

私たちはReactコアチームと協力して、ReactとNext.jsでフェッチを簡素化する新しいソリューションを提供します。

これが新しいデータフェッチAPIを使用したサイドバーのデータフェッチコードの例です。非常にシンプルで、コードの中にインラインで使えるのです。

これでホームページとトピックページの共通のユーザーインターフェイスがデータをフェッチし、そのデータを（どのページでも）再利用できるようになります。

ストリーミング中のコンテンツを定義するloading.js

次にトピックページをローディングしているあいだローディング状態を定義するloading.jsを作ります。ここでは、ページ間の遷移時の様子をご覧ください。

コンテンツをストリーミングしているあいだ、即時ローディング状態（Instant Loading State）となり（この状態ではストリーミング中はloading.jsで定義されたローディングアイコンやプリレンダリングされたスケルトやプレースホルダのような何らかのコンテンツが表示され、ストリーミングが終わると、本来のコンテンツに置き換わり）ます。カスタムエラーハンドラのerror.jsによるエラーハンドリングでも同様のことができます。