Why React!?? Next.jsそしてReactを改めてイチから選ぶ

2025/09/30：Next.js vs Nuxt それぞれの良さを知る Frontend Night

Transcript

1. Why React!?? Next.jsそしてReactを改めてイチから選ぶ 2025/09/30：Next.js vs Nuxt それぞれの良さを知る Frontend Night ypresto (@yuya_presto)
2. ypresto © LayerX Inc. LayerX バクラク事業部 (2024-01〜) プロダクト開発部 債権債務チーム Software Engineer "フロントエンド" をよりよくしてます next-navigation-guard 作りました 採用サイトも見てください！ 2
3. バクラクのフロントエンドスタック © LayerX Inc. 3
4. NuxtというかVueアプリの課題 → アプリ自体の設計改善を含め、 リライトの機運 © LayerX Inc. Vue 2→3 へのアップデートをしたものの... bootstrap-vue の更新停止と不具合 Vue 2 の書き方 ( defineComponent() ) が残っている 4
5. Why React!?? バトル: React を選ぶ理由 → 「課題在外性」 の認知負荷を減らすことができそう © LayerX Inc. React HooksのSimpleな設計と記述 純粋関数＋immutableな状態 豊富でアクティブな定番ライブラリ react-hook-form, apollo, react-query, radix-ui, MUI, zustand, ... ツールチェインからのファーストクラスサポート (JSX、関数コンポーネント) TypeScript, ESLint, Prettier, Biome, ... 5
6. React Hooks: VirtualDOM = f(props, hooks) リアクティブのない世界では、状態と描画内容の同期が発生 状態やボタンが増えると、ハンドラが複雑になるおそれがある © LayerX Inc. 6
7. React Hooks: VirtualDOM = f(props, hooks) コンポーネント全体を純粋関数のように扱うことで、挙動と記述がシンプルに 詳解Reactive記事 © LayerX Inc. 7
8. Next.js の役割：最適化 © LayerX Inc. ページ遷移の高速化 Client-Side Transition ( <Link> 、戻る・進む) Prefetching ページ配信の高速化 (HTMLを事前描画、キャッシュ) SSG & ISR (静的) SSR (動的) → Core Web Vitalsが改善 SEOにも有利 8
9. 従来のSPAが動的なページを描画するまでのプロセス © LayerX Inc. 9
10. Next.jsが描画するまでのプロセス (SSRの場合) © LayerX Inc. 10
11. App Routerでの透過的な配信最適化 © LayerX Inc. Server Components サポート staticな部分は、HTMLだけ返す JavaScriptバンドルにコンポーネントを含めない Partial Prerendering (β) staticな部分を事前ビルド Streaming 途中でデータ取得が混じっているとき、その部分だけを非同期に描画 11
12. Next.js の役割：統合 → 自前で整備せず、フレームワークを頼った方が効率的 (Zero Config) © LayerX Inc. ルーティング app/foo/page.tsx → https://example.com/foo サーバサイドロジック Pages Router: getServerSideProps() , getStaticProps() App Router: Server Components / Server Functions ( async function foo() { "use server"; ... } ) API Routes api/baz.ts アセットの最適化とHMR webpack/Turbopack や SWC: CSS対応、minify、Tree Shaking, ... next/image , next/font 12
13. Next.js を選ぶ理由 © LayerX Inc. Reactアプリに必要なパターンや設定の提供 透過的なパフォーマンス最適化 これらがZero Config 13
14. ただしクセもある © LayerX Inc. Historyを上書きしていて、イベント介入もできない (next-navigation-guardの誕生) サーバ側で fetch() を上書きしてcache管理機能をつけていたり webpackの設定がブラックボックス 14
15. まとめ：今React + Next.jsを選ぶ理由 © LayerX Inc. React リアクティビティのシンプルさ 豊富でアクティブな定番ライブラリ エコシステムからのファーストクラスサポート Next.js Reactアプリに必要なパターンや設定の提供 透過的なパフォーマンス最適化 Zero Config 使ってる人が多い → 情報の多さ 15
16. React + Next.js Rocks. © LayerX Inc. 16