NextJS <Link>认证后无法跳转Dashboard页面，出现404错误

问题描述 #

使用NextJS Authentication的signIn()方法完成登录流程后，页面会显示指向Dashboard页面的<Link>链接，但点击该链接无法正常跳转，返回404错误。已尝试将dashboard.tsx文件放置在根目录、app目录下（移除pages文件夹），但问题仍未解决。

项目结构 #

PROJECTNAME
  /app
    pages.tsx 
  /pages
    dashboard.tsx
  /components 
    buttons.tsx

相关代码 #

components/buttons.tsx（问题出在authenticated分支的部分） #

'use client';

import Dashboard from '../app/pages/dashboard';
import { useSession, signIn, signOut } from 'next-auth/react';
import Image from 'next/image';
import Link from 'next/link';

export function SignInButton() {
    const { data: session, status } = useSession();
    console.log(session, status);
  
    if (status === 'loading') {
      return <>...</>;
    }

    if (status === "authenticated") {
      return (
        <Link href="/dashboard">
          <p>Dashboard</p>
        </Link>
      );
    }
    
    return <button className="btn btn-secondary" onClick={() => signIn()}>Sign in</button>;
}

export function SignOutButton() {
    return <button className="btn btn-primary" onClick={() => signOut()}>Sign out</button>;
}

pages/dashboard.tsx #

export default function dashboard() {
    return (
        <div>
            <p> TEST </p>        
        </div>
    )
}

解决方案 #

1. 理清Next.js路由规则 #

Next.js有两种路由体系，不能混用（过渡场景除外，易引发冲突）：

• Pages Router：页面文件直接放在/pages目录下，文件名就是路由路径，比如pages/dashboard.tsx对应/dashboard。
• App Router（Next.js 13+）：页面文件必须命名为page.tsx，放在对应路由的子目录中，比如app/dashboard/page.tsx对应/dashboard。

2. 问题根源 #

• 项目同时存在app和pages目录，Next.js会优先使用App Router，但app目录下没有对应/dashboard的路由结构，pages目录的路由被忽略，导致404。
• buttons.tsx中导入../app/pages/dashboard是完全无用的代码，还会造成混淆。

3. 具体修复步骤 #

方案一：保留Pages Router

• 删除app目录（如果不需要App Router功能），确保pages/dashboard.tsx存在，此时/dashboard路由会自动生效。
• 删除buttons.tsx中的import Dashboard from '../app/pages/dashboard';这行代码。

方案二：迁移到App Router

• 删除pages目录，在app目录下创建dashboard子目录，新建page.tsx文件，将原dashboard.tsx的代码复制进去，最终结构为app/dashboard/page.tsx。
• 将app/pages.tsx重命名为app/page.tsx（App Router要求首页文件必须是page.tsx）。
• 删除buttons.tsx中的import Dashboard from '../app/pages/dashboard';这行代码。

4. 额外检查 #

• 确保你的Next.js版本在13及以上（如果使用App Router）。
• 重启Next.js开发服务器，路由变更需要重启才能生效。

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