Netlify部署Next.js项目失败：Build脚本返回非零退出码2

核心问题分析 #

你遇到的构建失败核心原因是违反了React Hook的规则：React Hook只能在React函数组件或自定义Hook的顶层调用。你的./src/pages/Update/index.js里的index函数不是标准的React组件或自定义Hook，却调用了useState，直接触发编译报错导致部署失败。

具体修复步骤 #

1. 修正index函数的定义 #

根据函数的用途，选择以下两种修复方式：

• 如果index是页面组件：
  确保它是首字母大写的函数（React组件的强制命名规范），并且以默认导出的形式存在：

  // 正确的页面组件写法
  export default function Update() {
    const [state, setState] = useState(initialValue);
    // 组件逻辑代码
    return <div>...</div>;
  }
  

  注意：Next.js的页面组件对应路由路径，Update/index.js对应/update路由，组件名建议和路由保持一致，避免用index作为组件名引发混淆。

• 如果index是工具函数：
  把useState移到调用该函数的React组件内部，或者将其改造为自定义Hook（自定义Hook必须以use开头命名）：

  // 自定义Hook写法：以use开头命名
  function useUpdateLogic() {
    const [state, setState] = useState(initialValue);
    // 原index函数的逻辑代码
    return { state, setState };
  }
  
  // 在React页面组件中使用该Hook
  export default function Update() {
    const { state, setState } = useUpdateLogic();
    return <div>...</div>;
  }
  

2. 处理非致命警告（规避后续风险） #

虽然警告不会直接导致构建失败，但建议一并修复：

• JSX属性换行警告：统一代码格式，保持属性换行规则一致；若不需要严格检查，可在ESLint配置中调整相关规则。
• useEffect依赖缺失警告：补全useEffect的依赖数组，确保所有用到的外部变量都被包含；如果确认某些依赖无需监听，可添加// eslint-disable-next-line react-hooks/exhaustive-deps注释（仅在明确无副作用影响时使用）。

3. 重新触发部署 #

修复代码后，提交变更到Git仓库，Netlify会自动触发重新构建；也可以手动在Netlify控制台的部署页面点击「Trigger deploy」按钮重新部署。

关键规则提醒 #

• 严格遵守React Hook规则：Hook只能在组件或自定义Hook的顶层调用，不能在循环、条件判断或普通工具函数中使用。
• Next.js页面组件必须默认导出，且首字母大写，避免命名冲突或识别异常。

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