🚀

【Next.js和訳】API Reference/next.config.js/Environment Variable

2021/10/03に公開約1,200字

この記事について

この記事は、next.config.js/Environment Variableの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

環境変数

JavaScript バンドルに環境変数を追加するには、next.config.jsを開き、env設定を追加します。

module.exports = {
  env: {
    customKey: "my-value",
  },
}

これで、コードの中でprocess.env.customKeyにアクセスできるようになります。例えば、以下のようになります。

function Page() {
  return <h1>The value of customKey is: {process.env.customKey}</h1>
}
export default Page

Next.js は、ビルド時にprocess.env.customKeymy-valueに置き換えます。webpack DefinePluginの性質上、process.env変数を再構築しようとしてもうまくいきません。

たとえば、次のような行があります。

return <h1>The value of customKey is: {process.env.customKey}</h1>

になってしまいます。

return <h1>The value of customKey is: {"my-value"}</h1>

関連

https://nextjs.org/docs/api-reference/next.config.js/introduction
https://nextjs.org/docs/basic-features/environment-variables

Discussion

ログインするとコメントできます