まくろぐ
更新:
作成:

何をするか?

/p/d4p4fr4/img-001.png

Next.js (React) などで Web サイトの開発を行うとき、その開発フェーズに応じて、開発環境 (dev)、ステージング環境 (stg)、本番環境 (prod) などを分けてリリースしていくことが多いと思います。 このとき、ブラウザ上でどのフェーズのサイトを表示しているのかが分かるように、画面上に dev 環境 のようなインジケーターを表示すると便利です(上図)。

ここでは、環境変数 NEXT_PUBLIC_TARGET_ENV の値が prod 以外のときに、上記のような表示をすることにします。

実装例

次のコンポーネント TargetEnvIndicator は、画面右下に環境名(例: dev 環境)を表示します。

components/common/TargetEnvIndicator.tsx
import { FC } from 'react'

/**
 * ビルド時のターゲット環境が `prod` 以外のときに、画面右下に環境名を表示します。
 */
export const TargetEnvIndicator: FC = () => {
  const target = process.env.NEXT_PUBLIC_TARGET_ENV ?? 'dev'

  // 本番環境 (prod) の場合は何も表示しない
  if (target === 'prod') return null

  return (
    <div
      style={{
        position: 'fixed',
        right: 10,
        bottom: 10,
        padding: '0.2em 0.6em',
        borderRadius: '0.2em',
        fontSize: '16pt',
        background: '#f008',
        color: '#fffd',
        zIndex: 1000,
      }}
    >
      {target} 環境
    </div>
  )
}

ターゲット環境は環境変数 NEXT_PUBLIC_TARGET_ENV で指定しますが、この環境変数が設定されていない場合は、デフォルトで「dev 環境」と表示します。

NEXT_PUBLIC_TARGET_ENV の値 表示内容
prod 何も表示しない
prod 以外 <その値> 環境
未設定 dev 環境

上記のコンポーネントは、アプリ全体に適用されるように、例えば、カスタム App コンポーネントの中で次のように記述しておきます。

pages/_app.tsx
// ...
import { TargetEnvIndicator } from '../components/common/TargetEnvIndicator'

export default function MyApp({ Component, pageProps }: AppProps): JSX.Element {
  // ...
  return (
    <>
      <Head>
        <title>My App</title>
        <meta name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width"
        />
      </Head>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Component {...pageProps} />
        <TargetEnvIndicator />
      </ThemeProvider>
    </>
  )
}

あとは、ビルド時 (next build) や開発時 (next dev) に、環境変数 NEXT_PUBLIC_TARGET_ENV を設定しておけば、その名前がブラウザ画面右下に表示されるようになります(prod の場合は何も表示しません)。

関連記事

まくろぐ
サイトマップまくへのメッセージ