Next.jsにて環境変数isLocalを新たに用意し開発中のみ読み込みたいリソースをnext buildでも読み込む
例えば以下の様にするとローカル開発中のみ特定のリソースを読み込む事が出来ます。
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
を渡せるようにします。
package.json
{
"scripts": {
"dev": "IS_LOCAL=true next dev",
"exportDev": "IS_LOCAL=true next build && next export",
"export": "next build && next export"
}
}
次にnext.config.js
にて環境変数isLocal
を新たに追加します。
next.config.js
/** @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
を自由に指定することができないので、出来ないなら別途環境変数を用意してあげれば良し、という手段でした。