NextJS如何配置URL路径中间带动态字符串段的路由

NextJS 基于文件系统做路由映射，不需要手写路由配置表，要实现路径中间插入动态楼宇ID的效果，只需要调整目录结构即可，以下分两种主流路由模式说明操作步骤：

App Router（Next 13及以上版本默认路由模式） #

你当前项目原来的三个路由，是直接在app目录下创建defects、amenities、information三个文件夹存放页面对吧？按以下步骤调整：

• 在app根目录下新建名为[buildingId]的文件夹，方括号是NextJS动态路由段的固定标识，括号内的buildingId就是后续代码里读取楼宇ID的参数名
• 将原本在app根目录下的defects、amenities、information三个页面文件夹，整体剪切移动到新建的[buildingId]文件夹内

调整完成后的目录结构如下：

app/
└── [buildingId]/
    ├── defects/
    │   └── page.jsx // 匹配路径 /a83j-782a/defects
    ├── amenities/
    │   └── page.jsx // 匹配路径 /a83j-782a/amenities
    └── information/
        └── page.jsx // 匹配路径 /a83j-782a/information

参数读取方式 #

• 服务端组件直接从页面组件的入参params中解构获取：

// app/[buildingId]/defects/page.jsx
export default function DefectsPage({ params }) {
  const { buildingId } = params // 输出示例：a83j-782a
  return <div>当前访问楼宇：{buildingId}</div>
}

• 客户端组件通过useParams钩子读取：

'use client'
import { useParams } from 'next/navigation'

export default function DefectsClientComp() {
  const { buildingId } = useParams()
  return <div>当前访问楼宇：{buildingId}</div>
}

用户登录拿到楼宇ID后，直接调用路由方法router.push(/${buildingId}/defects)即可跳转到对应楼宇的功能页。

Pages Router（Next 12及更早版本的路由模式） #

如果你的项目用pages目录做路由，逻辑和App Router一致：

• 在pages根目录下新建[buildingId]文件夹
• 将原本在pages根目录下的defects.jsx、amenities.jsx、information.jsx三个页面文件，移动到[buildingId]文件夹内

调整完成后的目录结构：

pages/
└── [buildingId]/
    ├── defects.jsx
    ├── amenities.jsx
    └── information.jsx

参数读取方式 #

页面中通过next/router的useRouter钩子，从query对象中解构获取即可：

import { useRouter } from 'next/router'

export default function DefectsPage() {
  const { query } = useRouter()
  const { buildingId } = query
  return <div>当前访问楼宇：{buildingId}</div>
}

如果是服务端渲染场景，也可以直接在getServerSideProps的context参数中拿到该动态段的值。

补充说明：如果需要做楼宇权限校验，可以在动态段对应的布局文件、或者项目中间件中统一判断当前登录用户是否有权限访问传入的buildingId，无权限直接重定向到登录页或者404页面即可，不需要额外调整路由结构。

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