Next.js动态路由中如何获取id与title多个参数？

要实现http://localhost:3000/jobs/123/jobtitle这样的URL，需按照层级嵌套的方式创建路由文件，具体结构如下：

- src
    - pages
        - jobs
            - [id]
                - [title].js

参数获取说明 #

在[title].js文件中，可通过以下方式获取两个参数：

• 客户端组件中使用useRouter钩子：

  import { useRouter } from 'next/router'
  
  export default function JobTitlePage() {
    const router = useRouter()
    const { id, title } = router.query
    return <div>Job ID: {id}, Title: {title}</div>
  }
  

• 服务端渲染/静态生成场景下，在getServerSideProps/getStaticProps中获取：

  export async function getServerSideProps(context) {
    const { id, title } = context.params
    return {
      props: { id, title }
    }
  }
  

这种结构完全匹配URL的层级逻辑，/jobs/[id]/[title]对应路径中的每一段参数，避免了[id,title].js这类错误写法导致的路由匹配问题。

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