Next.js における環境変数 (env) の基本的な設定方法

はじめに

環境変数の基本的な設定方法

This document is for Next.js versions 9.4 and up. If you’re using an older version of Next.js, upgrade or refer to Environment Variables in next.config.js.
引用：Basic Features: Environment Variables | Next.js

• 基本的には .env.local に環境変数を定義（詳細は後述）
• 設定した環境変数を呼び出すときは process.env.環境変数名 とする
• ブラウザで環境変数を使用したい場合は、先頭の文字を NEXT_PUBLIC_ とする

環境ごとに環境変数は変更できる

Note: .env, .env.development, and .env.production files should be included in your repository as they define defaults. .env*. local should be added to .gitignore, as those files are intended to be ignored. .env.local is where secrets can be stored.
引用：Basic Features: Environment Variables | Next.js

環境変数の呼び出し方

// .env
FOO=hogehoge
NEXT_PUBLIC_FOO=hogehoge

// pages/index.tsx
import { GetStaticProps } from 'next';

// クライアント側で実行
export default function Index(): JSX.Element {
  return (
    <>
      {process.env.NEXT_PUBLIC_FOO}
      {process.env.FOO}
    </>
  );
}

// サーバー側で実行
export const getStaticProps: GetStaticProps = async () => {
  console.log(process.env.NEXT_PUBLIC_FOO, process.env.FOO);
  ...
};

最後に

参考文献

• Basic Features: Environment Variables | Next.js
• next.js/examples/environment-variables at canary · vercel/next.js
• NextJS における環境変数まわりの挙動まとめ