🦉

Amplify+Next.js 環境変数設定方法まとめ

2021/07/27に公開

Next.js アプリを Amplify にデプロイする際に環境変数の設定方法でつまづいたので記事にしておきます。

クライアントサイドで扱う環境変数

クライアントサイド、つまりはブラウザで実行されるソースから参照する環境変数は Amplify コンソールから設定します。

ソースからは以下のように参照可能で非常に簡単です。

const TEST = process.env.NEXT_PUBLIC_TEST;

サーバーサイド、つまりは SSR する場合に参照する環境変数はnext.config.jsに設定が必要です。

まず先ほど同様に Amplify コンソールに環境変数を設定します。

そしてnext.config.jsに以下のように記述します。

module.exports = {
  env: {
    ENV_TEST: process.env.ENV_TEST,
  },
};

こうすることで、ソースからは先ほどと同様に参照可能となります。

const TEST = process.env.ENV_TEST;

この他には AWS のシークレットマネージャーやパラメータストアのようなサービスを使用するという手段もあります。

この記事に書いた内容はこちらの Issueで議論、対応されています。
Vercel だとダッシュボードから設定しておしまいなので Amplify も同様かと思いきや追加設定が必要で少しハマってしまいました。
この記事が困っている方の役に立てば幸いです。

この記事は VSCode の Zenn 執筆支援拡張機能を使用して記述しました。
大変使いやすいので VSCode で執筆する方は是非。