Next.js路由404错误：无法访问portfolio与settings页面

问题原因 #

Next.js App Router的路由规则是基于目录结构+page.tsx文件生成的：只有放在对应路由目录下的page.tsx才会被识别为可访问的页面。你当前直接将portfolio.tsx、settings.tsx放在根目录或admin目录下，不符合App Router的路由规范，所以无法通过对应路径访问。

修复步骤 #

1. 修复/portfolio路由 #

• 在/app目录下创建portfolio子目录
• 将原/app/portfolio.tsx的代码移动到/app/portfolio/page.tsx文件中
• 完成后目录结构：

  /app
    layout.tsx
    page.tsx
    /portfolio
      page.tsx
  

  此时可通过/portfolio访问该页面

2. 修复/admin/settings路由 #

• 在/app/admin目录下创建settings子目录
• 将原/app/admin/settings.tsx的代码移动到/app/admin/settings/page.tsx文件中
• 完成后目录结构：

  /app/admin
    layout.tsx
    page.tsx
    /settings
      page.tsx
  

  此时原Link的/admin/settings路径即可正常访问

验证要点 #

确保所有需要通过URL访问的页面，都遵循[路由路径]/page.tsx的目录结构，App Router不会自动识别目录下非page.tsx命名的文件作为路由页面。

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