Next.js/Reactのコンポーネントのreturn文の中でmapメソッドを書く時、繰り返す要素(一番外の要素)にユニーク(一意)なkeyプロパティを付ける必要があります。付けないと以下のエラーメッセージが表示されます。
Warning: Each child in a list should have a unique “key” prop.
keyをつけてもエラーが消えない?
以下は、keyプロパティを付けていてもエラーが消えない例です。
return ( <ul> posts.map(post => (<> <li key={post.id}>post.title</li> </>)) </ul> )
エラーが消えない原因は、<></>です。これを消せばエラーは消えます。実際に私がエラーにはまった原因がこれでした。複雑で長いコードを書いていたので、この単純なミスに気づきませんでした。