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

試圖從服務(wù)器調(diào)用useAtomValue()，但useAtomValue在客戶端。從服務(wù)器端調(diào)用客戶端函數(shù)是不可能的，它只能作為組件呈現(xiàn)或傳遞給客戶端組件的props。

當(dāng)在 Next.js 中使用 Jotai 時，服務(wù)器端直接調(diào)用 Jotai 的鉤子；所以我們無法直接在服務(wù)器組件中使用Jotai；那么如何解決呢？

解決方案：

1、我們需要確保 Jotai 的鉤子只在客戶端組件中使用，所以我們使用?'use client' 將Jotai 的使用限制在客戶端組件中使用；如下圖Counter組件

組件使Counter 用 ?'use client'

2、頁面組件（app/page.tsx）是一個服務(wù)器組件，它不直接使用 Jotai，所以我們在page中使用上述Jotai的客戶組件，如圖

使用Jotai的客戶組件 Counter

3、確保 Jotai 可以在整個應(yīng)用中正常工作，所以我們需要向根布局節(jié)點中添加Jotai的Provider，如下圖，layout是我nextJS項目的根布局

注意添加'use client'

完成以上3點，就可以在nextJS項目中順利使用Joati了；

如果需要在服務(wù)器組件中訪問或設(shè)置 Jotai 狀態(tài)，就像圖1那樣，'use client'創(chuàng)建一個客戶端包裝組件，如果存在存在初始值傳遞，則可以客戶端組件接受 props 并與 Jotai 交互。如下：

1、聲明一個客戶端組件CounterWrapper，組件接收一個初始值initialValue

2、服務(wù)端頁面通過屬性傳參

這樣就可以在 Next.js 的服務(wù)器組件和客戶端組件中都使用 Jotai，同時避免在服務(wù)器端直接調(diào)用 Jotai 的鉤子。

關(guān)鍵點總結(jié)：

1. 我們將 Jotai 的使用限制在標(biāo)記為 'use client' 的客戶端組件中。

2. 頁面組件（app/page.tsx）是一個服務(wù)器組件，它不直接使用 Jotai，而是渲染一個使用 Jotai 的客戶端組件（Counter）。

3. 我們在根布局中添加了 Jotai 的 Provider，確保 Jotai 可以在整個應(yīng)用中正常工作。

4. 如果你需要在服務(wù)器組件中訪問或設(shè)置 Jotai 狀態(tài)，你可以創(chuàng)建一個客戶端包裝組件，該組件接受 props 并與 Jotai 交互。