如何避免CLIENT_FETCH_ERROR时浏览器跳转到/api/auth/error？

问题核心在于即使设置了redirect: false，服务器宕机时的网络错误可能触发next-auth内部的默认跳转逻辑，同时next-pwa的缓存策略也可能干扰错误处理。可以通过以下步骤解决：

1. 修正登录函数的错误处理逻辑 #

确保redirect: false严格生效，并在catch块中阻止默认跳转：

async function signInHandler({ username, password }: { username: string, password: string }) {
  if (!username || !password) return;

  try {
    const result = await signIn('credentials', {
      username,
      password,
      callbackUrl: props.redirect,
      redirect: false // 强制禁止自动跳转，必须设置
    });

    // 处理服务器返回的业务错误（如账号密码错误）
    if (!result?.ok) {
      setError(result?.error || '用户名或密码错误');
      return;
    }

    // 登录成功后手动跳转
    push(redirectUrl || '/');
  } catch (err) {
    // 处理网络错误（如服务器宕机）
    setError('出现问题，离线模式仍可使用');
    // 阻止浏览器默认跳转行为
    window.event?.preventDefault();
  }
}

2. 配置next-pwa排除Auth相关API缓存 #

避免缓存/api/auth路径的请求，确保服务器宕机时请求直接失败而非返回缓存的错误页面：

在next.config.js中修改pwa配置：

const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true,
  exclude: [
    ({ url }) => url.pathname.startsWith('/api/auth/') // 排除Auth API的缓存
  ]
});

module.exports = withPWA({
  // 其他Next.js配置项
});

3. 检查NextAuth配置（可选） #

确保[...nextauth].ts中没有强制重定向的设置，credentials provider的authorize函数仅处理业务逻辑，不要触发重定向：

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        username: { label: 'Username', type: 'text' },
        password: { label: 'Password', type: 'password' }
      },
      async authorize(credentials) {
        // 仅处理账号密码验证逻辑，验证失败直接返回null或抛出错误
        if (!credentials?.username || !credentials?.password) return null;
        // 这里写你的验证逻辑
        const user = await verifyUser(credentials.username, credentials.password);
        return user || null;
      }
    })
  ],
  session: { strategy: 'jwt' },
  // 不要设置pages.error，让错误在当前页面处理
});

通过以上步骤，即可阻止服务器宕机时的自动跳转，在当前登录页面展示自定义错误信息。

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