フロントエンドのフレームワークとツールの動き(2025)
一言まとめ
Next.js 16 の Cache Components と Turbopack 既定化、Tailwind CSS v4 の CSS-first 設定、Vite 6 の Environment API、Biome 2 の型認識 lint、React Router v7 / SvelteKit / Nuxt 4 の変化と、CMS・認証・決済・コメントの選択肢。
目次 6 sections
調査時点: 2026-04。version は当時のもの。Astro は Astro 5 の主な機能と注意点 に分けた。
Next.js は React、SvelteKit は Svelte、Nuxt は Vue を基盤にする Web アプリ開発フレームワーク。React Router は React の画面遷移を扱うライブラリで、フレームワークとして使うモードも持つ。
フレームワーク
| フレームワーク | 変化 |
|---|---|
| Next.js 15(2024) | Turbopack dev 安定化、React 19、PPR(incremental)、unstable_after() |
| Next.js 16(2025-10-21) | Cache Components("use cache" で PPR 完成、キャッシュ opt-in 化)、Turbopack 既定化・安定化(ビルド 2〜5 倍、Fast Refresh 10 倍)、React Compiler 安定化、React 19.2(View Transitions・useEffectEvent・<Activity>)、DevTools MCP、next lint 削除、middleware.ts → proxy.ts |
| SvelteKit(2025) | Remote Functions(.remote.ts)、OpenTelemetry traces 内蔵 |
| Nuxt 4 | Web Request API opt-in |
| React Router v7(Remix 統合) | middleware、プログレッシブエンハンスメント、React Server Components |
| MCP サーバー | Angular・Astro・Next.js・Nuxt・Svelte・TanStack Start が 2025 中にリリース |
インフラ企業によるフレームワーク買収(Cloudflare → Astro、Vercel → NuxtLabs、Anthropic → Bun)は二次情報で、公式プレスは未確認のまま。
CSS・ビルドツール
- Tailwind CSS v4(2025-01-22):
tailwind.config.js廃止、CSS の@themeで設定。Lightning CSS 内蔵でフルビルド 3.78 倍、インクリメンタル 8.8 倍。Container Queries を組み込み、OKLCH パレット(P3)、@tailwindcss/vite。v3 向けサードパーティプラグインが未対応の場合あり。 - Vite 6(2024-11-26): 実験的 Environment API(Cloudflare Workers・Node.js など複数ターゲット)。週間 npm DL は 7.5M → 17M。
- Biome 2.0(2025-06): プラグインと型認識 lint。1 万行モノレポの lint が約 200ms(ESLint は 3〜5 秒)。
CMS
- ヘッドレス: Sanity(GROQ・Portable Text・Visual Editing の Stega エンコーディング)、Contentful(GraphQL、エンタープライズ)、Payload CMS(OSS・TS ネイティブ・セルフホスト)、Storyblok(Visual Editor)。Payload の Figma 買収は二次情報のみ。
- Git ベース: Keystatic(Thinkmill、GitHub 同期、Astro 公式統合)、TinaCMS(Git + ビジュアル編集)、Decap CMS(旧 Netlify CMS)。
認証・決済・コメント
- Passkeys / WebAuthn: W3C WebAuthn Level 3 WD は 2025-01 公開。Better Auth v1.0(OAuth / 2FA / passkey / Organization のプラグイン構成、Cloudflare Workers・Vercel Edge 対応)、Auth.js v5(NextAuth の後継、passkey・Edge 対応)、Clerk(マネージド passkey、Next.js 公式統合)。
- 決済: Stripe(最多採用)、Polar.sh(開発者向け OSS)、Lemon Squeezy / Paddle(Merchant of Record で税務代行。Paddle は 5% + $0.50 / トランザクション)。
- コメント: Giscus(GitHub Discussions、無料・広告なし・OSS、Utterances の後継)、Utterances(GitHub Issues)。
関連
更新履歴
- 2026-04-19: 初版(ローカル調査ノート)
- 2026-10-17: Wiki へ移植、概念ページとして再構成。冒頭に定義を追加
出典
- https://nextjs.org/blog/next-15
- https://nextjs.org/blog/next-16
- https://tailwindcss.com/blog/tailwindcss-v4
- https://vite.dev/blog/announcing-vite6
- https://github.com/biomejs/biome
- https://www.netlify.com/blog/web-frameworks-2025-year-in-review/
- https://docs.astro.build/en/guides/cms/keystatic/
- https://github.com/giscus/giscus
同じトピック — Web
- 単一画面の Canvas ツールのスタック選定(vanilla TS / Svelte / Preact と PWA ツーリング)
- DAM カラオケ検索(clubdam)の挙動と制約
- Core Web Vitals と画像最適化
- favicon の最小構成(SVG + ICO + apple-touch-icon + manifest)
- HTML-in-Canvas API
- HTML-in-Canvas の実現性(a11y・性能・セットアップ・シェーダー)
- iOS Safari で canvas の画像を保存させる(download 属性 / Web Share / 長押し)
- 日本語 Web フォントのライセンスとサブセット化
- 個人サイトのライブウィジェットと外部 API の制限
- モダン CSS / Web API の対応状況(2025-2026)
- OPFS(Origin Private File System)
- Google Places API のキーの守り方(ブラウザ露出 vs サーバ中継)
- iOS の PWA 制限
- 機能別 React / TS ライブラリ対応表(2026-04 時点)
- URL 長の上限と日本語の URL エンコード膨張
- 書き出すテキストファイルの UTF-8 BOM と Markdown 継続行
- 縦書き Web の実装(writing-mode・ルビ・圏点・縦中横・禁則)
- PWA の Web Share Target(Android)の実測と落とし穴
- WebAssembly(Wasm)
- YouTube oEmbed で動画タイトルとチャンネル名を取る