Next.jsの共通コンポーネントのPropsに型をつける方法

コンポーネントのPropsに型がつけられない

レイアウトなどを共通コンポーネントを作成し、各コンポーネントで利用しようとすると、下記のようになるかと思います。

layout.tsx

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

そうしますと、eslintや使っているIDE（vscodeなど）の設定によっては、childrenがanyであるという警告が出てしまうことがあります。

こう修正します

なるべく警告は消しておきたいので、型定義を行いたいと思います。
reactのReactNodeが実体ですので、それを定義してあげる形となります。

layout.tsx

import { ReactNode } from "react";

interface Props {
  children: ReactNode;
}

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