Next.js：npm run buildするときにESLintで「Error: Missing "key" prop for element in iterator」が発生、その対処について

Next.jsをつかったWebアプリケーションをつくっているときに直面した問題です。
下記のコマンドをつかいESLintを含めた状態でWebアプリケーションを作成した。

npx create-next-app@latest

そして下記のコマンド実行時に

npm run build

ESLintでこのようなエラーが発生した。

Error: Missing "key" prop for element in iterator

たくろーどん

原因を調べたところ、こちらに示す記事が参考になった。

たくろーどん

公式ドキュメントではkeyについて、このように説明があります。

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.
キーは、どの項目が変更、追加、または削除されたかを React が識別するのに役立ちます。要素に安定したアイデンティティを与えるために、配列内の要素にキーを与える必要があります。

また下記のような記述も見られました。

A good rule of thumb is that elements inside the map() call need keys.
経験則として、map()呼び出し内の要素にはキーが必要です。

たくろーどん

作成したソースコードを見返してみると、map関数を使っている箇所でkeyの指定が抜けていました。
map関数で展開したindexをkeyに割り当てたところ、本題のESLintのエラーが解決しました。

変更前

{users.map((user, index) => (
                        <Input user={user} ref={{
                             // ...省略...
                        }} />
                    ))}

変更後

{users.map((user, index) => (
                        <Input key={index} user={user} ref={{
                             // ...省略...
                        }} />
                    ))}

たくろーどん

ただし、こちらの記事で指摘されているようにkeyにindexをつかうと不都合が起こる場合もあるようです。必ずしも使ってはいけないというわけではないですが、アンチパターンであることを記憶にとどめておきたいと思います。