Next.js + Recoilで表示されるメッセージ「Duplicate atom key "xxxx" 」を非表示にする方法

概要

Recoilを利用しているときにkeyが重複していると表示されるメッセージとして「Duplicate atom key "xxxx" 」というものがあります。
これは重複しているkeyの名前を修正したら消えるのですが、Next.js + Recoilで開発していると実装上でkeyが重複していなくてもこのメッセージが表示される場合があります。

Recoilのissueでのコメント

コメント原文

Next.js has a concept of Pages. Imagine an SPA with multiple entry points, like an Admin and a Client App, both importing a module that declares a Recoil atom. So it doesn't have to be Next.js related. Essentially it's a single Node.js process that executes JS files (build process) that eventually declare the same atom several times. In development, when a file is changed, Next.js re-builds the relevant page entry file. Because it's the same Node.js process, the atom has already been declared. The same thing can happen with HMR when the file change triggers a rebuild of the whole file, or even when the atom is declared inside a component lifecycle/hook and only that is being hot-replaced.

DeepL翻訳

Next.jsには、Pagesという概念があります。AdminとClient Appのように、複数のエントリーポイントを持つSPAがあり、どちらもRecoilアトムを宣言したモジュールをインポートしていると想像してください。だから、Next.js関連である必要はないんです。基本的にはひとつのNode.jsプロセスで、最終的に同じアトムを複数回宣言するJSファイルを実行する（ビルドプロセス）ことになります。開発では、ファイルが変更されると、Next.jsは該当するページエントリーファイルを再ビルドします。同じNode.jsのプロセスなので、アトムはすでに宣言されています。HMRでも、ファイル変更がファイル全体の再構築のトリガーになったり、コンポーネントのライフサイクル/フックの中でアトムが宣言され、そこだけがホットリプレイスされたりすると、同じことが起こりえます。

つまり、Node.jsの同一プロセスでNext.jsに限らずRecoilのatomを宣言する部分が再構築に含まれれば起こりうるということになります。
ただ、Next.jsの場合はファイルが変更されると当該ファイルが含まれるページのエントリーファイルを再構築するため、この現象が起こりやすいようです。

解決策

ということで、このメッセージ自体は開発中には表示されてしまうものとして受け止めてしまって、非表示にしてしまいたいと思います。

環境

next 13.1.6
recoil 0.7.6
next-intercept-stdout 1.0.1

手順

bash_____terminal_____$ yarn add -D next-intercept-stdout

JavaScript_____next.config.js_____const withInterceptStdout = require('next-intercept-stdout');
const nextConfig = withInterceptStdout(
  {
    reactStrictMode: true,
  },
  (text) => (text.includes('Duplicate atom key') ? '' : text)
);

module.exports = nextConfig;

手順はこれだけで、こうすると当該メッセージが表示されなくなります。