如何在 Next js 框架中解析客户端的动态路由

Question

我目前正在使用完全静态生成的 Next js，因为我想从 S3 + 云端服务我的所有页面（不涉及服务器）。 Next js 对此有很好的支持，除非涉及动态页面（例如：/posts/:id）。解决此类场景的所有框架功能都涉及在构建时呈现所有可通过的页面（这是不可行的）或让服务器呈现这些具有动态路由的页面（因此，使站点成为混合应用程序）。为了继续保持完全静态，我需要有办法解决这个问题。在创建 React 应用程序时，可以使用 react-router 并在客户端解析路由，这正是我想为动态路由做的。但据我所知，next js 和 react-router 不兼容，所以显然这不是一个选项。

Answer 1

据我所知，我认为支持 SSG 上的动态路由。动态路由功能独立于 getServerSideProps 或 getStaticProps。你可以只使用 next/router 来获取你需要的参数并相应地呈现你的页面。

这里是官方例子

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { pid } = router.query

  return <p>Post: {pid}</p>
}

export default Post

参考

https://nextjs.org/docs/routing/dynamic-routes

如何在 Next js 框架中解析客户端的动态路由

How to resolve dynamic routes on client side in Next js framework

react-router

next.js

client-side

dynamic-routing