■目次

環境変数用ファイルを作成し、値を格納する

  1. メインルートに.envまたは.env.localファイルを作成する

    スクリーンショット 2022-09-13 14.20.40.png

    <aside> 🌿 .env.env.localの使い分け】

    ▼**.env** ( .env.[environment] 含む) リポジトリに含めて、デフォルト設定として利用 する事が勧められている

    ▼**.env.local** ( .env.[environment].local 含む)  .gitignore ファイルに含めて、公開したくない情報や開発用の変数の定義に利用 することが勧められている

    </aside>

  2. .env.localファイルの場合は、.gitignoreに追加し公開されないようにする

    (もしかするとデフォルトで記述されているかもしれない。要確認)

    # local env files
    .env*.local
    
  3. 環境変数を格納する

    <aside> 🌿 ・値にダブルクォーテーションはいらない(文字列の場合はいるっぽい?)

    ・公開したくない情報には、接頭に**NEXT_PUBLIC_ はつけないこと** NEXT_PUBLIC_がついていない環境変数は、サーバ側の処理でのみ使用され、クライアント側では使用できず、表示もされない

    </aside>

    例)

    # microCMS
    API_KEY=aaaaaaaaaabbbbbbbbb0000000000
    
    # google analytics
    NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-GGGGG11111
    
  4. 各ファイルで適宜呼び出す

    <aside> 🌿 ・接頭にprocess.env. をつけること ・importする必要はなし

    </aside>

    例)

    export const GA_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID || "";
    

ホスティングサーバーにも環境変数を登録する

  1. デプロイする前に、ホスティングサーバーにも環境変数を登録しておく(.env.local だけかもしれないが、登録しないと読み取ってくれない)

    詳しいやり方は以下を参照のこと

    Netlify:環境変数を登録する

参考

【Next.js】環境変数(.env)の使い方【公式ドキュメント 意訳】 - mlog

Basic Features: Environment Variables | Next.js