error：[ Server ] Error: Attempted to call useAtomValue() from the server but useAtomValue is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component

试图从服务器调用useAtomValue()，但useAtomValue在客户端。从服务器端调用客户端函数是不可能的，它只能作为组件呈现或传递给客户端组件的props。

当在 Next.js 中使用 Jotai 时，服务器端直接调用 Jotai 的钩子；所以我们无法直接在服务器组件中使用Jotai；那么如何解决呢？

解决方案：

1、我们需要确保 Jotai 的钩子只在客户端组件中使用，所以我们使用 'use client' 将Jotai 的使用限制在客户端组件中使用；如下图Counter组件

组件使Counter 用  'use client'

2、页面组件（app/page.tsx）是一个服务器组件，它不直接使用 Jotai，所以我们在page中使用上述Jotai的客户组件，如图

使用Jotai的客户组件 Counter

3、确保 Jotai 可以在整个应用中正常工作，所以我们需要向根布局节点中添加Jotai的Provider，如下图，layout是我nextJS项目的根布局

注意添加'use client'

完成以上3点，就可以在nextJS项目中顺利使用Joati了；

如果需要在服务器组件中访问或设置 Jotai 状态，就像图1那样，'use client'创建一个客户端包装组件，如果存在存在初始值传递，则可以客户端组件接受 props 并与 Jotai 交互。如下：

1、声明一个客户端组件CounterWrapper，组件接收一个初始值initialValue

2、服务端页面通过属性传参

这样就可以在 Next.js 的服务器组件和客户端组件中都使用 Jotai，同时避免在服务器端直接调用 Jotai 的钩子。

关键点总结：

1. 我们将 Jotai 的使用限制在标记为 'use client' 的客户端组件中。

2. 页面组件（app/page.tsx）是一个服务器组件，它不直接使用 Jotai，而是渲染一个使用 Jotai 的客户端组件（Counter）。

3. 我们在根布局中添加了 Jotai 的 Provider，确保 Jotai 可以在整个应用中正常工作。

4. 如果你需要在服务器组件中访问或设置 Jotai 状态，你可以创建一个客户端包装组件，该组件接受 props 并与 Jotai 交互。