将服务器端 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

Answer 2

每当您想要从服务器端向客户端传递数据时，您需要返回一个对象，其中包含要传递给客户端的数据的键：值对。

服务器端

export const getServerSideProps = () {
  const x = 'hello';
  return {
    x
  }
}

客户端

export const Home = async (props) => {
  console.log(props.x);
}