复制NextAuth.js示例代码运行报TypeError: Cannot convert undefined or null to object

这个报错是因为代码里调用Object.values(providers)时，传入的providers值为undefined或null，无法被转换为对象类型处理。
触发的根本原因是你项目的NextAuth配置存在问题，导致getProviders()请求返回了空值：

• 没有正确创建NextAuth的配置文件，或者配置文件存放路径错误，Next.js项目要求NextAuth的配置文件必须存放在pages/api/auth/[...nextauth].js路径下
• 配置文件内没有正确声明可用的登录提供商，或者对应提供商的参数配置错误
• 本地开发环境的环境变量配置缺失或错误，导致NextAuth无法正常初始化

1. 确认配置文件路径正确
   检查项目根目录下是否存在pages/api/auth/[...nextauth].js文件，如果不存在需要手动创建，文件示例代码如下：

import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"
// 其他登录提供商可按需引入，比如GitHub、邮箱登录等

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    // 在这里添加更多你需要使用的登录提供商
  ],
  secret: process.env.NEXTAUTH_SECRET,
  // 其他NextAuth配置可按需补充
}

export default NextAuth(authOptions)

2. 配置对应环境变量
   在项目根目录的.env.local文件中添加对应参数：

# 以Google登录为例，填入你在Google开放平台申请的对应凭证
GOOGLE_CLIENT_ID=你申请的客户端ID
GOOGLE_CLIENT_SECRET=你申请的客户端密钥
# NextAuth加密用密钥，可通过openssl rand -hex 32命令生成随机字符串填入
NEXTAUTH_SECRET=你生成的随机密钥

3. 给组件增加空值兜底逻辑
   修改你的登录页面代码，避免空值触发报错：

import { getProviders, signIn as SignIntoProvider } from "next-auth/react"

function signIn({ providers }) {
    // 空值时返回加载提示
    if (!providers) return <div>加载登录选项中...</div>
    return (
        <>
            {Object.values(providers).map((provider) => (
                <div key={provider.name}>
                    <button onClick={() => SignIntoProvider(provider.id)}>
                        Sign in with {provider.name}
                    </button>
                </div>
            ))}
        </>
    )
}

export async function getServerSideProps() {
    const providers = await getProviders();
    return {
        props: {
            // 空值兜底返回空对象
            providers: providers ?? {}
        }
    }
}

export default signIn

4. 重启开发服务
   修改完所有配置后重新运行npm run dev启动项目，验证问题是否解决。

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