Next.js路由异常：访问/auth页面出现404错误求助

核心问题 #

你用的是Next.js 13+的App Router模式，路由规则和旧版Pages Router完全不同，你之前的文件命名、目录结构都不符合App Router的要求。

修复步骤 #

1. 调整目录结构（关键）

App Router要求：每个路由对应一个文件夹，页面文件必须命名为page.js。

• 创建/src/app/auth文件夹
• 将你现有auth.js里的代码，迁移到/src/app/auth/page.js文件中（文件名必须是page.js，不能是auth.js）

2. 验证正确的目录结构

你的项目基础结构应该是这样：

src/
  app/
    page.js          # 对应根路由 /
    auth/
      page.js        # 对应 /auth 路由
  components/
    auth/
      FirebaseAuth.js

3. 修正Link组件的语法错误

你的Link按钮代码里有个CSS类名语法错误：hover: text-xl里冒号后不能有空格，修正后：

<li>
  <Link href="/auth">
    <p className="h-8 w-17 px-3 py-1 hover:text-xl font-burtons text-green-700 bg-gray-900">Login</p>
  </Link>
</li>

同时确保你在使用Link组件时已经正确导入：

import Link from 'next/link';

4. 重启开发服务器

调整完目录和代码后，执行npm run dev重启服务，再访问localhost:3000/auth即可正常打开页面。

补充说明 #

你之前尝试把auth.js放在/src/app或/src/app/pages都无效，是因为App Router模式下没有pages文件夹的概念，所有页面都要放在app目录下的对应路由文件夹里，且必须命名为page.js。

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