Next报错：Maybe one of these should be marked as a client entry with “use client“

在最新的 Next13 中，初始化项目会默认创建一个 app 文件夹，app 默认情况下，目录中的页面是服务器组件，同时支持嵌套文件夹定义路由。

 

当在 app 文件夹中使用客户端组件时，就会产生 Maybe one of these should be marked as a client entry with "use client" 的报错。

要解决这个报错，只需要将 'use client'指令添加到文件顶部（在任何导入之前）。

添加指令后，当前页面组件下的所有组件都会作为客户端组件进行解析，不需要在每个组件中都添加。

它可以接收数据和可以访问 state 和 props，就像页面组件一样在 “pages” 目录中一样。

'use client'
 
export default function HomePage({ recentPosts }) {
  return (
    <div>
      {recentPosts.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  )
}