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

des4xlb0 于 2023-06-22 发布在其他

关注(0)|答案(3)|浏览(154)

所以我在编写组件时开始使用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。

next.js

来源：https://stackoverflow.com/questions/76446101/what-type-should-return-a-server-side-component

3条答案

按热度按时间

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) {
 // ...
}

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

赞(0）回复(0）举报 2023-06-22

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>

赞(0）回复(0）举报 2023-06-22

p5cysglq3#

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

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

赞(0）回复(0）举报 2023-06-22

我来回答

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

3条答案

相关问题

热门标签

最新问答