Next.js 13项目npm run dev所有路由显示404问题求助

问题定位 #

所有路由显示404、控制台每3秒抛出GET /api/auth/session 404错误，核心原因是NextAuth.js的API路由未正确配置，导致客户端无法正常获取会话状态，进而引发路由异常。结合问题出现在添加登出功能后，以下是具体修复步骤：

修复操作 #

1. 补全NextAuth API路由 #

在Next.js 13 App Router模式下，必须创建指定结构的API路由文件：

• 在项目根目录创建app/api/auth/[...nextauth]/route.ts文件
• 填入基础配置（根据你的认证方式调整）：

import NextAuth from "next-auth";
// 引入你使用的认证提供商，比如Credentials、Google等
import CredentialsProvider from "next-auth/providers/credentials";

export const authOptions = {
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        email: { label: "邮箱", type: "email" },
        password: { label: "密码", type: "password" }
      },
      async authorize(credentials) {
        // 这里替换为你的实际用户认证逻辑
        const user = { id: "1", name: "测试用户", email: "test@example.com" };
        return user;
      }
    })
  ],
  session: { strategy: "jwt" },
  secret: process.env.NEXTAUTH_SECRET // 确保.env文件中存在该变量
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

2. 修复登出按钮的点击绑定 #

你的UserNav组件中，“Log out”菜单项未绑定点击事件，导致无法触发登出逻辑：

// 修改UserNav里的Log out项，添加onClick绑定
<DropdownMenuItem className="text-red-500" onClick={handleItemClick}>
  Log out
</DropdownMenuItem>

3. 完善Navbar组件的返回逻辑 #

当前Navbar在pathname === "/auth"时无返回内容，可能导致页面结构异常，补充默认返回：

export default function Navbar() {
  const pathname = usePathname();
  const { data: session } = useSession();
  const userImage = session?.user?.image;

  if (pathname !== "/auth") {
    // 现有导航栏代码
  }

  // 添加默认返回，避免页面空白
  return null;
}

4. 验证环境变量 #

确保.env文件中配置了NEXTAUTH_SECRET（可通过openssl rand -hex 32生成随机字符串），以及其他认证提供商所需的密钥（如Google CLIENT_ID等）。

5. 清理缓存并重启项目 #

执行以下命令彻底清理缓存后重启：

rm -rf .next
npm install
npm run dev

额外检查 #

• 确认页面文件都放在app目录下，比如首页是app/page.tsx，关于页是app/about/page.tsx，Next.js会自动根据文件结构生成路由。
• 检查NextAuthProvider的实现是否正确：

// nextauthprovider.tsx示例
'use client';
import { SessionProvider } from "next-auth/react";

export function NextAuthProvider({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}

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