Next.js构建时遇Type 'Context'不可分配给'never'类型错误求助

错误原因 #

Next.js App Router的页面文件（如app/page.tsx）仅允许导出官方指定的内容：默认组件、metadata、generateMetadata、generateStaticParams等。你直接在页面文件中导出了PopupContext，违反了页面文件的导出规则，导致build阶段的类型校验失败。而npm run dev时类型检查相对宽松，所以未触发错误。

修复方案 #

1. 抽离Context到独立文件 #

创建单独文件存放PopupContext相关代码，比如app/contexts/PopupContext.tsx：

import { createContext } from 'react';

type iPopupContext = {
  popup: boolean;
  setPopup: (popup: boolean) => void;
};

const defaultState = {
  popup: false,
  setPopup: (popup: boolean) => {},
};

export const PopupContext = createContext<iPopupContext>(defaultState);

2. 在页面文件中导入并使用Context #

修改app/page.tsx，移除内部的Context定义，改为导入使用：

import { useState } from 'react';
import { PopupContext } from './contexts/PopupContext';

export default function Home() {
  // 替换any为boolean，符合TypeScript类型规范
  const [popup, setPopup] = useState<boolean>(false);
  
  return (
    <PopupContext.Provider value={{ popup, setPopup }}>
      {/* 放置你的页面内容 */}
    </PopupContext.Provider>
  );
}

3. 额外注意事项 #

• 确保PopupContext.Provider标签正确闭合（示例代码中存在未闭合问题，实际开发需避免）
• 尽量避免使用any类型，明确类型定义能减少后续类型错误

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