所以我在编写组件时开始使用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
。
3条答案
按热度按时间wbgh16ku1#
NextPage
用于Next.js的pages
目录中的页面组件(设置路由的初始方式)。在app
目录中,从Next.js 13开始,page.tsx
的默认导出可以具有以下类型:params
和searchParams
是您可以提供的唯一类型,它们将通过Next.js传递给您的组件。如果你不需要它们,你可以避免定义它们。返回类型大多数情况下是TypeScript的inferred,所以你不必输入它。对于非页面组件,您应该将它们作为任何函数输入,同样,大多数情况下,您只需要输入其
props
,如果它有,返回类型为inferred。xqk2d5yq2#
这是
NextPage
类型:我认为这是为了用于页面目录的说明说。
InitialProps
可能引用从服务器端函数(getServerSideProps,getStaticProps)传递的props,这些props在app
目录中不存在。在服务器组件中,它的类型将像这样自动推断如果您有此页面:
其类型将是
p5cysglq3#
这个错误是typescript抛出的,因为你在react组件中使用async await,所以你必须定义react函数返回的结果类型
试试这个: