Next.js 13.4.6动态ID渲染失效求助：无pages文件夹是否是原因？

不是单纯因为改用app文件夹导致的，核心原因是Next.js的App Router（app文件夹）和Pages Router（pages文件夹）的动态路由实现逻辑完全不同，你沿用Pages Router的写法自然会失效报错。

两者的关键差异如下：

• 动态路由的结构规则不同
  Pages Router里是用[id].js这类文件名创建动态路由，比如pages/posts/[id].js；而App Router需要创建名为[id]的文件夹，再在该文件夹内新建page.js（或page.tsx），结构为app/posts/[id]/page.js，这样访问/posts/123才能正确匹配路由。

• 参数获取方式不同
  Pages Router通过useRouter()的query对象获取动态参数：

  import { useRouter } from 'next/router'
  
  export default function Post() {
    const router = useRouter()
    const { id } = router.query
    return <p>Post ID: {id}</p>
  }
  

  App Router则直接通过页面组件的params props获取，或使用useParams()钩子：

  // 方式1：通过props解构
  export default function PostPage({ params }) {
    return <h1>Post ID: {params.id}</h1>
  }
  
  // 方式2：使用useParams钩子
  import { useParams } from 'next/navigation'
  
  export default function PostPage() {
    const params = useParams()
    return <h1>Post ID: {params.id}</h1>
  }
  

• 预渲染配置不同
  如果需要预渲染动态路由页面，Pages Router用getStaticPaths+getStaticProps，而App Router改用generateStaticParams函数：

  export async function generateStaticParams() {
    return [{ id: '1' }, { id: '2' }]
  }
  
  export default function PostPage({ params }) {
    return <h1>Post ID: {params.id}</h1>
  }
  

你可以对照以上差异检查自己的代码：

• 确认动态路由的文件夹/文件结构是否符合App Router规范
• 检查参数获取逻辑是不是用了App Router的方式
• 确保访问的路径对应app文件夹下的路由

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