新建NextJS项目无法访问根路由，持续重定向至/home

可能原因 #

1. 残留重定向配置：项目中可能存在全局重定向规则，或是根目录page.tsx里写了组件级的自动跳转逻辑。
2. 开发服务器缓存：Next.js的开发缓存可能保留了旧路由配置，导致新页面不生效。
3. 文件路径或内容错误：home/page.tsx的路径不符合App Router规范，或是文件本身有语法错误导致渲染失败。

具体解决步骤 #

• 检查并移除重定向规则：

  1. 打开next.config.js，如果存在类似以下的配置，直接删除或注释：

     const nextConfig = {
       async redirects() {
         return [
           {
             source: '/',
             destination: '/home',
             permanent: true,
           },
         ]
       },
     }
     module.exports = nextConfig
     

  2. 查看根目录app/page.tsx，如果有redirect('/home')这类代码，删除该行：

     import { redirect } from 'next/navigation'
     
     export default function RootPage() {
       // 移除这行重定向代码
       // redirect('/home')
       return <div>Vercel默认内容</div>
     }
     

• 清除缓存重启服务：
  停止当前开发服务器，执行命令清除缓存后重启：

  rm -rf .next
  npm run dev
  

• 验证home/page.tsx的正确性：

  1. 确保文件路径为app/home/page.tsx，层级正确。
  2. 检查文件内容是否无语法错误，比如：

     export default function HomePage() {
       return <div>Home页面内容</div>
     }
     

• 测试路由：
  修改完成后，访问http://localhost:3000/应显示根页面内容，访问http://localhost:3000/home应显示home页面内容。

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