Vercel Next.js 環境ごとに title, favicon を変えたい

Vercel にホストした Next.js のアプリがあり、local環境、preview (ステージング)、本番環境があり開発中の確認で今どれを見ているのかドメインを見なくても解るように title と favicon を変更して判別しやすいようにした

環境を判定する

Vercel の preview モードの NODE_ENV は production なので、VERCEL_ENV を使って判定するようにする

VERCEL_ENV
The Environment that the app is deployed and running on. The value can be either production, preview, or development.
cf. System Environment Variables Overview

下記のように場合分けできる

local 環境は NODE_ENV が development のとき
preview 環境は NODE_ENV が production かつ VERCEL_ENV が preview のとき
production 環境は NODE_ENV が production かつ VERCEL_ENV が production のとき

※ NODE_ENV === 'production' は preview 又は production 環境となる

環境を判定する変数を定義する

Next.js を使っているのでクライアントサイドで VERCEL_ENV を使いたい場合は NEXT_PUBLIC_VERCEL_ENV とすれば良い

// config.ts
const getVercelEnv = () => {
  const env = process.env.NEXT_PUBLIC_VERCEL_ENV ?? 'development';
  switch (env) {
    case 'production': {
      return 'production';
    }
    case 'preview': {
      return 'preview';
    }
    default: {
      return 'development';
    }
  }
};

const VERCEL_ENV = getVercelEnv(); // 'production' | 'preview' | 'development'
// production or preview
const isProd = process.env.NODE_ENV === 'production';

export const IS_PRODUCTION = isProd && VERCEL_ENV === 'production';
export const IS_STG = isProd && VERCEL_ENV === 'preview';
export const IS_DEVELOPMENT = process.env.NODE_ENV === 'development';

title, favicon を環境ごとに変更する

先ほど作成した変数を利用して title に [DEV], [STG] という prefix を付けたり、favicon の画像を変更してしまえば良い

// SiteHead.tsx
import { FC } from 'react';
import Head from 'next/head';
import {IS_PRODUCTION, IS_PRODUCTION, SITE_TITLE} from '@/configs';

const titlePrefix = IS_PRODUCTION ? '' : IS_STG ? '[STG]' : '[DEV]';
const favicon = IS_PRODUCTION ? '/favicon.ico' : IS_STG ? '/favicon-stg.ico' : '/favicon-dev.ico';

type SiteHeadProps = {
  title?: string;
};

export const SiteHead: FC<SiteHeadProps> = ({ title }) => {
  const pageTitle = title ?? SITE_TITLE;

  return (
    <Head>
      <title>{titlePrefix}{pageTitle}</title>
      <link rel='icon' type='image/png' href={favicon} />
    </Head>
  );
};

これで、環境ごとにブラウザのタブに表示されるタイトルとアイコン (favicon) が替わるようになりました。どのタブがどの環境を見ていたのかぱっと見で解るようになったので認知コストが下がって良くなったと思います！

📝 Tips: 特定のブランチのプレビューだけを判別させる

Vercel では特定のブランチを preview モードでホストすることが出来ます
今回は main ブランチを preview でホストしてステージング環境としていました Vercel hosting

GitHub上に作られる preview 環境と main ブランチがホスティングされている preview 環境とで場合分けする方法メモ

特定のブランチを指定した環境変数を設定する

Vercel の管理画面から作成できる環境変数は preview ではブランチを指定することができます
cf. Environments Variables per Git branch – Vercel

Vercel Environment Variables

preview モードかつ main ブランチの時だけの環境変数を作成すれば、main ブランチがホストされてるステージング環境だと判定できます

Vercel Environment Variables

今回は NEXT_PUBLIC_STAGING という環境変数を作成しました。この環境変数は main ブランチの preview モードのみ存在し、それ以外の時は存在しません

const IS_MAIN_STAGING = process.env.NEXT_PUBLIC_STAGING ? true : false;

アプリ側で環境変数の有無を判定させれば特定のブランチの preview モードかどうかを判別させることも出来ました！

おわり ₍ᐢ. ̫.ᐢ₎

[参考]

ドイツレベル 1/700 コンテナ船コロンボエキスプレスプラモデル 05152

ドイツレベル(Revell)

Amazon

実装で学ぶフルスタックWeb開発エンジニアの視野と知識を広げる「一気通貫」型ハンズオン