Next.js 15が正式に安定版としてリリースされた。
このリリースはRC1とRC2のアップデートがベースとなっており、 安定性に重点を置きながら、エキサイティングなアップデートとなっている。
本記事ではアップデート内容を詳しく紹介していく。
スムーズなアップデートを可能にする @next/codemod CLIの追加
このツールは、コードベースを最新の安定版やプレリリース版にアップグレードするのに役立つ。
以下のCLIを実行することで、依存関係を更新し、利用可能なcodemodを表示し、適用方法をガイドしてくれる。
npx @next/codemod@canary upgrade latestリクエストAPIの非同期化
headersやcookies、params 、searchParamsなどのリクエストAPIが非同期処理となった。もともとレンダリングする前にリクエスト待っており、これを改善するために非同期処理をするよう変更された。
import { cookies } from 'next/headers';
export async function AdminPanel() {
const cookieStore = await cookies();
const token = cookieStore.get('token');
// ...
}影響するリクエストAPIは以下の通り。
- cookies
- headers
- draftMode
- params(layout.js, page.js, route.js, default.js, generateMetadata, generateViewportで使われているもの)
- searchParams(page.jsで使用されているもの)
デフォルトでキャッシュしないよう変更
Route HandlerやPageコンポーネントにて、これまでデフォルトでキャッシュされていたが、今回からデフォルトでキャッシュしないようになった。
また、試験的な導入段階ではあるが、use cacheという新しいディレクティブが用意され、キャッシュのハンドリング方法が追加された。
"use cache"
export default async function Layout({ children }) {
const response = await fetch(...)
const data = await response.json()
return <html>
<body>
<div>{data.notice}</div>
{children}
</body>
</html>
}React 19対応
v15ではReact 19 RCを使用しており、React 19の次期リリースに合わせて作られている。また、React 18とPages Routerの後方互換性もされている。
Turbopackの改善
Turbopackが正式にstableとなり、開発環境での高速化が実現した。
実際にvercel.comでテストして以下の成果が得られたとのこと。
- ローカルサーバーの起動が最大76.7%高速化
- Fast Refreshを使用したコード更新が最大96.3%高速化。
- キャッシュを使用しない初期ルートコンパイルが最大45.8%高速化
Static Route Indicator
開発時に静的なページかどうかがわかるStatic Route Indicatorが表示されるようになった。この視覚的な手がかりにより、ページがどのようにレンダリングされるかを理解し、パフォーマンスを最適化しやすくなった。
unstable_afterを使ったレスポンス後のコード実行(試験的導入)
ロギングや分析、その他の外部システムとの同期などのレスポンスに直接関係しないタスクなど行うときに便利なafterが導入された。
試験的な導入なので、以下のようにオプションをtrueにする必要がある。
const nextConfig = {
experimental: {
after: true,
},
};
export default nextConfig;使い方は、Server Components、Server Actions、Route Handlers、または Middleware で関数をインポートして使用する。
import { unstable_after as after } from 'next/server';
import { log } from '@/app/utils';
export default function Layout({ children }) {
// Secondary task
after(() => {
log();
});
// Primary task
return <>{children}</>;
}instrumentation.jsの追加
OpenTelemetryやSentryなどへエラー通知しやすくするためのinstrumentationファイルが追加された。onRequestError関数を使うことでエラーが起きた際に監視サービスへ簡単に通知できるようになった。
export async function onRequestError(err, request, context) {
await fetch('https://...', {
method: 'POST',
body: JSON.stringify({ message: err.message, request, context }),
headers: { 'Content-Type': 'application/json' },
});
}
export async function register() {
// init your favorite observability provider SDK
}Formコンポーネントの追加
URL 検索パラメータを更新するような検索フォームなどで使えるFormコンポーネントが追加された。検索パラメータを更新する場合、諸々コードを書かなければならなかったが、以下のようにシンプルに実現できるようになった。
import Form from 'next/form'
export default function Page() {
return (
<Form action="/search">
{/* submit時、入力値はURL検索パラメータに追加される。例：/search?query=abc */}
<input name="query" />
<button type="submit">Submit</button>
</Form>
)
}NextConfigタイプの追加
Next.jsがTypeScriptのnext.config.tsファイルタイプをサポートし、オートコンプリートとタイプセーフオプションのためのNextConfigタイプを提供するようになった。
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
/* config options here */
};
export default nextConfig;セルフホスティングの改善
Vercel環境以外でもNext.jsを正常に動くようにするためのセルフホスティングの改善がされた。
Server Actionsのセキュリティ改善
Server Actionsは、クライアントから呼び出せるサーバーサイドの関数だが、 サーバーアクションやユーティリティ関数がコード内の他の場所にインポートされていなくても、一般にアクセス可能なHTTPエンドポイントとなっており、これがセキュリティ懸念として指摘されることもあった。
今回そんなセキュリティ懸念を改善するため、Secure action IDという推測が困難なIDを導入し、なるべく外部からのアクセスを防げるようになった。
外部パッケージのバンドル最適化
外部パッケージはデフォルトでバンドルされ、新しい serverExternalPackages 設定オプションを使って特定のパッケージをオプトアウトできるようになった。
const nextConfig = {
serverExternalPackages: ['package-name'],
};
export default nextConfig;ESLint9のサポート
Next.js 15では、2024年10月5日にESLint 8のサポートが終了するのに伴い、ESLint 9もサポート。また、ESLint 8の後方互換性もあるとのことで当面の間ESLint 8のままでも使用可能。
開発環境&ビルドの改善
ローカル開発のパフォーマンスを向上させ、外部 API 呼び出しの潜在的なコストを削減するために、ホットモジュールリロード (HMR) が以前のレンダリングからのfetch結果を再利用できるようになった。
また、静的ページ生成の最適化により、特に低速なネットワークリクエストを持つページのビルド時間が改善された。
