Next.jsで環境変数を扱いたい
Next.jsは.env.localというファイルに変数を記載するとそれをprocess.env.に組み込んでくれるようになっているらしいので、例えば
.env.localに
DB_HOST=localhost DB_USER=myuser DB_PASS=mypassword
と記載しておくとgetStaticPropsなどのNode.js環境で
// pages/index.js export async function getStaticProps() { const db = await myDB.connect({ host: process.env.DB_HOST, username: process.env.DB_USER, password: process.env.DB_PASS, }) // ... }
というように使うことができる
環境変数の公開
.env.localはNode.js環境のみで使用可能なため、ブラウザでは利用できない
変数をブラウザに公開するには、変数の前にNEXT_PUBLIC_をつける必要がある
NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
他の環境設定
.env.local以外に、.env（すべての環境）、.env.development（開発環境）、および.env.production（本番環境）をつくることができる
これらは.env.localの設定を上書きする
