Vercel部署Next.js使用useState等React Hooks出现构建错误

部署项目至Vercel时触发构建错误，错误在使用useEffect、useState等React Hooks时出现。
已尝试两种Hooks引入写法，构建后仍报相同错误：

// 第一种写法
import { useState } from 'react';

// 第二种写法
import React from 'react';

相关报错、代码参考截图：

该报错和Hooks的引入写法无关，核心是违反了React Hooks的使用规则，或存在Next.js版本适配问题，按以下顺序排查即可：

• 确认组件类型：Hooks仅支持在函数组件、自定义Hooks内调用，类组件中无法使用Hooks，若使用类组件需改写为函数组件形式
• 确认Hooks调用位置：Hooks必须在组件/自定义Hooks的顶层作用域调用，不能放在条件判断、循环、普通工具函数、事件回调的嵌套作用域内
• 确认Next.js版本适配：如果使用Next.js 13+的App Router模式，所有调用了useState/useEffect等客户端API的组件，必须在文件顶部第一行添加'use client'指令，服务端组件环境下直接调用Hooks会直接触发构建错误，这是该场景下最高发的问题
• 确认依赖一致性：删除本地node_modules文件夹与对应包管理工具的锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行依赖安装，先在本地运行npm run build验证构建通过后，再推送代码到Vercel触发部署
• 确认自定义Hooks命名：自定义Hooks必须以use作为名称开头，否则React的Hooks校验规则会判定为非法调用，触发报错

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