I've just started to learn Next, have some question. When I'm trying to send props from parent to child and I'm receiveng some error:
Type '({ name }: { name: any; }) => JSX.Element' is not assignable to type 'NextPage<{}, {}>'. Type '({ name }: { name: any; }) => JSX.Element' is not assignable to type 'FunctionComponent<{}> & { getInitialProps?(context: NextPageContext): {} | Promise<{}>; }'. Type '({ name }: { name: any; }) => JSX.Element' is not assignable to type 'FunctionComponent<{}>'.

Code

import type { GetServerSideProps, NextPage } from 'next';
import PositionData from './positionContainer';

const Home: NextPage = () => {
  return (
    <div>
      Weather
      <PositionData name={'hello'}/>
    </div>
  );
};
export default Home;

And component with error:

import { NextPage } from "next";

const PositionData: NextPage = ({name}:{name: any}) =>{
    return (
        <>
            <p>Current name is: {name}</p>
        </>
    );
};

export default PositionData;

CodePudding user response：

You have to create the property type for NextPage using the generic provided.

interface Props {
  name: any;
}

const PositionData: NextPage<Props> = ({name}:Props) =>{