はじめに

最近AWSを本格的に触り始めたnaokiです🧑‍💻

案件に入りながら自社（SES）サービスの立ち上げメンバーとして、PM兼テックリードとしてMVP開発を進めていました。

Next.jsでフロントエンドを作成し、S3上で静的Webホスティングを行う構成をとった際に、クライアントサイドからバックエンドへのAPIコールでハマったことがあったので、備忘録としてまとめておきます。

前提

フロントエンド: Next.js（静的サイトとしてビルド）
ホスティング: AWS S3（静的Webホスティング）

課題

NEXT_PUBLIC_API_BASE_URL という環境変数を設定していたにも関わらず、APIリクエスト時のパスがうまく指定できないという問題が発生しました。

.env

NEXT_PUBLIC_API_BASE_URL="https://your-domain/api"

具体的には、以下の処理を走らせるときにエラーが発生しました。

email-sent.tsx

const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/auth/sign-up`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
      });

本来であれば、APIリクエスト先が以下のパスになっていなければいけませんが、

https://your-domain/api/auth/sign-up

/apiがundifinedになってしまい、正しくリクエストを送ることができませんでした。

https://your-domain/undifined/auth/sign-up

原因と解決策

Next.jsで静的出力（next export）を行う際、.env ファイルが読み込まれていないことが原因でした。

そこで、環境変数を明示的に読み込ませるために env-cmd を導入しました。

解決方法

以下の手順で解決しました。

1. `env-cmd` をインストール

npm install env-cmd

2. プロジェクト直下に `.env.prod` を作成

NEXT_PUBLIC_API_BASE_URL=https://your-domain/xxx

3. `package.json` にビルドスクリプトを追加

{
  "scripts": {
    "build:prod": "env-cmd -f .env.prod next build && next export"
  }
}

静的ファイルを出力する本番環境用のビルドスクリプトを作成します。

4. ビルド実行

npm run build:prod

これで .env.prod の環境変数が静的ファイルに反映され、APIコールが期待通り動作するようになりました。

おわりに

静的サイトとしてデプロイする構成では、ビルド時の環境変数の扱いに注意が必要です。Next.jsでは NEXT_PUBLIC_ がついていても、.env の読み込みがビルド時に正しく行われていなければ反映されません。

同様の構成を取っている方の参考になれば幸いです。