Next.jsにて環境変数isLocalを新たに用意し開発中のみ読み込みたいリソースをnext buildでも読み込む

2022/08/29（月）

例えば以下の様にするとローカル開発中のみ特定のリソースを読み込む事が出来ます。

const Hoge = (): JSX.Element => {
  return (
    <Head>
      {process.env.NODE_ENV === "development" && (
        <link rel="stylesheet" href="https://example.com/style.css" />
      )}
    </Head>
  )
}

この時、ステージング等に上げる為にnext buildを行うが、ローカル開発中と同じく特定のリソースはだけは読み込みたい時は、環境変数isLocal等を新たに用意すると安価に実現できます。

まずはexportDevを新たに追加し、IS_LOCAL=trueを渡せるようにします。

{
  "scripts": {
    "dev": "IS_LOCAL=true next dev",
    "exportDev": "IS_LOCAL=true next build && next export",
    "export": "next build && next export"
  }
}

次にnext.config.jsにて環境変数isLocalを新たに追加します。

/** @type {import('next').NextConfig} */

// production
const isProduction = process.env.NODE_ENV === 'production'

// isLocal
const isLocal = process.env.IS_LOCAL || !isProduction

const nextConfig = {
  env: {
    isLocal,
  },
}

module.exports = nextConfig

後は以下の様にisLocalの時のみ特定のリソースを読み込む、という形にしてあげればOKです。

const Hoge = (): JSX.Element => {
  return (
    <Head>
     {process.env.NODE_ENV === "development" && (
     {process.env.isLocal && (
        <link rel="stylesheet" href="https://example.com/style.css" />
      )}
    </Head>
  )
}

Next.jsではNODE_ENV=local && next buildの様にNODE_ENVを自由に指定することができないので、出来ないなら別途環境変数を用意してあげれば良し、という手段でした。