mofmofでは毎週金曜日の昼に開発手法やトレンドの技術、案件の困りごとなどについて雑談をするテックトークの時間を設けています！
今回は、「Next.jsを使わない場合の技術選定」というテーマ。
Web開発の現場ではデファクトスタンダードとなりつつあるNext.jsですが、あえてそれ以外を選ぶなら何があるのか？それぞれのメリット・デメリットは？といった議論を行いました。
Next.js以外の選択肢を洗い出す
- 「実際の案件だと、まずSSR（サーバーサイドレンダリング）が必要かどうかが大きな分かれ目になりますね」
- 「Remix、Angular、Nuxt、Adonis、Redwood...意外と選択肢があります」
- 「TanStack Startも最近話題ですが、まだRC（リリース候補）版というステータスですね」
まずは「Next.js以外でフロントエンド開発を行う場合の選択肢」についてのブレインストーミング。
議論の軸となったのは、やはりSSR（サーバーサイドレンダリング）やRSC（React Server Components）への対応です。
挙がった候補としては、Remix、Angular、Nuxt、AdonisJS、RedwoodJSなどがありました。特にRedwoodJSについては、以前はSSR非対応でしたが、現在は実験的にRSCやSSRをサポートし始めているという情報も共有されました。
また、最近注目されている「TanStack Start」についても言及がありました。Next.jsがサーバーコンポーネントを主軸に置いているのに対し、TanStack Startは「クライアントファースト」を掲げつつ、必要な部分だけサーバーに処理を委譲するという思想を持っています。ただし、現時点ではまだバージョン1.0のRC版であり、実案件での採用には慎重な判断が必要そうです。
なぜNext.jsが選ばれるのか？
- 「Vercelにデプロイする場合、Next.jsは何も考えなくても最適化されるので本当に楽」
- 「画像の最適化やISR（インクリメンタル静的再生成）を簡単に実現できるのは、選定理由として非常に大きい」
- 「Reactエコシステムに乗っかる以上、Next.jsが第一候補になるのは自然な流れかも」
他のフレームワークと比較することで、逆に「なぜNext.jsがこれほど選ばれているのか」という理由が浮き彫りになりました。
最大の要因として挙げられたのは、Vercelとの親和性です。Vercelにデプロイするだけで、画像の最適化やISRといった高度な機能が設定なしで利用できる点は、開発工数の削減において圧倒的なメリットとなります。AWS環境で同様のことを実現しようとすると「OpenNext」のようなミドルウェアを挟む必要があり、構成が複雑になりがちです。
また、TanStack Startの公式サイトにある比較表を見ても、Next.jsを選ぶ理由として「Vercelへのデプロイの容易さ」や「RSCを最大限に活用した開発」が挙げられており、これらは現時点での強力な優位性であると再認識しました。
Vue.js (Nuxt) という選択肢
- 「Nuxt（SFC）はHTML、CSS、JSが1つのファイルにまとまっていて、直感的に書きやすいですね」
- 「React（Next.js）のようにファイルを細かく分割する構成よりも、Nuxtの方がシンプルで好き」
- 「軽量なものや、スピード重視で開発するなら、Nuxtの方が向いているケースも全然ありそう」
Reactエコシステム以外の選択肢として、Vue.jsベースのフレームワークである「Nuxt」についても議論が盛り上がりました。
あるメンバーは、Next.js（React）と比較して、Nuxt（Vue）の「単一ファイルコンポーネント（SFC）」の書きやすさを評価していました。Next.jsではコンポーネントやスタイルを細かく分割して管理する文化が強い一方、Nuxtでは1つのファイルに構造・スタイル・ロジックをまとめて記述することが許容されており、これが「簡単で分かりやすい」と感じるエンジニアも多いようです。
大規模で複雑なアプリケーションではReactの厳密な設計が活きてきますが、小規模な案件やプロトタイプ作成など、スピード感を重視する場合には、Nuxtのシンプルさが大きな武器になる可能性があるという結論に至りました。
まとめ
今回のテックトークでは、Next.js以外の選択肢を探ることで、逆に現在のWeb開発における技術選定の基準が見えてきました。
- Next.jsの強み: Vercelとの連携によるデプロイの容易さ、画像最適化、ISRなどの機能が強力。Reactエコシステムの中心。
- TanStack Start: クライアントファーストなアプローチが魅力だが、まだ発展途上（RC版）。
- Nuxt (Vue.js): ファイル構成がシンプルで直感的。小規模・高速開発において有力な選択肢。
- 技術選定の視点: 「流行っているから」だけでなく、デプロイ環境、SSRの必要性、開発チームの好みやプロジェクトの規模感に合わせて適切な道具を選ぶことが重要。
