Next.js动态路由未正常工作：访问时出现页面未找到错误求助

核心排查与修复步骤 #

• 确认路由结构合法性
  必须保证路由文件夹结构为app/something/[id]/page.tsx：[id]是独立文件夹，内部的page.tsx作为该动态路由的页面组件，不能将[id]直接作为文件名。

• 参数接收逻辑正确性
  在page.tsx中需正确解构params对象获取id，示例代码：

  // app/something/[id]/page.tsx
  export default function DynamicPage({ params }: { params: { id: string } }) {
    // 这里可调用Django API，比如用fetch请求`${process.env.NEXT_PUBLIC_DJANGO_API}/something/${params.id}`
    return <div>当前ID：{params.id}</div>;
  }
  

• 客户端跳转路径检查
  使用next/link跳转时，确保href是拼接后的动态路径，示例：

  import Link from 'next/link';
  
  // item.id为从数据中获取的实际ID值
  <Link href={`/something/${item.id}`}>查看详情</Link>
  

  禁止硬编码路径（如/something/id），必须用模板字符串拼接真实ID。

• 静态生成配置冲突处理
  如果page.tsx中添加了generateStaticParams函数，它只会预生成指定ID对应的路径，未预生成的ID访问会触发404。若需完全动态路由，直接删除该函数即可，Next.js默认会动态渲染所有未预生成的路径。

• 部署服务器路由配置（非Vercel场景）
  若部署到Nginx等第三方服务器，需配置服务器将所有路由请求转发至Next.js入口文件，避免服务器直接返回404。Nginx配置示例：

  location / {
    try_files $uri $uri/ /index.html;
  }
  

• API请求路径验证
  调用Django API时使用绝对路径（如结合环境变量process.env.NEXT_PUBLIC_DJANGO_API_URL拼接），避免相对路径在客户端请求时出现404，导致页面渲染失败。

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