Next.jsのchildrenのPropsに型をつける方法

レイアウトを作成した際に、childrenの型の付け方がわからなかったので調べた。

const Layout = ({ children }) => {
  return (
    <>{children}</>
  );
};
export default Layout;

修正方法

Propsの型定義を行うのはいつもの方法で行い、childrenの型はReactNodeで指定する。

import { ReactNode } from "react";

interface Props {
  children: ReactNode;
}

上記の型をPropsの型に指定。

const Layout = ({ children }: Props) => {
  return (
    <>{children}</>
  );
};
export default Layout;

これで型エラーも解消して、anyを撲滅。