Vercel にデプロイした Next.js のアプリで本番環境 (production) と開発環境 (development) / プレビュー (preview) とでアナリティクスなどを出し分けけしたく NODE_ENV で判別していたのですが、プレビュー時に本番環境と同じになってしまう問題にハマったのでメモ

Vercel の preview 環境の NODE_ENV は `production`

Vercel の preview 環境の NODE_ENV は production とおいう仕様のようです。
なので下記のように process.env.NODE_ENV === 'production' で判定しているとプレビュー時に本番環境と同じになってしまいます

const IS_PRODUCTION = process.env.NODE_ENV === 'production';

if (IS_PRODUCTION) {
  return 'Production 用の何か'; // BUG preview 時にも実行される
}

`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 | Vercel Docs

Next.js でクラアンサイドで判定するのであれば NEXT_PUBLIC_VERCEL_ENV を使えばよい

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();
export const IS_PRODUCTION =
  process.env.NODE_ENV === 'production' && VERCEL_ENV === 'production';

if (IS_PRODUCTION) {
  return 'Production 用の何か'; // preview 時には実行されない
}