1

我正在编写一个 NextJS 应用程序并使用静态 HTML 导出，因为我希望我的应用程序成为 Jamstack 应用程序。

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

例子：localhost:3000/jdoe/posts

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

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

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

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

我的目录结构如下所示：

目录结构

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

我正在使用 Next10.0.5并部署到 Netlify

提前致谢！

4

1 回答 1

0

不幸的是，它可能无法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
于 2021-04-09T06:00:47.380 回答