Next.js对接Strapi身份验证出现404及环境变量undefined问题

第一阶段：环境变量读取为undefined的原因 #

• Next.js 与 CRA（Create React App）的环境变量规范不同：REACT_APP_ 是 CRA 专属的环境变量前缀，Next.js 默认不会识别该前缀的变量，因此在浏览器端读取时返回undefined
• Next.js 要求所有需要暴露给浏览器端（客户端组件/前端代码）使用的环境变量，必须添加 NEXT_PUBLIC_ 前缀，这就是你修改前缀后环境变量能正常读取的原因

第二阶段：405 Method Not Allowed 报错原因及解决方案 #

405 错误代表请求的接口路径不支持当前使用的POST方法，结合Strapi的接口规则，常见原因及对应解决方法如下：

原因1：接口路径调用错误 #

Strapi v4 内置的本地身份认证登录接口默认路径为 POST /api/auth/local，你当前调用的 /api/login 或之前的 /api/auth/signin 都不是Strapi默认的登录路径，修改调用路径即可：

// login.js 中调用loginAPI时传入正确路径
loginAPI('api/auth/local', creds)

原因2：请求参数格式不符合Strapi要求 #

Strapi 登录接口要求的请求体格式为平层结构，不需要嵌套user字段，且用户标识字段名为identifier（支持传邮箱或用户名），修改请求参数即可：

// login.js 中修改creds构造逻辑
const creds = {
  identifier: emailEl.current.value,
  password: passwordEl.current.value
}

原因3：Strapi侧未开放接口权限 #

需要登录Strapi后台，进入「Users & Permissions Plugin」设置页，在Roles的Public角色配置中，勾选auth下的callback、local等相关接口权限，保存后重启Strapi生效。

附加：JSON解析错误解决 #

Unexpected token M in JSON at position 0 报错是因为接口返回405时，Strapi默认返回HTML格式的错误页面（开头字符为M对应Method的报错提示），而非JSON格式，修复接口调用问题后该报错会自动消失。

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