使用Next.js 14.1.0 App Router导入draftMode时出现next/headers错误求助

问题核心 #

next/headers是Next.js专属的服务器端API，仅能在Server Components或Server Actions中使用。你的client.ts如果标记了'use client'（客户端组件），就会触发这个报错——哪怕没有pages目录，客户端组件也无法访问服务器端专属API。

调试与解决步骤 #

• 检查client.ts顶部是否有'use client'指令：
  • 若有，且该文件不需要客户端交互逻辑（比如useState/useEffect这类钩子），直接移除指令，让文件默认成为Server Component，即可正常导入draftMode。
  • 若必须保留客户端组件，把draftMode相关逻辑拆分到单独的Server Component中，再通过props将预览状态传递给client.ts里的组件。
• 示例拆分方式：
  1. 创建服务器组件（如PreviewStatus.tsx）：

     import { draftMode } from 'next/headers';
     
     export default function PreviewStatus({ children }: { children: React.ReactNode }) {
       const { isEnabled } = draftMode();
       return <>{children(isEnabled)}</>;
     }
     

  2. 在客户端组件中接收状态：

     'use client';
     
     export default function ClientComponent() {
       return (
         <PreviewStatus>
           {(isPreview) => (
             <div>{isPreview ? '预览模式已开启' : '正常访问模式'}</div>
           )}
         </PreviewStatus>
       );
     }
     

• 排查依赖链：确认是否有其他客户端组件间接引入了这个包含draftMode导入的client.ts，导致服务器端API被客户端代码调用。

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