Next.js
Zenavo が検出する内容
package.json に next があるリポジトリは、zbpack で Node.js、フレームワーク next.js としてビルドされます。
| ステップ | コマンド |
|---|---|
| インストール | リポジトリのロックファイルに応じて npm install、pnpm install、yarn install、bun install(ロックファイルがなければ yarn) |
| ビルド | build スクリプト(通常は next build) |
| 起動 | start スクリプト(通常は next start) |
Node.js のバージョンは package.json の engines.node から取ります(未設定なら 22)。インストールを再現可能にし、正しいパッケージマネージャーが使われるよう、ロックファイルをコミットしてください。
next start はすべてのインターフェースで $PORT(Zenavo が 8080 に設定)を待ち受けるので、デフォルトのアプリなら変更は不要です。
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}
}デプロイ
- Add Service → GitHub で、リポジトリとブランチを選びます。
- アプリに必要な変数(下記参照)を追加し、Next をクリックします。
- プレビューに nodejs と next.js が表示されていることを確認し、Deploy をクリックします。
- Networking タブで、ドメインを生成するか自分のドメインを設定します。
環境変数
- サーバー側の変数(ルートハンドラー、サーバーコンポーネント、
getServerSidePropsでのprocess.env.DATABASE_URL)はアプリの実行時に読まれます。Variable タブで設定して再デプロイしてください。 NEXT_PUBLIC_*変数はnext buildによって JavaScript バンドルに書き込まれるので、ビルド時に存在する必要があります。Variable タブの変数は実行中のアプリにしか渡されないため、これらは Settings → Build → Build arguments に設定してください。例:NEXT_PUBLIC_API_URL=https://api.example.com、または変数を再利用するNEXT_PUBLIC_API_URL=${API_URL}。Dockerfile がなくてもビルドに渡ります。ビルド引数を参照してください。- ポートにドメインがあれば、サイト自身のアドレスは
ZENAVO_<PORT>_URL(例:${ZENAVO_WEB_URL})です。NEXTAUTH_URLなどに使ってください。
データベースに接続する
プロジェクトに PostgreSQL を追加し、Next.js のサービスでその変数を参照します。
DATABASE_URL=${POSTGRESQL_CONNECTION_STRING}Prisma、Drizzle、pg はいずれもこの URL を受け付けます。ビルド中はデータベースに届かないので、マイグレーションはサービスの起動時に実行してください。predeploy スクリプトは start の前に実行されます。
"scripts": {
"build": "next build",
"predeploy": "prisma migrate deploy",
"start": "next start"
}output: 'standalone' でイメージを小さくする
next.config.js に output: 'standalone' を設定すると、next build が自己完結したサーバーを .next/standalone に書き出します。zbpack はこれを使わないので、活用するには Dockerfile を追加します。
FROM node:22-alpine AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
COPY . .
ARG NEXT_PUBLIC_API_URL
RUN npm run build
FROM node:22-alpine
WORKDIR /app
ENV NODE_ENV=production HOSTNAME=0.0.0.0
COPY --from=build /app/.next/standalone ./
COPY --from=build /app/.next/static ./.next/static
COPY --from=build /app/public ./public
EXPOSE 3000
CMD ["node", "server.js"]HOSTNAME=0.0.0.0 で standalone サーバーがすべてのインターフェースで待ち受け、ポートは EXPOSE(ここでは 3000)から決まります。NEXT_PUBLIC_API_URL のようにビルドで必要な変数は、RUN npm run build の前に ARG 行を置き、値を Settings → Build → Build arguments に設定します。
よくある問題
| 症状 | 原因 |
|---|---|
JavaScript heap out of memory でビルドが失敗する | 大きなアプリはビルドのデフォルトより多くのメモリを必要とします。Settings → Build → Build arguments に NODE_OPTIONS=--max-old-space-size=4096 を追加するか(自分の Dockerfile なら、ビルドステージに ARG NODE_OPTIONS も必要です)、ビルドを軽くしてください。 |
ブラウザーで NEXT_PUBLIC_* の値が undefined | Variable タブにしかありません。ビルド引数に設定して再デプロイしてください。自分の Dockerfile なら、next build の前で ARG 宣言も必要です。 |
next/image の画像が表示されない | リモート画像には next.config.js の images.remotePatterns が必要です。 |
| standalone サーバーに到達できない | HOSTNAME が 0.0.0.0 でないため、コンテナのホスト名でしか待ち受けていません。 |