🚀

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

1 min read

この記事について

株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。

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

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

環境変数

Next.js 9.4では、環境変数の追加がより直感的で分かりやすくなりました。ぜひ試してみてください。

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

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