Next.js 13动态路由触发404错误，商品详情页无法显示数据

核心问题：路由目录结构错误 #

你的项目在app目录下嵌套了pages文件夹，这违反了Next.js的路由规则——App Router（app目录）和Pages Router（根目录pages文件夹）是两套独立的路由体系，混用会导致路由匹配失效，触发404错误。

解决方案 #

方案一：使用App Router（Next.js 13+推荐） #

1. 调整文件夹结构：
   • 删除app/pages文件夹，在app目录下直接创建products文件夹，内部新建[id]子文件夹，放入page.js（App Router中动态路由页面必须放在[id]/page.js结构下）。最终结构：

     - app
       - components
         - Product.js
       - products
         - [id]
           - page.js
       - layout.js
       - page.js
     

2. 修改动态路由页面代码（app/products/[id]/page.js）：
   App Router的页面组件默认导出，通过params接收动态路由参数：

   import Product from '@/app/components/Product';
   
   export default async function ProductPage({ params }) {
     // 根据params.id拉取商品数据
     const product = await fetch(`https://your-api-url/products/${params.id}`).then(res => res.json());
     return <Product product={product} />;
   }
   

方案二：使用Pages Router #

1. 调整文件夹结构：
   • 将app/pages文件夹移动到项目根目录，根目录下的components文件夹可保留或移到根目录。最终结构：

     - components
       - Product.js
     - pages
       - products
         - [id].js
       - _app.js
       - index.js
     - app（若不需要App Router可直接删除）
     

2. 修改动态路由页面代码（pages/products/[id].js）：
   Pages Router通过getServerSideProps或getStaticProps获取路由参数和数据：

   import Product from '../../components/Product';
   
   function ProductPage({ product }) {
     return <Product product={product} />;
   }
   
   export async function getServerSideProps({ params }) {
     const res = await fetch(`https://your-api-url/products/${params.id}`);
     const product = await res.json();
     return { props: { product } };
   }
   
   export default ProductPage;
   

额外检查项 #

• 跳转链接必须使用实际商品ID，比如<Link href={/products/${product.id}}>，不能带占位符{id}。
• 确认动态路由文件名正确，必须是[id].js（或.jsx），括号不能遗漏。

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