<span id="deploy-a-nextjs-static-export" />

# Next.js の static export をデプロイする

Next.js の static export は、HTML、JavaScript、アセットを `out/` に生成します。nginx Dockerfile を使って、そのディレクトリを Lizard にデプロイします。事前にビルドできるページではこの方法を使い、リクエスト時のサーバー機能については [Node.js server ガイド](https://lizard.build/ja/docs/framework-guides/nextjs) を使ってください。

<span id="configure-the-export" />

## export を設定する

これらのオプションを `next.config.mjs` にマージします:

```js
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: { unoptimized: true },
};

export default nextConfig;
```

`"build": "next build"` は `package.json` のままにしてください。この例では通常の export された画像を使います。外部の画像ローダーも別の選択肢です。必要な動的ルートパラメーターはすべてビルド中に生成してください。リクエスト時の cookies、Server Actions、および実行中の Next.js サーバーを必要とするその他の機能は、この static コンテナでは実行できません。アプリで使っている機能については、[Next.js静的エクスポート リファレンス](https://nextjs.org/docs/app/guides/static-exports) を確認してください。

<span id="add-a-complete-dockerfile" />

## 完全な Dockerfile を追加する

Next.js の自動検出パスは Node サーバーを前提としています。設定で `out/` を export していても、自動的に nginx へ切り替わることはありません。この Dockerfile をアプリのルートに追加してください。npm と、コミット済みの `package-lock.json` を前提としています:

```dockerfile
FROM node:22-slim AS build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/out /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
```

その横に `nginx.conf` を作成します:

```nginx
server {
  listen 80;
  server_name _;
  root /usr/share/nginx/html;
  index index.html;
  location / {
    try_files $uri $uri/ =404;
  }
  error_page 404 /404.html;
  location = /404.html {
    internal;
  }
}
```

末尾スラッシュ付きの export では、`index.html` を持つルートディレクトリが作成されます。nginx ルールはそれらのディレクトリを配信し、存在しないパスには HTTP 404 を返します。`node_modules`、`.next`、`out`、`.git`、`.env*` を `.dockerignore` に追加し、ローカルのビルドファイルがアップロードに含まれないようにしてください。

<span id="build-and-deploy" />

## ビルドしてデプロイする

```bash
npm ci
npm run build
```

`out/index.html` と、想定どおりの内部ルートが存在することを確認してください。Docker が利用できる場合は、実際のサーバーをローカルでテストします:

```bash
docker build -t nextjs-static .
docker run --rm -p 8080:80 nextjs-static
```

[CLI セットアップ](https://lizard.build/ja/docs/framework-guides#prepare-the-project) の後、新しいサービスにデプロイします:

```bash
lizard init --name nextjs-static
lizard add --service web
lizard up --service web --port 80
lizard logs --build --service web --json
lizard ps --json
```

完全な Dockerfile には、lizardpack が認識できる npm build ステップが含まれています。既存のサービスでは、Dockerfile を選択する前に、競合する build/start オーバーライドを確認してクリアしてください。詳細は [ビルドの決定順序](https://lizard.build/ja/docs/concepts/build-pipeline#build-decision-order) を参照してください。

<span id="verify-routes-and-updates" />

## ルートと更新を確認する

公開中のホームページ、export された内部ルート、JavaScript アセット、そして存在しない適当なパスをリクエストしてください。存在しないパスは、HTTP 200 のホームページではなく、HTTP 404 を返す必要があります。[静的ルートと404エラー](https://lizard.build/ja/docs/framework-guides/static-routing#verify-http-responses) の確認手順を使ってください。

&#101;xport されたコンテンツの変更はすべて、新しいビルドが必要です。ランタイム環境変数では、`out/` にすでに書き込まれた値は変更できません。カスタム Dockerfile で公開用の build 変数を使う場合は、必要な `ARG` を `RUN npm run build` の前に宣言してください。秘密の認証情報を export 済みバンドルに入れないでください。

2026年9月9日のデプロイ確認とその制限については、[テスト済みバージョンとクラウド結果](https://lizard.build/ja/docs/framework-guides/validation) を参照してください。