next.js 应该返回什么类型的服务器端组件

des4xlb0  于 2023-06-22  发布在  其他
关注(0)|答案(3)|浏览(153)

所以我在编写组件时开始使用Next.js提供的NextPage类型,因为我被解释为这是一个非常好的实践,但它只适用于客户端组件。换句话说,这个服务器组件抛出一个错误,因为它是一个async await

  • 组件 *:
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
  • 错误 *:
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)

服务器端组件应该返回什么类型(如果有的话)?或者我应该只把服务器组件编写成基本函数而不提类型?
我正在使用Next.js 13.4

wbgh16ku

wbgh16ku1#

NextPage用于Next.js的pages目录中的页面组件(设置路由的初始方式)。在app目录中,从Next.js 13开始,page.tsx的默认导出可以具有以下类型:

// app/page.tsx

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

paramssearchParams是您可以提供的唯一类型,它们将通过Next.js传递给您的组件。如果你不需要它们,你可以避免定义它们。返回类型大多数情况下是TypeScript的inferred,所以你不必输入它。
对于非页面组件,您应该将它们作为任何函数输入,同样,大多数情况下,您只需要输入其props,如果它有,返回类型为inferred

xqk2d5yq

xqk2d5yq2#

这是NextPage类型:

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

我认为这是为了用于页面目录的说明说。InitialProps可能引用从服务器端函数(getServerSideProps,getStaticProps)传递的props,这些props在app目录中不存在。在服务器组件中,它的类型将像这样自动推断
如果您有此页面:

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

其类型将是

// if you have props, {} will be populated with props
  const page: ({}: {}) => Promise<JSX.Element>
p5cysglq

p5cysglq3#

这个错误是typescript抛出的,因为你在react组件中使用async await,所以你必须定义react函数返回的结果类型
试试这个:

const Page: NextPage = async (): Promise<JSX.Element> => {
{/* your code */}
}

相关问题