概要

AWS S3で静的ホスティングを行う際に，Next.jsからのファイルの生成がうまくいかなかった時のメモ。

ホスティングの手順

動的ホスティング

const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
    webpack: (config, context) => {
        config.watchOptions = {
            poll: 10,
            aggregateTimeout: 3
        }
        return config
    },
}

module.exports = nextConfig

フロントサーバーを用意してコンテンツを提供することを「動的ホスティング」「サーバーサイドレンダリング」などと呼びます。
Node.jsをインストールしたサーバーで以下コマンドを実行することで，動的ファイルをビルドして配信を開始します。(ビルド済のファイルは.nextに保存されます)

$ yarn build
$ yarn start

サーバーを最低1台用意する必要があるので，コストや運用の手間がかかります。
一方で，ユーザーごとに見せるコンテンツを差し替えたり，リアルタイムでデータが変化するようなコンテンツを提供する場合は，動的ホスティングが適しています。

静的ホスティング

フロントサーバーなしで，AWS S3の「静的ホスティング」機能で提供することが可能です。サーバー不要なので料金は格安です。

Next.jsで静的ファイルを出力するには，next.config.jsを以下のように書き換える必要があります。
output: 'export'だけでいけそうな感もありますが，自分の場合はこれだけだとエラーが出てしまい画像ファイルの最適化をオフにする必要がありました。

const nextConfig = {
+    output: 'export',
    reactStrictMode: true,
    swcMinify: true,
    webpack: (config, context) => {
        config.watchOptions = {
            poll: 10,
            aggregateTimeout: 3
        }
        return config
    },
+    images: {
+        unoptimized: true,
+    },
}

module.exports = nextConfig

以下コマンドで静的ファイルをビルド，ローカル環境でテストすることができます。

$ yarn build
$ npx serve out

buildしたファイルはoutフォルダに保存され，npx serve outコマンドでローカルでテストすることができます。
out以下のファイル一式をAWS S3に配置し，静的ホスティング機能を付与すれば，配信が可能になります。

まとめ

Next.jsの静的・動的それぞれのホスティングの違いをまとめました。