環境変数を定義する
必要なのは1ファイルだけです。Next.jsアプリのルートに.env.localを追加します。
後述しますが、このファイル名によって適用先環境（開発環境とか本番環境）が指定できます。.env.localの場合は全ての環境に適用されます。
$ touch .env.localenvファイルの中身です。とりあえずこんな感じで環境変数を２つほど定義しておきます。
API_URL = https://api.sample.hoge/v1/
NEXT_PUBLIC_USER_NAME = halkyo環境変数を呼び出す
定義した環境変数は、process.env.[環境変数名]で呼び出すことができます。
process.env.API_URL定義した環境変数はnode.js内部でのみ参照できます。
つまり、htmlのなかに上記の「API_URL」を表示しようとしてもなにも見えません。console.logでも同様です。undefinedになります。
console.log(process.env.API_URL)
> undefinedしかし、出力に環境変数を利用したい場合もあります。
その場合は、NEXT_PUBLIC_ を環境変数名の頭につけて定義しておくことでブラウザ側に値を公開することができます。
console.log(process.env.NEXT_PUBLIC_USER_NAME)
> halkyo環境ごとにenvファイルをわける
Next.jsの環境変数は.envのファイル名で適用先の環境を切り替えることができます。
.env.local・・・すべての環境に常に適用される
.env.development.local・・・開発環境にのみ適用される
.env.production.local・・・本番環境にのみ適用される
これらの環境変数は.gitignoreに定義を追加しておきましょう。
（create-next-app時にデフォルトで記載されているはず）
