[Next.js 13] ビルド時に特定のカスタムデータ属性を表示させない方法

はじめに

テスト用に設定しているdata-testidを本番環境で表示させない方法を調査した結果、便利な設定を見つけました。

TL;DR

Next.js Config内のcompiler.reactRemovePropertiesを設定することで、
data-testidのようなカスタムデータ属性を削除することができます。

// next.config.js
const nextConfig = {
// ...その他の設定
    compiler: {
      reactRemoveProperties: {
        properties: ['^data-testid$'],
      },
    },
}

本番環境でのみ有効化する場合

compilerの設定が開発環境に作用してしまっていたので、
compilerごと条件分岐での有効化をさせています。

// next.config.js
const nextConfig = {
// ...その他の設定
...(process.env.NODE_ENV === 'production' && {
    compiler: {
      reactRemoveProperties: {
        properties: ['^data-testid$'],
      },
    },
  }),

参考文献