Next.js page.tsx导出useContext致Vercel部署报错如何解决？

算力阿峰

2026-6-23

解决Next.js App Router页面导出Context变量导致Vercel部署类型错误的问题

问题原因

Next.js的App Router对页面文件的导出有严格约定：除了默认导出的页面组件，只能导出官方允许的特殊字段（如metadata、generateMetadata、generateStaticParams等）。你在模块顶层直接导出const [weight] = React.useContext(Context)，会被Next.js判定为非法的页面导出字段，本地开发时校验宽松所以没问题，但Vercel部署时会执行严格的类型检查，因此报错。

解决方案

方案1：将useContext调用移到组件内部

把从Context获取变量的逻辑放到页面组件内部，不要在模块顶层导出：

import React from 'react';
import { Context } from './path-to-your-context';

export default function Home() {
  // 在组件内部调用useContext获取变量
  const [weight] = React.useContext(Context);
  
  return (
    <div>
      当前权重：{weight}
    </div>
  );
}

方案2：封装为自定义Hook（需复用变量时）

如果需要在多个组件或函数中复用这个Context变量，不要直接导出变量，而是封装成自定义Hook：

import React from 'react';
import { Context } from './path-to-your-context';

// 自定义Hook封装Context获取逻辑
export function useWeight() {
  const [weight] = React.useContext(Context);
  return weight;
}

export default function Home() {
  const weight = useWeight();
  
  return (
    <div>
      当前权重：{weight}
    </div>
  );
}

这样既可以在其他组件中通过useWeight()复用变量，又不会违反Next.js的页面导出规则。