Next.js 14.1.0 App目录构建报错：<Html>导入错误及useContext问题

1. Error: <Html> should not be imported outside of pages/_document #

原因 #

在App Router体系中，根布局文件（app/layout.tsx）无需手动导入Next.js的<Html>组件——该组件是Pages Router时期pages/_document.tsx的专属用法。App Router的根布局默认已包含<html>标签的上下文，手动导入会触发框架的兼容性校验报错。

修复方法 #

• 删除代码中所有import { Html } from 'next/document'语句
• 在根layout.tsx中直接使用原生<html>标签，示例代码：

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh-CN">
      <head>
        {/* 放置元数据、全局样式等内容 */}
      </head>
      <body>{children}</body>
    </html>
  )
}

2. TypeError: Cannot read properties of null (reading 'useContext') #

原因 #

该错误通常出现在服务器组件中使用了仅客户端可用的React Hook（如useContext），或是导入了未标记'use client'的客户端组件，导致服务端渲染阶段执行了依赖浏览器上下文的代码。App Router中组件默认是服务器组件，无法直接调用客户端Hook。

修复方法 #

• 检查根layout.tsx及其引用的所有组件，确认useContext的调用位置：
  • 若为自定义组件需要使用useContext，在组件顶部添加'use client'指令，标记为客户端组件：

    'use client';
    
    import { useContext } from 'react';
    import MyContext from './MyContext';
    
    export default function MyClientComponent() {
      const context = useContext(MyContext);
      // 组件逻辑
    }
    

  • 若为第三方库引发的问题，确认该库是否支持服务器组件；若不支持，将使用该库的组件标记为'use client'
• 确保useContext对应的上下文提供者（Provider）包裹在客户端组件层级中，或在根布局的客户端部分完成上下文初始化

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