使用参数将 NextJS 动态路由映射到页面

如何解决使用参数将 NextJS 动态路由映射到页面

我正在编写 NextJS 应用并使用 Static HTML Export，因为我希望我的应用成为 Jamstack 应用。

我正在尝试使用动态路由设置我的路由，这些路由基于作为路由一部分的用户名参数：localhost:3000/:username/posts

示例：localhost:3000/jdoe/posts

此路由将显示用户 jdoe 的所有帖子。

我希望我的 /posts 页面在没有 SSR 的情况下静态加载，然后通过 API 调用获取帖子。

但是，NextJS 会抛出 404，因为在构建时它不会为特定用户名生成页面。

有没有办法告诉 NextJS 所有对 /:username/posts 的请求都应该映射到 posts 页面？我想在没有 SSR 的情况下执行此操作，也不必使用查询字符串来指定用户名，但将其作为路径的一部分。我不需要为每个用户名生成一个页面。只希望我的所有用户加载同一个页面，并在路由中使用用户名参数来加载他们的帖子。

我的目录结构如下：

directory structure

这种方法在本地有效，因为有一个开发服务器。但是，当我部署到 Netlify 中的暂存环境时，我使用 next export 进行静态 HTML 导出，这就是路由中断并返回 404 的地方。

我正在使用 Next 10.0.5 并部署到 Netlify

提前致谢！

解决方法

很遗憾，您的用例可能无法使用 next export。如果您确实需要将其导出为静态 html，那么您可能需要使用 URL 参数。例如，/posts?username=john。

在您的页面中，您可以使用 useRouter 获取参数。这将适用于 next export。

import {useRouter} from 'next/router'

function Posts() {
  const router = useRouter();
  return <h1>{router.query.username}</h1>
}

export default Posts