将服务器端 prop 传递给客户端组件

Question

我试图弄清楚如何将在 nextjs 13 应用程序的服务器端声明的变量传递到我在组件文件之一中声明的客户端函数。正如您在我的代码中看到的，我试图将“x”变量传递到 Props 函数中，该函数是客户端组件的一部分。我正在尝试控制台记录传递到 Props 函数的变量，以查看变量是否正确传递。但它返回为“未定义”。有人可以向我解释如何传递这个变量吗？注意：我知道在当前示例中，我的组件不必位于客户端。我只是提供此代码作为示例来回答我的问题。

服务器端代码：

import Props from "./Components/props"

export default function Home() {
  const x = 'hello'

  return (
    <main>
      <Props data = {x} />
      <p>Hello</p>
    </main>
  )
}

客户端代码：

"use client"

export default function Props({ data }) {
    console.log(data);

    return (
        <p>Test</p>
      );
    };

错误：

error - SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)

Answer 1

从服务器传递到客户端组件的道具需要可序列化

这可能是一个原因

https://nextjs.org/docs/getting-started/react-essentials#passing-props-from-server-to-client-components-serialization