[Next.js] コンポーネントの引数keyの値がundefinedになる時の解決方法

Next.jsでコンポーネントの引数(プロパティ)keyの値がundefinedになる時の解決方法について説明します。

"key" はReactの予約語のため、コンポーネントの中で使用する引数として使えない

"key" はReactの予約語です。map関数の中で使った経験があると思います。

keyを別の名前(例: customKey)に変更することで解決できます。

page.tsx

<MyComponent customKey='test' />

my-component.tsx

const MyComponent = ({
    customKey,
}:{
    customKey: string,
}) => {
    console.log('customKey', customKey); // 'test'
    // ...
}

MyComponentの中で変数customKeyの名前をkeyに変更することも可能です。

my-component.tsx

const MyComponent = ({
    customKey: key,
}:{
    customKey: string,
}) => {
    console.log('key', key); // 'test'
    // ...
}