Question 184546 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – What type should return a Server Side Component

So I just started using the NextPage type provided by Next.js while writing components because I was explained it’s a very good practice, but it works only on client side components. In other words this server component throws an error because it’s an async await.

The component:

const Page: NextPage = async () => {
  const { products }: { products: CoffeeInterface[] } = await getData(
    "/products"
  )

  return (
    <main className="flex min-h-screen flex-col bg-gradient-to-t from-slate-300 via-slate-200 to-gray-200">
      <SearchCoffee />
      <div className="flex gap-10 w-full">
        <FiltersDropdown />
        <CoffeesList coffees={products} />
      </div>
    </main>
  )
}

export default Page

The error:

Type '() => Promise<JSX.Element>' is not assignable to type 'NextPage'.
  Type '() => Promise<JSX.Element>' is not assignable to type 'FunctionComponent<{}> & { getInitialProps?(context: NextPageContext): {} | Promise<{}>; }'.
    Type '() => Promise<JSX.Element>' is not assignable to type 'FunctionComponent<{}>'.
      Type 'Promise<Element>' is missing the following properties from type 'ReactElement<any, any>': type, props, keyts(2322)

What type should a Server Side Component return, if any? Or should I just write the server components as basic functions without mentioning the type?

I’m using Next.js 13.4.

Tags:

3

Answers


  1. 0

    NextPage is used for page components in the pages directory of Next.js (the initial way of setting up routes). In the app directory since Next.js 13, the default export of a page.tsx could have this type:

    // app/page.tsx

interface PageProps {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
}
export default function Page({ params, searchParams }: PageProps) {
 // ...
}

    params and searchParams are the only type you can provide, and those will be passed to your component by Next.js. If you don’t need them, you can avoid defining them. The return type is most of the time inferred by TypeScript, so you don’t have to type it.

    For non-page components, you should type them as any function, again, most of the time, you only need to type its props if it has, the return type being inferred.

    Login or Signup to reply.
  2. 0

    this is NextPage type:

    /**
 * `Page` type, use it as a guide to create `pages`.
 */
export type NextPage<Props = {}, InitialProps = Props> = NextComponentType<
  NextPageContext,
  InitialProps,
  Props
>

    I think it is meant to be used for pages directory as the note says. InitialProps might refer to the props that passed from the serverside functions (getServerSideProps, getStaticProps) which do not exist in app directory. In server components, its type will inferred automatically like this

    if you have this page:

      const page = async ({}) => {...}

    its type will be

      // if you have props, {} will be populated with props
  const page: ({}: {}) => Promise<JSX.Element>
    Login or Signup to reply.
  3. 0

    This error is throw by the typescript because you are usin async await in react component so you have to define What the type of result is return from the react function

    Try This:

    const Page: NextPage = async (): Promise<JSX.Element> => {
{/* your code */}
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search