NextAuth auth非函数TypeError服务器端错误求助

可能的原因及对应解决方案 #

1. 未配置NextAuth的API路由处理（v5必需） #

NextAuth v5需要将导出的handlers挂载到API路由中，否则认证系统无法正常初始化，导致auth函数无法被正确识别。

解决步骤：
在app/api/auth/[...nextauth]/目录下创建route.ts文件，内容如下：

import { handlers } from '@/auth' // 路径需与你的auth.ts位置匹配
export const { GET, POST } = handlers

2. 服务器组件中直接使用客户端交互函数 #

你的Navbar是async服务器组件，但onClick属于客户端行为，直接在服务器组件中调用signIn/signOut会导致环境不匹配。同时客户端事件处理必须在客户端组件中执行。

解决步骤：
将Navbar转为客户端组件，使用useSession钩子获取session，并在客户端环境中调用signIn/signOut：

修改Navbar.tsx：

'use client'
import Link from 'next/link'
import Image from 'next/image'
import { useSession, signIn, signOut } from 'next-auth/react'

const Navbar = () => {
    const { data: session } = useSession()
    
    return (
        <header className='px-5 py-3 bg-white shadow-sm font-work-sans'>
            <nav className='flex justify-between items-center'>
                <Link href="/">
                    <Image src="/logo1.png" alt='logo' width={144} height={30} />
                </Link>
                <div className='flex items-center gap-5'>
                    {session?.user ? (
                        <>
                            <Link href="/startup/create">
                                <span>Create</span>
                            </Link>

                            <button onClick={() => signOut()}>
                                <span>SignOut</span>
                            </button>

                            <Link href={`/user/${session.user.id}`}>
                                <span>{session.user.name}</span>
                            </Link>
                        </>
                    ) : (
                        <button onClick={() => signIn('github')}>
                            <span>Login</span>
                        </button>
                    )}
                </div>
            </nav>
        </header>
    )
}

export default Navbar

（注：修正了原代码中shadown-sm的拼写错误，并优化了session判断逻辑）

3. NextAuth版本不匹配 #

如果package.json中next-auth是v4版本，但使用了v5的导出方式（export const { auth, signIn, signOut } = NextAuth(...)），会导致导出的auth不是函数。

解决步骤：

• 检查package.json中的next-auth版本，若为v4，建议升级到v5 beta版本：

npm install next-auth@beta

4. 环境变量缺失 #

确保在.env.local中配置GitHub认证所需的环境变量：

GITHUB_ID=你的GitHub OAuth应用ID
GITHUB_SECRET=你的GitHub OAuth应用密钥
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=随机生成的密钥（可用`openssl rand -hex 32`生成）

验证步骤 #

1. 重启开发服务器（npm run dev）
2. 检查登录按钮是否正常显示，点击后能否跳转到GitHub认证页面
3. 认证完成后验证session是否正确展示，登出功能是否正常工作

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