0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

2025年にQiitaで流行した技術スタック30選アドベントカレンダー Next.js

Posted at

2025年にQiitaで流行した技術スタック30選アドベントカレンダー Next.js

はじめに

2025年も終わりに近づき、Next.jsは引き続きReactベースのフルスタックフレームワークとして進化を続けています。本記事では、2025年のNext.jsにおける主要なアップデート、そして開発者コミュニティに大きな影響を与えた出来事について解説します。

Next.js 16の登場

2025年10月、Next.js 16が正式リリースされました。このリリースでは、Turbopack、キャッシング、そしてNext.jsアーキテクチャに関する大幅な改善が行われました。

主要な新機能

1. Cache Components

Cache Componentsは、キャッシングをより明示的かつ柔軟にする新機能群です。"use cache"ディレクティブを使用することで、ページ、コンポーネント、関数をキャッシュでき、コンパイラが自動的にキャッシュキーを生成します。

従来のApp Routerにあった暗黙的なキャッシングとは異なり、Cache Componentsは完全にオプトイン方式となっています。これにより、開発者はキャッシュの制御をより明確に行えるようになりました。

'use cache'

export default async function CachedComponent() {
  // このコンポーネントは自動的にキャッシュされる
  const data = await fetchData()
  return <div>{data}</div>
}

2. Turbopack がデフォルトバンドラーに

Turbopackがすべてのアプリのデフォルトバンドラーとなり、最大5-10倍高速なFast Refreshと、2-5倍高速なビルドを実現しています。

Turbopackは開発環境でファイルシステムキャッシングをサポートするようになり、コンパイラのアーティファクトをディスク上に保存することで、特に大規模プロジェクトにおいて再起動時のコンパイル時間を大幅に短縮します。

3. Next.js DevTools MCP

Next.js 16では、Model Context Protocol統合を備えたNext.js DevTools MCPが導入され、アプリケーションのコンテキストに関する洞察を得ながらAI支援のデバッグが可能になりました。

4. proxy.ts の導入

proxy.tsがmiddleware.tsを置き換え、アプリのネットワーク境界を明示的にします。proxy.tsはNode.jsランタイムで実行されます。

Next.js 15系の継続的な改善

Next.js 15.2の注目ポイント

2025年2月にリリースされたNext.js 15.2では、エラーUIの再設計と改善されたスタックトレース、ストリーミングメタデータ、Turbopackのパフォーマンス改善、実験的なReact View Transitions APIのサポートなどが追加されました。

エラーUIの刷新

エラーメッセージのUIとプレゼンテーションが全面的に見直され、より理解しやすくなりました。エラーメッセージ、関連するコードフレーム、コールスタックなどの核心的な詳細が強調され、ライブラリや依存関係のコードからのノイズが削減されています。

Turbopackのパフォーマンス向上

早期採用者からは、Next.js 15.1と比較してルートアクセス時のコンパイル時間が最大57.6%高速化されたという報告があります。また、開発中のメモリ使用量が30%削減されました。

Next.js 15.5の重要な更新

2025年8月にリリースされたNext.js 15.5では、ベータ版のTurbopackビルド、安定版Node.jsミドルウェア、TypeScriptの改善、next lintコマンドの廃止、そしてNext.js 16に向けた廃止警告が含まれています。

TypeScriptの改善

型付きルートがTurbopackと完全に互換性を持つ新しい実装により、WebpackとTurbopackの両方のビルドで型安全性が提供されます。

import Link from 'next/link'

// ルートパスの完全な型安全性
<Link href="/blog/example-slug?ui=dark">Read Post</Link>

// TypeScriptがコンパイル時に無効なルートを検出
<Link href="/invalid-route">Broken Link</Link> //  型エラー

2025年の重大な脆弱性問題:React2Shell

CVE-2025-55182とCVE-2025-66478

2025年12月初旬、React Server Components(RSC)プロトコルに重大な脆弱性が発見されました。この問題はCVSS 10.0と評価され、パッチが適用されていない環境において、攻撃者が制御するリクエストを処理する際にリモートコード実行を許す可能性があります。

