Binding element 'children' implicitly has an 'any' type.ts(7031) in Next.js

While developing my personal portfolio using Next.js, I ran into an error where the prop "children" was not working. I am using tsx.

Layout.tsx

import styles from "./layout.module.css";

export default function Layout({ children, ...props }) {
  return (
    <>
      <main className={styles.main} {...props}>{children}</main>
    </>
  );
}

I tried using other props, defining the props, like I was from tutorials online, but none of them worked. ;(

Your filetype is .tsx, which is a TypeScript filetype. You have to either define the types of the props, or change the file's name to Layout.js to convert it to vanilla JavaScript.

If you want to use TypeScript:

import { ReactNode } from "react";
import styles from "./layout.module.css";

const type LayoutProps = {
  children: ReactNode;
  // Your other props here.
}

export default function Layout({ children, ...props }: LayoutProps) {
  return (
    <>
      <main className={styles.main} {...props}>{children}</main>
    </>
  );
}

The issue is that when TypeScript doesn't know the type of something, it will assume the type is any and complain. You could explicitly set the type as any to solve this problem, as well, but this is considered bad practice:

export default function Layout({ children, ...props }: any) {
  return (
    <>
      <main className={styles.main} {...props}>{children}</main>
    </>
  );
}