フロントエンド開発の先端を突っ走る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

引用 : 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もコピーされないので、必要とする場合は注意が必要です。

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

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

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

cp -r public .next/standalone/public

sharp をインストールする

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

No.2484
04/19 18:05

edit