フロントエンド開発の先端を突っ走るNext.js
next.js アプリの初期化( npx create-next-app@latest <アプリ名> ) または yarn create next-app <アプリ名> または bun create next-app <アプリ名> )

next.js standalone

● next.js の standaloneモードを有効にしてビルドする

https://nextjs.org/docs/app/api-reference/next-config-js/output

next.config.js

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

ビルド

npm run build

サーバースタート

node .next/standalone/server.js

ポートを指定してサーバースタート

HOSTNAME=localhost PORT=3030 node .next/standalone/server.js

static ディレクトリをコピーする

cp -r .next/static .next/standalone/.next/static

public ディレクトリをコピーする

cp -r public .next/standalone/public

つまりstandaloneビルド実行してから、起動するには以下のコマンドでokです。

npm run build
cp -r .next/static .next/standalone/.next/static
cp -r public .next/standalone/public
HOSTNAME=localhost PORT=3000 node .next/standalone/server.js

sharp をインストールする

next/image を使っている場合は、sharp をインストールしてから再度 npm run build します。

npm i sharp

https://nextjs.org/docs/messages/sharp-missing-in-production

sharpをインストールしないと、コンソールにワーニングが出ます。

https://weseek.co.jp/tech/3656/

リモート画像の設定

https://nextjs.org/docs/app/building-your-application/optimizing/images
https://zenn.dev/the_fukui/articles/nextjs-arbitrary-image-path

引用 : https://bit.ly/4a1YSDs

.next/standaloneディレクトリが作成され、実行に必要な最小限のファイルがコピーされます。Dockerイメージを作成するような場合、この機能によってイメージサイズをかなり縮小できます。
standaloneを設定してyarn buildを行うと.next/standaloneディレクトリ配下に本番環境で必要な最小限のファイル群が集約されて生成されます。 
(例外としてpublic,.next/staticディレクトリは.next/standaloneに含まれないため、必要な場合は明示的にCOPYする必要があります。)

引用: https://bit.ly/3Ttwt3F

ただし.next/staticとpublicはコピーされないため、自分で配置する必要があります。
さらにランタイムにexperimental-edgeを選んでいる場合は注意が必要です。
.next/standalone/serverで必要なファイルが足りない状態となります。
VercelがCDNに入れるべきと判断したファイルはとことん削られています。
それ以外にもnode_modulesの中の*.wasmもコピーされないので、必要とする場合は注意が必要です。
No.2484
09/22 10:56

edit