env

環境変数を分かりやすく

環境変数とは、OS（オペレーティングシステム）が提供する変数で、アプリケーションの実行環境に関する情報を表します。例えば、アプリケーションが利用する DB の接続情報や API キーを環境変数に格納しておくことで、アプリケーションの設定を外部から変更することができます。

Next.js での env の使い方

Next.js では、.envファイルを作成することで環境変数を管理することができます。.envファイルに環境変数を記述することで、その環境変数をprocess.envを使って取得することができます。

以下は、.envファイルに環境変数MY_VARを定義し、pages/index.tsxでその値を取得する例です。

MY_VAR=my_value

const Home: NextPage = () => {
  const myVar = process.env.MY_VAR
  return (
    <div>
      <h1>{myVar}</h1>
    </div>
  )
}

export default Home

なお、.envファイルに記述した環境変数は、クライアント側から取得することができます。そのため、API キーやパスワードなど、セキュリティ上の問題がある情報は、.envファイルに記述せずに別の方法で管理するようにしましょう。

環境変数の設定

Next.js では、.envファイルに記述した環境変数を使うことができますが、実際には環境変数の設定方法はいくつかあります。

.env.local

.env.localファイルは、.envファイルと同じ形式で環境変数を定義することができます。.env.localファイルは、.envファイルよりも優先されるため、同じ名前の環境変数が定義されている場合は、.env.localファイルの値が使われます。

さらに、環境変数は秘密情報などの機密性の高い情報を扱うことが多いため、外部に漏洩しないようにする必要があります。そのため、.env.local や .env.production などの環境ごとに異なる環境変数を設定することができます。これにより、環境ごとに異なる API キーやデータベースの接続情報などを安全に扱うことができます。

// .env.local
API_KEY = abcdefg

// .env.production
API_KEY = hijklmn

このように、.env ファイルに環境変数を定義しておくことで、Next.js のコード内から簡単に利用することができます。以下は、環境変数を利用する例です。

import axios from 'axios'

const API_KEY = process.env.API_KEY

export const getNews = async () => {
  const res = await axios.get(`https://newsapi.org/v2/top-headlines?country=jp&apiKey=${API_KEY}`)
  return res.data.articles
}

この例では、process.env.API_KEY で環境変数を取得し、News API の apiKey パラメータに埋め込んでいます。このように、環境変数を利用することで、API キーや接続情報などの機密性の高い情報を安全に扱うことができます。