Next.js+TypeScript项目React Server Components函数不支持报错求助

问题背景 #

基于TypeScript的Next.js 15.1.0项目，新增重置密码/忘记密码页面、将Redux及lib代码移入src目录后，所有页面触发该错误，已给客户端文件添加"use client"指令，尝试过重启、调整目录、清理依赖等操作无效。

排查与解决方案 #

1. 检查根布局（layout.tsx）的依赖 #

根布局默认是服务端组件，若它直接导入客户端专属代码（如Redux Provider、依赖window/localStorage的lib工具），会将客户端代码拉入服务端环境触发错误：

• 把Redux Provider封装成独立客户端组件：
  创建src/components/ReduxProvider.tsx，顶部添加"use client"，在组件内配置并渲染Redux Provider；
  然后在根layout.tsx中导入这个封装后的组件，而非直接在layout中编写Provider或导入Redux核心配置。

2. 隔离lib目录中的客户端专属代码 #

lib目录下若存在使用window/document/localStorage等客户端API的工具函数：

• 将这类函数移至客户端组件内，或封装为单独的客户端模块（顶部加"use client"）；
• 服务端组件绝对不能直接导入这类客户端工具，若需使用，通过客户端组件间接调用。

3. 检查新增/auth页面的导入逻辑 #

即使page.tsx是服务端组件，若直接导入非组件的客户端代码（如Redux hooks、客户端工具函数），会触发错误：

• 确保所有使用useSelector/useDispatch等Redux hooks的组件都标记为"use client"；
• 若auth页面需调用客户端工具，通过动态导入或客户端组件中转，而非直接导入工具文件。

4. 排查_not-found.tsx页面 #

构建错误指向/_not-found，说明该页面或其依赖存在问题：

• 检查_not-found.tsx是否导入了客户端专属组件/工具；
• 若使用了自定义_not-found页面，确认未在服务端逻辑中调用客户端API。

5. 用动态导入隔离客户端代码 #

若服务端组件需使用客户端组件，通过Next.js的dynamic导入并禁用SSR：

import dynamic from 'next/dynamic'

// 动态导入客户端组件，禁用服务端渲染
const ClientOnlyComponent = dynamic(() => import('./ClientOnlyComponent'), { ssr: false })

6. 验证路径别名配置 #

新增src目录后，检查tsconfig.json/jsconfig.json中的paths配置，确保路径别名正确指向src目录，避免服务端组件错误导入客户端目录的文件。

7. 排查第三方依赖的客户端专属导出 #

部分npm包的特定导出仅支持客户端环境（如某些UI库的hooks、redux-persist的持久化配置）：

• 确保服务端组件未导入这类客户端专属导出；
• 若使用redux-persist，需在客户端组件中初始化持久化配置，服务端组件仅导入基础store。

内容的提问来源于stack exchange，提问作者Sundas Mushtaq