React.FC では発生しないエラーがNextPageを使ったところ発生しました


type Props = {
  nodes: Array<Node>;
};

const Index: NextPage<Props> = (props) => {
  const { nodes } = props;
  // 省略
}

このエラー自体はコンパイル時にエラーとして発生しないですが、eslintの設定上エラーを引き起こせたりエディタで警告出るので開発する上ではやはり避けられません

最初に出てきた案(ググった)としては、eslintに下記を追加して警告自体をなくす、というものです

rules: {
  'react/prop-types': 'off'
}

当然こちらで実装することは可能なのですが、TypeScriptを利用していて、わざわざその恩恵を排除するというのはチーム開発上選択でいないのでこちらはなしにしました

そして次に見つけたのが記事

this is a page in nextjs and the same error appear in my components too.
the problem is that eslint can’t understand the prop interface when I’m using arrow function.
https://github.com/jsx-eslint/eslint-plugin-react/issues/2777#issuecomment-683555883

通常のReact.FC等ではeslintが解析できていますが、NextjsになるとNextjsの型を認識することができず、それが問題となって、Propsを入れているけどそれをeslintが認識できていない、という状況に陥っていたっぽいです

なのでこのように明示的に型を追加することで対処してみたところ、eslintの警告はなくなり、綺麗に実装することができました！

React Private Routeのテスト