Next.js 16 SaaS Boilerplate の選び方:購入前に確認すべきチェックリスト

September 6, 2026
本物の Next.js 16 SaaS boilerplate は Turbopack、proxy.ts、非同期リクエスト API、React 19.2 の上で動きます。検証チェックリストと NEXTY.DEV の対応を解説。
Next.js Techniques
Boilerplate Comparison

Next.js 16 SaaS boilerplate とは、Next.js 16 の規約に沿って書かれたスターターコードのことであり、package.json のバージョン番号だけを 16 に書き換えた Next.js 14 や 15 のプロジェクトではありません。この違いは重要です。フレームワークのメジャーバージョンが、boilerplate のコードをどれだけ手つかずのまま使えるかを決めるからです。Next.js 16 では同期リクエスト API が削除され、middleware.tsproxy.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 devnext build はフラグなしで Turbopack を使います。プロジェクトにカスタム webpack 設定があると、--webpack を渡さない限り next build は失敗します。experimental.turbopack はトップレベルの turbopack オプションに移動しました。

SaaS への影響:boilerplate には SVG ローダーや Node polyfill のための小さな webpack 調整が入っていることがよくあります。これらは turbopack.resolveAlias などに移すか、削除する必要があります。スクリプトにまだ next build --webpack と書かれている boilerplate は、移行が終わっていません。

proxy.tsmiddleware.ts を置き換え

ファイル名とエクスポートする関数を proxy に改名します。proxy は Node.js ランタイムで動作し、edge ランタイムはサポートされません。middleware.ts は edge 用途で引き続き使えますが、非推奨です。

SaaS への影響:ロケールのルーティング、認証リダイレクト、レートリミットの判定は通常このファイルに置かれます。Node ランタイムということは Node API を使えるということですが、boilerplate 内の「edge でしか動かない」前提はすべて見直しが必要です。

同期リクエスト API の完全削除

cookies()headers()draftMode()paramssearchParams は非同期でしかアクセスできません。Next.js 15 の互換レイヤーは削除されました。opengraph-imageiconsitemapparamsid も Promise になっています。

SaaS への影響:セッション確認、テナント検索、ロケール解決はすべての layout と page の冒頭でこれらを読みます。next-async-request-api codemod でほとんど対応できますが、boilerplate は最初から非同期で書かれているべきで、そもそも codemod を走らせる必要がないのが理想です。

Cache Components が PPR フラグを置き換え

experimental.ppr、ルート単位の experimental_ppr エクスポート、experimental.dynamicIOexperimental.useCache はすべて削除されました。Partial Prerendering は cacheComponents: true"use cache" ディレクティブで明示的にオプトインします。キャッシュは明示的になり、page、layout、route handler の動的コードはデフォルトでリクエスト時に実行されます。

SaaS への影響:デフォルトでリクエスト時レンダリングというのは、認証付きダッシュボードにとって正しい挙動です。cacheComponents の有効化は単なる改名ではなく、<Suspense> の外にあるキャッシュされていないデータに対してビルドエラーを出すことがあります。boilerplate は意図的に採用するか、そうでなければオフのままにすべきで、古いフラグを残しておくのは論外です。

キャッシュ API:revalidateTagupdateTagrefresh

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、serverRuntimeConfigpublicRuntimeConfig は削除され、環境変数に置き換えられます。パラレルルートの各スロットには明示的な 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.tsexport function proxy があるmiddleware.ts は非推奨、ランタイムは Node.js に
非同期リクエスト APIどこでも await paramsawait cookies()await headers()同期アクセスは削除済み、旧互換レイヤーは存在しない
Turbopack ビルドが通るスクリプトが素の next buildnext.configwebpack() がない--webpack フラグがあれば移行は未完了
React 19.2 対応の依存関係認証、ORM、フォーム、UI キットが React 19 対応リリースpeer dependency の衝突はインストール時や実行時にしか露見しない
i18n が新 API ベースロケールを await params から解決、ルーティングは proxy.tsロケール処理はすべてのリクエストで走る
削除された設定がないexperimental.pprexperimental_pprnext lintserverRuntimeConfig が存在しない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.tspages は存在せず、next16.xreact19.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 が処理
非同期リクエスト APIlayout と 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 対応リリース
i18nnext-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 です。まず イントロダクション で機能一覧を確認し、準備ができたら 料金 と見比べてください。

Related Posts

Better Auth と Drizzle を採用した Next.js Boilerplate:SaaS で長期的に正しい選択である理由
Public
Sep 6, 2026

Better Auth と Drizzle を採用した Next.js Boilerplate:SaaS で長期的に正しい選択である理由

Better Auth と Drizzle ORM で構築した Next.js boilerplate が長持ちする理由。検証済みの機能、NextAuth・Prisma との公平な比較、NEXTY.DEV の配線方法を解説。

個人開発者のためのコスト削減術:Supabase 1つのデータベースで複数プロジェクトを運用する
Public
Feb 1, 2026

個人開発者のためのコスト削減術:Supabase 1つのデータベースで複数プロジェクトを運用する

サイドプロジェクトごとに別々のデータベースインスタンスを立てていませんか?PostgreSQL の Schema 機能を活用して、1つの Supabase データベースで複数のプロジェクトを分離管理する方法を解説。Drizzle ORM との統合方法や、Schema 間のデータ移行スクリプトも紹介します。すべて無料枠内で運用可能です。

Next.js 15 プロジェクトを Next.js 16 にアップグレードする方法
Public
Dec 5, 2025

Next.js 15 プロジェクトを Next.js 16 にアップグレードする方法

Next.js 16 は開発体験が大幅に向上しており、next-devtools-mcp を使えば数ステップで簡単にアップグレードできます。

Next.js SEOの実践:サブディレクトリ統合で主サイトの権威性を強化
Subscribers
May 20, 2025

Next.js SEOの実践:サブディレクトリ統合で主サイトの権威性を強化

Next.js開発者向け高度なSEOテクニック:技術的アプローチを使用して関連するが独立したウェブサイトをメインサイトのサブディレクトリに統合し、コードの分離と独立したデプロイメントを維持しながらSEO権威を集約して、メインドメインの検索エンジンパフォーマンスを大幅に向上させます。