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

Next.jsのstandalone buildとは

1/**
2 * @type { import("next").NextConfig}
3 */
4const config = {
5  output: 'standalone'
6}

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

コピーされないファイル

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

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

Dockerファイルのサンプル

1FROM node:alpine as build
2WORKDIR /app
3COPY package.json yarn.lock ./
4RUN --mount=type=cache,target=/usr/local/share/.cache/yarn/v6 yarn
5COPY . .
6RUN yarn build &&\
7  cp -r -u .next/server .next/standalone/.next &&\
8  cp -r -u .next/static .next/standalone/.next &&\
9  cp -r -u public .next/standalone
10
11FROM node:alpine
12WORKDIR /app
13COPY --from=build /app/.next/standalone ./
14
15EXPOSE 3000
16CMD ["node","server.js"]

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

まとめ

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