Vercel に Next.js アプリをデプロイするとき、**「どのフォルダをビルド対象にすべきか」や「ビルドコマンドは何にすべきか」**でつまずくケースが結構あります。特にプログラミング初心者は、リポジトリの構成がそのまま Vercel の設定に反映されることを知らず、デプロイ失敗の原因に悩むことが多いです。ここでは、初心者でもすぐに実践できる「ディレクトリとビルド設定の勘どころ」を5つに絞って解説します。
1. ルートディレクトリは src/ にまとめよう
Vercel はデフォルトでリポジトリのルートをビルド対象にします。大規模プロジェクトになると、pages/ や components/ が散在しがちです。src/ 以下にすべてのコードを移すことで、以下のメリットがあります。
- Vercel の Root Directory 設定で
srcを指定すれば、不要なファイルがビルドに混ざらない - エディタのインテリセンスが効きやすく、初心者でもファイル構造が把握しやすい
2. next.config.js で output: "standalone" を有効化
Vercel のサーバーレス環境は、依存関係が分離された「standalone」ビルドを推奨しています。next.config.js に次の設定を追加すると、デプロイサイズが小さくなり、起動が速くなります。
// next.config.js
module.exports = {
// TypeScript を使う場合は型情報も保持
reactStrictMode: true,
output: "standalone",
// 必要に応じて環境変数をここで定義
env: {
NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
},
};
3. ビルドコマンドは next build に統一
Vercel のデフォルトビルドコマンドは npm run build ですが、package.json に以下のようにスクリプトを書いておくと安心です。
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}
}
npm run build が実行されるだけで next build が走るので、特別な設定が不要です。
4. vercel.json でルートディレクトリとビルド出力を明示
プロジェクトが src/ 配下にある場合、vercel.json に次のように書きます。
{
"version": 2,
"builds": [
{
"src": "src/package.json",
"use": "@vercel/next"
}
],
"routes": [
{ "src": "/(.*)", "dest": "/src/$1" }
]
}
-
srcにあるpackage.jsonをビルド対象に指定 -
routesでリクエストをsrc配下にリダイレクト
5. 環境変数は Vercel の UI で管理
ローカルでは .env.local に書き込んでも、Vercel にデプロイしたときは UI から Environment Variables を設定します。next.config.js の env オブジェクトに書いたキーと同じ名前で登録すれば、コードを書き換える必要はありません。
以上の5ポイントを抑えておけば、Vercel へのデプロイで「ディレクトリが見つからない」「ビルドが失敗する」などの典型的なエラーはほぼ回避できます。実際に手を動かしながら設定を確認すれば、CI / 自動デプロイの流れが自然に身につくはずです。