Next.js静态构建下动态路由获取任意ID的实现问询

1. 配置正确的文件结构 #

按照App Router的路由规则，在项目根目录下创建对应结构：

app/
└── questions/
    └── edit/
        └── [id]/
            └── page.js  # 或 page.tsx

其中[id]目录是动态路由的核心标识，所有/questions/edit/xxx格式的URL都会匹配到这个目录下的页面组件，不管xxx是现有还是未来新增的整数ID。

2. 开启静态导出配置 #

在项目根目录的next.config.js中添加静态构建配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  // 按需添加其他配置，例如trailingSlash: true适配部分静态托管服务
}

module.exports = nextConfig

3. 在页面中获取动态ID #

由于ID不固定且无需预生成，需使用客户端组件在浏览器端读取路由参数，代码示例如下：

'use client' // 必须添加该指令，将页面标记为客户端组件

import { useParams } from 'next/navigation'

export default function EditQuestionPage() {
  const params = useParams()
  const questionId = params.id // 此处获取到的ID等价于PHP的$_GET['id']

  return (
    <div>
      <h1>编辑问题 #{questionId}</h1>
      {/* 可基于questionId执行后续逻辑，比如请求对应问题的数据 */}
    </div>
  )
}

关键注意事项 #

• 选择客户端组件的原因：静态构建时服务器组件无法提前知晓所有可能的ID值，而客户端组件在浏览器加载后可直接读取当前URL参数，完美适配任意新增ID的场景。
• 静态托管适配：构建完成后，需确保托管服务配置SPA路由 fallback（即把所有404请求指向根目录的index.html），主流静态托管平台（如Vercel、Netlify、GitHub Pages）均支持该配置，确保任意/questions/edit/xxx路径都能正确加载页面并获取ID。

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