Next.js自定义邮箱登录页提示next-auth/react模块未找到如何解决？

问题根因 #

• 你当前安装的是NextAuth V3版本，只有V4及以上版本才支持import { getCsrfToken } from "next-auth/react"的导入路径，V3版本的对应React相关工具导出路径为next-auth/client
• 额外路径错误：你的报错显示signin.js放在了pages/api/auth/目录下，自定义登录页属于普通前端页面，不能放在API路由目录中，需要移动到pages/auth/目录下

解决方案（二选一即可） #

方案1：适配现有V3版本 #

将pages/auth/signin.js中的导入语句替换为：

import { getCsrfToken } from "next-auth/client"

其余代码保持不变即可正常运行。

方案2：升级到NextAuth V4及以上版本 #

1. 卸载旧版本：

yarn remove next-auth

2. 安装最新稳定版：

yarn add next-auth@latest

升级完成后原有导入语句无需修改即可正常生效，注意升级后需要检查[...nextauth].js的配置是否符合V4语法规范，部分配置字段、回调参数和V3存在差异，需要同步调整。

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