空雲 Blog

Eye catchNext.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/staticpublicはコピーされないため、自分で配置する必要があります。さらにランタイムに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のコピーされないファイルに関してはドキュメントに触れられていません。このせいでサーバエラーが出てしまった場合は、必要なファイルをコピーして解決しましょう。