この脆弱性は上流のReact実装(CVE-2025-55182)に起因しています。CVE-2025-66478は、App Routerを使用するNext.jsアプリケーションへの下流の影響を追跡するために割り当てられました。

影響範囲

この欠陥は、不安全なデシリアライゼーションにより、認証されていないリモートコード実行(RCE)をサーバー上で可能にします。脆弱性は影響を受けるアプリケーションのデフォルト設定に存在するため、標準的なデプロイメントが即座にリスクにさらされることを意味します。

Wizのデータによると、クラウド環境の39%に、CVE-2025-55182に対して脆弱なバージョンのNext.jsまたはReactのインスタンスが含まれています。

対応と修正

2025年12月3日に修正がnpmに公開され、CVE-2025-55182として公開開示されました。Vercelをはじめとする主要なホスティングプロバイダーは、即座にWAFルールを展開して保護を提供しました。

開発者は以下のバージョンへのアップグレードが強く推奨されます:

  • Next.js 14.2.35(14.x系)
  • Next.js 15.x系の最新パッチバージョン
  • Next.js 16.x系の最新パッチバージョン

緊急対応ツール

npmパッケージがリリースされ、影響を受けるNext.jsアプリを更新できます。npx fix-react2shell-nextを使用して今すぐ更新するか、GitHubリポジトリで詳細を確認できます。

追加の脆弱性

2025年12月11日、React Server Componentsに2つの追加の脆弱性が特定されました:高深刻度のDoS(CVE-2025-55184、CVSS 7.5)と中深刻度のソースコード露出(CVE-2025-55183、CVSS 5.3)です。

すべてのNext.js 13.x、14.x、15.x、16.xユーザーは直ちにアップグレードすることが推奨されています。

学んだ教訓

今回のセキュリティインシデントから、Next.js開発者コミュニティは以下の重要な教訓を得ました:

  1. 依存関係の定期的な更新:フレームワークとその依存関係を最新の状態に保つことの重要性
  2. セキュリティアラートの監視:公式ブログやGitHubのセキュリティアドバイザリーを定期的にチェック
  3. 多層防御:WAFやCDNレベルでの保護を併用することの有効性
  4. 迅速な対応:脆弱性が公開された際の迅速なパッチ適用の必要性

Next.jsの継続的な成長

2025年のStack Overflowの調査では、Next.jsがウェブフレームワークとテクノロジーの中で4番目に人気があるとランク付けされました。これは、セキュリティ上の課題があったにもかかわらず、Next.jsがモダンウェブ開発において中心的な位置を占め続けていることを示しています。

なぜNext.jsが選ばれ続けるのか

  1. 包括的な機能セット:SSR、SSG、ISR、APIルートなどを標準で提供
  2. 開発者体験の向上:Turbopackによる高速な開発サイクル
  3. 柔軟な展開オプション:Vercel、AWS、GCPなど様々なプラットフォームへのデプロイ
  4. 強力なエコシステム:React 19との統合、豊富なプラグインとライブラリ
  5. 積極的なコミュニティサポート:問題への迅速な対応と継続的な改善

まとめ

2025年のNext.jsは、大きな進化と試練の両方を経験した年でした。Next.js 16のリリースにより、パフォーマンスと開発者体験が大幅に向上し、Cache ComponentsやTurbopackの安定化により、より効率的な開発が可能になりました。

一方で、React2Shell(CVE-2025-55182/CVE-2025-66478)の脆弱性は、セキュリティの重要性と、依存関係管理の必要性を改めて認識させる出来事となりました。Vercelとコミュニティの迅速な対応により、多くのアプリケーションが保護されましたが、この経験は今後のフレームワーク開発とセキュリティ実践に影響を与え続けるでしょう。

2026年に向けて、Next.jsはさらなる進化を続け、React 19の新機能やProxy APIの改善など、より強力で安全なウェブアプリケーション開発を可能にしていくことが期待されます。

参考リンク


React2Shell についてわかりやすかったYouTube

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?