大規模メディアでのHono実運用 ～「現代ビジネス」でのNext.jsからの移行～ by 矢口 裕也 / Yuya Yaguchi

講談社「現代ビジネス」では、全ページをHonoによるMPA (Multi-Page Application) で提供しています。本セッションでは、大規模メディアでのHono実運用の設計指針、Next.jsからの移行理由とプロセス、そこで直面した課題や解決の工夫を紹介します。

特に hono/jsx および hono/jsx/dom (Client Components) を利用して必要な箇所のみクライアントで動的に動作させるHydrationを取り上げます。いわゆるIsland Architectureを採用しており、Honoでの実例は珍しいのではないでしょうか。またなぜこれを採用したか、React / Preactなど他のライブラリと比較して説明します。

さらに、Next.js App Routerからの移行について、RSC (React Server Components) など特徴的な機能をどう移行したか、Reactで書かれたcomponentをHono JSXの互換性を活かして再利用する方法も紹介します。

またNextのようなファイルベースでのルーティングの実装、JS/CSSアセットのビルドと配信、Viteの採用可否など、フレームワークをプロダクトに合わせて構築していく実践知を共有します。

Honoの利用やNext.jsからの移行を検討する方へ参考になる情報をお届けします。