カテゴリ:Tech投稿日:
AmplifyでデプロイしたNext.js内において、Amplifyコンソールから環境変数を設定して使うのサムネイル

AmplifyでデプロイしたNext.js内において、Amplifyコンソールから環境変数を設定して使う

1.ブラウザ側に晒しても OK な環境変数を読み込む

Amplify コンソールの環境変数のページへ行き、設定したい環境変数の prefix としてNEXT_PUBLIC_をつける。これだけで完了。
ブラウザ側から見れてしまうので、シークレットな値は次に紹介する方法で設定すること。

NEXT_PUBLIC_の設定画像

2.Node.js 環境下(SSR や API routes など)で読み込む

Amplify コンソールの環境変数のページへ行き、環境変数を追加する。ただし prefix NEXT_PUBLIC_はつけない。
NEXT_PUBLICではない設定画像

次にamplify.ymlを編集する。ビルドの設定ページに行けばコンソール上で編集可能ですが、リポジトリのルートにamplify.ymlを置いておけば管理しやすくなるのでオススメ。
そしてamplify.ymlの編集内容としては以下になる。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - echo "ENV_TEST=$ENV_TEST" >> .env # この行を追加
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - "**/*"
  cache:
    paths:
      - node_modules/**/*

これでデプロイすれば、読み込みができているはず。

参考情報

https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables

https://maku.blog/p/gbpeyov/

https://qiita.com/iMissYu/items/fb57c75b77a222ec9ea1

ブログ運営者
muuuuminn
経歴:
SE:1年半 → FE:5年 → ?
スキル:
Next.js, TypeScript, React, Notion
趣味:
ゲーム, 手品, 開発, コレクション, 映画