Should I use NextPage Type?

[branlok]

I'm new to typescript

and typescript is throwing this error on Test

  Type '({ data }: InferGetServerSidePropsType<typeof getServerSideProps>) => JSX.Element' is not assignable to type 'FunctionComponent<{}> & { getInitialProps?(context: NextPageContext): {} | Promise<{}>; }'.
    Type '({ data }: InferGetServerSidePropsType<typeof getServerSideProps>) => JSX.Element' is not assignable to type 'FunctionComponent<{}>'.
      Types of parameters '__0' and 'props' are incompatible.
        Property 'data' is missing in type '{ children?: ReactNode; }' but required in type '{ data: any; }'.ts(2322)
test.tsx(20, 14): 'data' is declared here.

with the following code

import { InferGetServerSidePropsType, NextPage } from "next";
import { ReactChild } from "react";



const Test: NextPage = ({ data }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
    if (data) {
        console.log(data);
    }
  return <div>ok welcome to /test route </div>;
};

export async function getServerSideProps() {
  const res = await fetch(`http://localhost:3000/api/hello`).then((res) =>
    res.json()
  );

  console.log(res);
  return {
    props: { data: res }, // will be passed to the page component as props
  };
}

export default Test;

[thibautsabot]

Hello!

I see two ways of doing it.
The first one uses InferGetServerSidePropsType like you are suggesting:

const Test = ({
  data,
}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
  return <div>{data}</div>;
};

export async function getServerSideProps() {
  const res: string = await fetch(`http://localhost:3000/api/hello`).then(
    (res) => res.json()
  );

  return {
    props: { data: res },
  };
}

and the other one simply share an interface:

import { GetServerSidePropsResult } from "next";

interface Props {
  data: string;
}

const Test = ({ data }: Props) => {
  return <div>{data}</div>;
};

export async function getServerSideProps(): Promise<GetServerSidePropsResult<Props>> {
  const res = await fetch(`http://localhost:3000/api/hello`).then(
    (res) => res.json()
  );

  return {
    props: { data: res },
  };
}

or even

interface Props {
  data: string;
}

const Test = ({ data }: Props) => {
  return <div>{data}</div>;
};

export async function getServerSideProps() {
  const res = await fetch(`http://localhost:3000/api/hello`).then(
    (res) => res.json()
  );

  return {
    props: { data: res } as Props,
  };
}