Next.js Auth本地正常但部署后出现服务器错误求助

详情 #

• 项目基于Next.js构建
• 认证功能使用NextAuth实现
• 本地运行npm run dev，通过localhost:3000访问时认证功能完全正常
• 部署后出现服务器错误
• 查看服务器日志未获取到有效报错信息

部署环境 #

• 在Vercel和Netlify两个平台部署均出现相同问题

补充信息 #

• 已严格按照NextAuth官方文档完成配置
• 确认环境变量配置无误
• 部署过程无报错提示

疑问 #

1. 有没有人遇到过NextAuth部署时的类似问题？
2. 部署环境中有没有遗漏的特定配置或步骤？
3. 如何排查并获取部署时服务器错误的详细信息？

相关代码 #

/src/app/api/auth/[...nextauth]/option.js

import GitHubProvider from "next-auth/providers/github";
import GoogleProvider from "next-auth/providers/google";
import CredentialsProvider from "next-auth/providers/credentials";

const options = {
  site : 'https://note-me-omega.vercel.app',
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
      profile(profile) {
        console.log("Github Profile", profile);
        let userRole = "github user";
        if (profile?.email === 'test@gmail.com') {
          userRole = "admin";
        }
        return { ...profile, role: userRole };
      },
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),

    CredentialsProvider({
      user : "credentials",
      credentials: {
        email: {
          label: "mail",
          type: "text",
          placeholder: "enter email",
        },
        password: {
          label: "password",
          type: "password",
          placeholder: "enter password",
        },
      },
      async authorize(credentials) {
        const user = { email: "user@mail.com", password: "123123" };
        if (
          credentials.email === user.email &&
          credentials.password === user.password
        ) {
          return user;
        } else {
          return null;
        }
      },
    }),
   
  ],
  database: process.env.MONGODB_URI,
  secret: process.env.NEXTAUTH_SECRET,
  theme: {
    colorScheme: "light", // "auto" | "dark" | "light"
    brandColor: "#5FA5F9", // Hex color code

export default options;

middleware.js

export {default} from "next-auth/middleware"

page.js

"use client"
import React, { useState } from 'react';
import Navbar from "../components/Navbar";
import Notes from "../components/Notes";
import axios from 'axios';
import { SessionProvider } from "next-auth/react"

import { useEffect } from 'react';

const fetchData = async () => {
  try {
    const response = await axios.get('/api/customers');
    const data = response.data;
    console.log('Data from API:', data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

export default function Home() {
  useEffect(() => {
    fetchData();
  }, []);

  const togglePublicNotes = () => {
    setShowPublicNotes(!showPublicNotes);
  };

  return (
    <SessionProvider className="">
      <Navbar onTogglePublicNotes={togglePublicNotes} />
      <Notes />
   </SessionProvider>
  );
}

部署错误 #

先解决代码里的明显问题：

1. option.js语法错误：theme对象和外层options对象都未闭合，部署环境的代码解析会严格报错，本地开发环境可能有容错机制。修正后的代码末尾应该是：

theme: {
    colorScheme: "light",
    brandColor: "#5FA5F9",
  }
};
export default options;

2. CredentialsProvider配置错误：字段user : "credentials"应为name: "Credentials"，这是NextAuth要求的标准字段名，配置错误会导致认证流程异常。

3. page.js变量未定义：togglePublicNotes函数中调用的setShowPublicNotes未声明，需补充状态定义：

const [showPublicNotes, setShowPublicNotes] = useState(false);

接下来是部署排查步骤：

• 获取详细错误日志：
  • Vercel：进入项目Dashboard的「Functions」标签，找到/api/auth/[...nextauth]函数，开启「Real-time Logs」后触发认证操作，即可看到具体报错信息。
  • Netlify：在「Functions」→「Logs」中筛选nextauth相关日志，或在部署设置中开启详细日志输出。
• 环境变量验证：
  确认部署平台的环境变量中NEXTAUTH_SECRET、GITHUB_ID、GITHUB_SECRET、GOOGLE_ID、GOOGLE_SECRET、MONGODB_URI均正确配置，注意本地.env文件不会自动同步到部署平台，需手动添加。
• NextAuth配置优化：
  • 删除硬编码的site字段，NextAuth会自动识别部署环境的域名，硬编码可能导致回调地址不匹配。
  • 若使用MongoDB，确认MONGODB_URI对应的数据库实例允许部署平台的IP访问（比如Atlas需将IP白名单设为0.0.0.0/0）。

很多开发者都遇到过类似问题，大多是语法错误、环境变量缺失或回调地址不匹配导致的。按上述步骤逐一排查修复，应该能解决部署后的认证错误。

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