Next.jsでstandalone buildするときに気をつけること

publication: 2022/11/05

update:2023/06/22

Next.jsのstandalone buildとは

/**
 * @type { import("next").NextConfig}
 */
const config = {
  output: 'standalone'
}

以上の設定でnext buildを使用すると、.next/standaloneディレクトリが作成され、実行に必要な最小限のファイルがコピーされます。Dockerイメージを作成するような場合、この機能によってイメージサイズをかなり縮小できます。

コピーされないファイル

ただしこちらに書いてある通り.next/staticとpublicはコピーされないため、自分で配置する必要があります。さらにランタイムにexperimental-edgeを選んでいる場合は注意が必要です。.next/standalone/serverで必要なファイルが足りない状態となります。 VercelがCDNに入れるべきと判断したファイルはとことん削られています。

それ以外にもnode_modulesの中の*.wasmもコピーされないので、必要とする場合は注意が必要です。

Dockerファイルのサンプル

FROM node:alpine as build
WORKDIR /app
COPY package.json yarn.lock ./
RUN --mount=type=cache,target=/usr/local/share/.cache/yarn/v6 yarn
COPY . .
RUN yarn build &&\
  cp -r -u .next/server .next/standalone/.next &&\
  cp -r -u .next/static .next/standalone/.next &&\
  cp -r -u public .next/standalone

FROM node:alpine
WORKDIR /app
COPY --from=build /app/.next/standalone ./

EXPOSE 3000
CMD ["node","server.js"]

Next.jsのDockerイメージを作るときは、以上のような設定をしています。package.json内のbuildスクリプト内でコピーするコマンドを入れる方法もあります。

まとめ

.next/standalone/serverのコピーされないファイルに関してはドキュメントに触れられていません。このせいでサーバエラーが出てしまった場合は、必要なファイルをコピーして解決しましょう。