Next.js 16 SaaS boilerplate とは、Next.js 16 の規約に沿って書かれたスターターコードのことであり、package.json のバージョン番号だけを 16 に書き換えた Next.js 14 や 15 のプロジェクトではありません。この違いは重要です。フレームワークのメジャーバージョンが、boilerplate のコードをどれだけ手つかずのまま使えるかを決めるからです。Next.js 16 では同期リクエスト API が削除され、middleware.ts は proxy.ts に改名され、Turbopack がデフォルトのバンドラーになり、PPR フラグは Cache Components に置き換わりました。旧規約のまま書かれた boilerplate を買えば、これらの移行作業を初日から背負うことになります。それこそが、お金を払って省きたかった作業のはずです。
この記事では三つのことを扱います。Next.js 16 の変更のうち SaaS のコードベースに直接効いてくるもの、boilerplate が本当に 16 ベースかを検証するチェックリスト、そして NEXTY.DEV が各項目をどう満たしているかです。
boilerplate 選びでフレームワークのメジャーバージョンが効く理由
boilerplate の価値は、git clone から最初の有料ユーザーまでの距離で決まります。作者が吸収していない breaking change はすべてあなたの移行作業になり、他人が書いたコードの移行は自分のコードより時間がかかります。具体的には三つの影響があります。
- 依存関係。 認証、ORM、i18n、UI ライブラリはそれぞれ React 19.2 と Next.js 16 の App Router に対応したリリースが必要です。古いメジャーに固定された boilerplate では、一つずつ上げて後始末をすることになります。
- 規約。
proxy.ts、非同期のparams、パラレルルートのdefault.js。これらはすべてのルートセグメントに散らばっています。修正は機械的ですが範囲が広い。 - 保守の見通し。 Next.js 16 に早く追随した作者は 16.x のマイナーにも追随し続ける傾向があります。まだ 15 に留まっている作者は、次のメジャーでも同じように待たせるでしょう。
Next.js 16 の変更のうち SaaS boilerplate に効いてくるもの
以下はすべて公式の リリース記事 と アップグレードガイド に基づいています。各項目に「SaaS にとって何を意味するか」を一言添えます。
Turbopack が dev と build のデフォルトバンドラーに
next dev と next build はフラグなしで Turbopack を使います。プロジェクトにカスタム webpack 設定があると、--webpack を渡さない限り next build は失敗します。experimental.turbopack はトップレベルの turbopack オプションに移動しました。
SaaS への影響:boilerplate には SVG ローダーや Node polyfill のための小さな webpack 調整が入っていることがよくあります。これらは turbopack.resolveAlias などに移すか、削除する必要があります。スクリプトにまだ next build --webpack と書かれている boilerplate は、移行が終わっていません。
proxy.ts が middleware.ts を置き換え
ファイル名とエクスポートする関数を proxy に改名します。proxy は Node.js ランタイムで動作し、edge ランタイムはサポートされません。middleware.ts は edge 用途で引き続き使えますが、非推奨です。
SaaS への影響:ロケールのルーティング、認証リダイレクト、レートリミットの判定は通常このファイルに置かれます。Node ランタイムということは Node API を使えるということですが、boilerplate 内の「edge でしか動かない」前提はすべて見直しが必要です。
同期リクエスト API の完全削除
cookies()、headers()、draftMode()、params、searchParams は非同期でしかアクセスできません。Next.js 15 の互換レイヤーは削除されました。opengraph-image、icon、sitemap の params と id も Promise になっています。
SaaS への影響:セッション確認、テナント検索、ロケール解決はすべての layout と page の冒頭でこれらを読みます。next-async-request-api codemod でほとんど対応できますが、boilerplate は最初から非同期で書かれているべきで、そもそも codemod を走らせる必要がないのが理想です。
Cache Components が PPR フラグを置き換え
experimental.ppr、ルート単位の experimental_ppr エクスポート、experimental.dynamicIO、experimental.useCache はすべて削除されました。Partial Prerendering は cacheComponents: true と "use cache" ディレクティブで明示的にオプトインします。キャッシュは明示的になり、page、layout、route handler の動的コードはデフォルトでリクエスト時に実行されます。
SaaS への影響:デフォルトでリクエスト時レンダリングというのは、認証付きダッシュボードにとって正しい挙動です。cacheComponents の有効化は単なる改名ではなく、<Suspense> の外にあるキャッシュされていないデータに対してビルドエラーを出すことがあります。boilerplate は意図的に採用するか、そうでなければオフのままにすべきで、古いフラグを残しておくのは論外です。
キャッシュ API:revalidateTag、updateTag、refresh
revalidateTag() は第二引数に cacheLife プロファイルが必須になりました(revalidateTag('posts', 'max'))。単一引数の形式は非推奨です。新しい updateTag() は Server Actions 専用で read-your-writes のセマンティクスを提供し、refresh() は Server Action からキャッシュされていないデータを再取得します。
SaaS への影響:設定フォーム、管理画面の CRUD、課金ステータスは、まさに updateTag() が欲しい場面です。単一引数の revalidateTag() をまだ呼んでいる boilerplate は、TypeScript エラーを抱えたまま出荷されています。
React 19.2 と React Compiler
Next.js 16 の App Router は React Canary チャンネルを使い、React 19.2 の機能(View Transitions、useEffectEvent、<Activity/>)を含みます。React Compiler のサポートは reactCompiler: true で安定版になりましたが、デフォルトではオフです。
SaaS への影響:クライアント側の依存関係はすべて React 19 に対応していなければなりません。古い boilerplate が壊れるのはたいていここです。フォームライブラリや UI キットの peer dependency が React 18 に固定されている、というパターンです。
ツールチェーンの下限と削除項目
Node.js 20.9 以上、TypeScript 5.1 以上が最低要件です。next lint は削除され、next build は lint を実行しなくなりました。AMP、serverRuntimeConfig、publicRuntimeConfig は削除され、環境変数に置き換えられます。パラレルルートの各スロットには明示的な default.js が必要です。next/image のデフォルトも変わりました。minimumCacheTTL は 4 時間、qualities は [75]、ローカル IP の最適化はブロック、リダイレクトは 3 回まで、です。
SaaS への影響:CI イメージ、lint スクリプト、Dockerfile、環境変数の方針がすべて影響を受けます。どれも難しくはありませんが、どれも時間はかかります。
チェックリスト:その boilerplate は本当に Next.js 16 ベースか
購入前にリポジトリに対して、あるいは作者が見せてくれる demo リポジトリに対して確認してください。
| 確認項目 | 見るべき点 | 重要な理由 |
|---|---|---|
| App Router のみ | pages/ ディレクトリがなく、すべてのルートが app/ 配下 | Next.js 16 の新機能(Cache Components、新キャッシュ API)は App Router 専用 |
middleware.ts ではなく proxy.ts | ファイル名が proxy.ts、export function proxy がある | middleware.ts は非推奨、ランタイムは Node.js に |
| 非同期リクエスト API | どこでも await params、await cookies()、await headers() | 同期アクセスは削除済み、旧互換レイヤーは存在しない |
| Turbopack ビルドが通る | スクリプトが素の next build、next.config に webpack() がない | --webpack フラグがあれば移行は未完了 |
| React 19.2 対応の依存関係 | 認証、ORM、フォーム、UI キットが React 19 対応リリース | peer dependency の衝突はインストール時や実行時にしか露見しない |
| i18n が新 API ベース | ロケールを await params から解決、ルーティングは proxy.ts | ロケール処理はすべてのリクエストで走る |
| 削除された設定がない | experimental.ppr、experimental_ppr、next lint、serverRuntimeConfig が存在しない | 16 ではビルドか型チェックが失敗する |
| Node 20.9 以上が徹底されている | engines、Dockerfile、CI マトリクス | Node 18 は非対応 |
パラレルルートに default.js がある | すべての @slot フォルダに存在 | ないとビルドが失敗する |
| 16.x マイナーに追随している | changelog に 16.0 以降の更新がある | 作者が保守しており、タグを打っただけではない証拠 |
三つのコマンドで素早く抜き取り検査できます。
ls proxy.ts middleware.ts pages 2>&1
grep -n '"next"\|"react"\|"react-dom"' package.json
grep -rn "next lint\|--webpack\|experimental_ppr" package.json next.config.* app 2>/dev/null
期待される結果:proxy.ts が存在し、middleware.ts と pages は存在せず、next が 16.x、react が 19.2.x、最後の grep が空であること。
NEXTY.DEV は各項目をどう満たしているか
NEXTY.DEV は買い切りライセンスで販売している Next.js SaaS boilerplate で、nexty.dev のサイト自体が同じテンプレートで構築されています。以下の内容はスライドではなく、本番環境に対して検証できます。
| チェック項目 | NEXTY.DEV |
|---|---|
| App Router のみ | すべてのルートが app/[locale]/ 配下にあり、pages/ ディレクトリは存在しない |
proxy.ts | ロケールルーティングは export async function proxy の中で next-intl が処理 |
| 非同期リクエスト API | layout と page は他の処理より先に await params でロケールを解決 |
| Turbopack ビルド | 素の next build、カスタム webpack 設定なし |
| React 19.2 対応の依存関係 | nexty.dev は Next.js 16.2 と React 19.2 で稼働。Better Auth、Drizzle ORM、next-intl 4、AI SDK はすべて React 19 対応リリース |
| i18n | next-intl による英語・中国語・日本語対応、ロケールは await params から取得 |
| 削除された設定 | 削除済みフラグは一切なし。型チェックは tsc --noEmit で実行 |
フレームワーク層の上で、テンプレートに含まれるものは次の通りです(詳細は ドキュメント)。
- 認証。 Better Auth による Google と GitHub の OAuth、メール OTP、Magic Link。加えて Cloudflare Turnstile とログイン時の IP レートリミット、ユーザーレートリミット。v3 以降、Better Auth と Drizzle が v1、v2 の Supabase ベースの認証を置き換えました。
- データベース。 Drizzle ORM で Supabase、Neon、セルフホストの PostgreSQL に対応。設定は
DATABASE_URL一つ。ユーザー、流入元トラッキング、料金プラン、注文、コンテンツのテーブルを同梱。 - 決済。 Stripe、Creem、PayPal に対応し、月額・年額サブスクリプション、買い切り、従量課金向けのクレジットシステムをカバー。料金プランは管理画面からリアルタイムプレビュー付きでビジュアルに管理。
- AI。 Vercel AI SDK に OpenRouter、Replicate、fal.ai のプロバイダー。チャット、テキストから画像、画像から画像、動画生成のデモハブ付き。
- コンテンツ。 MDX の静的ブログに加え、アクセス制御(公開、ログイン済み、購読者限定)、AI 翻訳、下書き・公開・アーカイブの各ステータスを備えた管理画面 CMS。
- インフラ。 Cloudflare R2 のファイルストレージと管理画面でのファイル管理、Resend によるメールとニュースレターモジュール、Upstash Redis によるキャッシュとレートリミット、ユーザー用と管理者用のダッシュボード。
- デプロイ。 Vercel、Cloudflare Workers、Dokploy、Coolify に対応。
価格は一つの数字だけです。Pro ライセンスは 188 ドルの買い切りで、生涯アップデート付き。プライベートな GitHub リポジトリへのアクセスとして提供され、ディレクトリ・リスティングサイト向けの第二テンプレート nexty-directory も含まれます。SaaS 層が不要なプロジェクト向けには、機能を絞った無料のオープンソース版(国際化、ニュースレター、アナリティクス、静的ブログ。データベース、認証、決済、AI、ストレージは含まない)もあります。詳細は 料金セクション を参照してください。
プロジェクトがまだ Next.js 15 にある場合
状況は二つあり、性質が異なります。
NEXTY.DEV を購入済みの場合。 ライセンスはプライベートリポジトリへの永久アクセス権です。テンプレート自体はすでに Next.js 16 で動いており、以降のアップグレードもすべて同じリポジトリに入るため、テンプレートを自分で移行する必要はなく、新しいバージョンをダウンロードするだけです。Next.js 15 のコードが手元に残り得るのは、テンプレートの初期リリースを元にすでに開発したプロジェクトだけで、その場合にアップグレードするのはテンプレートではなく自分のプロジェクトです。
まだ 15 に留まっている他社の boilerplate を使っている場合、あるいは初期の Nexty を元にした古いプロジェクトを作り直さずに前に進めたい場合。まず公式の codemod を実行し、次に非同期リクエスト API の codemod を別途実行します。upgrade codemod にはこれが含まれていないためです。
npx @next/codemod@canary upgrade latest
npx @next/codemod@canary next-async-request-api .
next-devtools-mcp でエージェントに機械的な作業の大半を任せる手順を含む完全な解説は、Next.js 15 プロジェクトを Next.js 16 にアップグレードする方法 にあります。NEXTY.DEV 自体を 16 に上げたのも同じ手順なので、テンプレートから作ったプロジェクトにそのまま当てはまります。
FAQ
Next.js 16 は本番の SaaS に使えるほど安定していますか
はい。Next.js 16 は 2025 年 10 月にリリースされ、Turbopack は dev と build の両方で安定版になっており、16.x 系はその後も複数のマイナーリリースを重ねています。NEXTY.DEV と nexty.dev は 2025 年末から本番環境で 16 を稼働させています。
Next.js 16 を使うには Cache Components を有効にしなければなりませんか
いいえ。cacheComponents はオプトインです。無効のままなら page と layout はデフォルトでリクエスト時にレンダリングされ、これは認証付きダッシュボードにとって正しい挙動です。Partial Prerendering の恩恵を受ける静的なシェルがあるときに、意図的に有効化してください。
Next.js 16 の boilerplate でも edge ランタイムは使えますか
proxy.ts は Node.js でのみ動作します。edge でのリクエスト介入が必要なら、middleware.ts はまだ使えますが非推奨です。ホスティング環境が対応していれば、route handler と page は引き続き edge ランタイムを宣言できます。
「生涯アップデート」とは実際には何を指しますか
プライベートな GitHub リポジトリのコラボレーターとして追加されます。Next.js 16 への移行や将来のメジャーアップグレードを含むすべての更新はそのリポジトリに入り、自分のタイミングで pull できます。更新料もサブスクリプションもありません。
どこから始めるか
いま boilerplate を選んでいるなら、候補に対して上のチェックリストを回してください。すでにチェックリストを通過しているものが欲しいなら、NEXTY.DEV は Next.js 16 と React 19.2 の上に Better Auth、Drizzle、Stripe、i18n、AI SDK、CMS、R2 を揃えた Next.js SaaS boilerplate です。まず イントロダクション で機能一覧を確認し、準備ができたら 料金 と見比べてください。


