🐟

Next.jsの環境変数

2023/04/13に公開

Next.js

frontend

tech

Next.jsの環境変数は、ブラウザに公開する変数と、公開されない変数の2種類を作ることができます。

公開する変数

NEXT_PUBLIC_*で始まる変数は、process.env.NEXT_PUBLIC_*という方法で取得できます。process.envのため公開されては困る情報は定義できません。

ビルドや実行環境を細かく定義したい場合、package.jsonのscriptsに、以下の記載をするなど活用できます。

 "dev": "NEXT_PUBLIC_STAGE=dev next dev"

この場合、プログラム側では、以下のように取得できるので、環境設定をコード側で行うということもできます。

const isDev = process.env["NEXT_PUBLIC_STAGE"] ==== "dev"

公開しない変数

.env.localへの記載とgetStaticProps()を実装することで、ブラウザ側に公開しない変数を定義・取得できます。ただし、ファイル中にNEXT_PUBLIC_*といった命名で定義すると、公開されてしまうので、注意が必要です。

.env.local

API_KEY=secret_key
NEXT_PUBLIC_CLIENT_ID=client_id

pages/index.tsx

import { useCallback } from "react"

interface Props {
  apiKey: string | null
  stage: string | null
  clientId: string | null
}

interface Env {
  props: Props
}

export function getStaticProps(): Env {
  return {
    props: {
      apiKey: process.env.API_KEY ?? null,
      stage: process.env.NEXT_PUBLIC_STAGE2 ?? null,
      clientId: process.env.NEXT_PUBLIC_CLIENT_ID ?? null
    },
  }
}

export default function Home(
  {apiKey, stage, clientId}: Props
) {
  const onClick = () => {
    console.log(stage, apiKey, clientId) // null 'secret_key' 'client_id'
    console.log(process.env.NEXT_PUBLIC_STAGE) // dev
    console.log(process.env.NEXT_PUBLIC_CLIENT_ID) // client_id
    console.log(process.env.API_KEY) // undefined
  }
  return (
    <>
      <button onClick={onClick}>Button</button>
    </>
  )
}

ポイントは、getStaticProps()で、{props: {...}}を応答することで、Homeの引数に渡してくれるようです。

最後に

ビルド時にgetStaticProps()が呼ばれますが、その関数内では有効な全ての変数がprocess.envに設定されます。Next.js の例のように、DBのコネクションを初期化してデータを取得、ページやコンポーネントの初期化時にローカル変数で渡してくれる、という仕組みだと理解しました。
基本的には、フロントエンド側では公開してしまって問題のない状況を作っておくことがセキュリティ的にも良いと思っていますが、フロントエンド側でセキュアな情報を扱う事態になったとき、こういう方法も検討の1つになると思います。

公開する変数

公開しない変数

最後に

Discussion