如何通过 Chakra UI 使用 Nextjs 13 中的服务器组件

Question

我正在尝试在 Chakra UI 中使用 React Server 组件（使用 NextJS 13），但我认为这还不可能。

\n

来自 Chakra UI 文档 ( https://chakra-ui.com/getting-started/nextjs-guide ):\n

\n

在我的示例中，我想获取服务器组件中的数据，然后渲染它

\n

\r\n

\r\n

import { Text } from "@chakra-ui/react";\n\nasync function getData() {\n  const res = await fetch("http://localhost:3000/api/products");\n  if (!res.ok) {\n    throw new Error("Failed to fetch data");\n  }\n\n  return res.json();\n}\n\nexport default async function Page() {\n  const data = await getData();\n  return <Text>{data.length}</Text>;\n}

\r\n

\r\n

\r\n

\n

正如预期的那样，我收到一个错误：

\n

\n

./node_modules/@chakra-ui/accordion/dist/chunk\xe2\x80\x94JDQBKIKM.mjs\nReactServerComponentsError:\n您正在导入需要 useState 的组件。它仅在客户端组件中工作，但其父组件都没有标记为“使用客户端”，因此默认情况下它们是服务器组件。

\n

\n

因为我试图在服务器端组件中仅导入客户端兼容组件（文本）。

\n

有什么解决办法吗？

\n

Answer 1

正如文档中所建议的，您可以将 chakra-ui 组件包装在客户端组件中，如下所示：

// text.jsx
"use client";
import { Text } from "@chakra-ui/react";
export default Text;

现在只需从 导入文本组件text.jsx，而不是直接导入 chakra ui。