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

Question

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

Answer 1

一个解决方案（解决这个问题）是使用查询参数而不是路径参数

提醒一下，我们有这种类型的架构（文件）。

pages/
├─ user/
│  ├─ [id].tsx
├─ index.tsx
├─ _app.tsx

并且，我们在

output: 'export'

中使用

next.config.js

。

问题是我们无法访问此配置中的 /user/:id 页面（仅在 CSR 中）

解决办法就是在这个文件夹里加一个

index.tsx

pages/
├─ user/
│  ├─ [id].tsx
│  ├─ index.tsx  # NEW FILE HERE
├─ index.tsx
├─ _app.tsx

而这个

index.tsx

的内容是

import { useRouter } from 'next/router';
import { useEffect } from 'react';

const UserHome = () => {
    const router = useRouter();
    useEffect(() => {
        if (router.query.id) {
            router.push(`/user/${router.query.id}`);
        } else {
            router.push('/');
        }
    }, [router.query.id]);

    return <>Redirecting...</>;
};

export default UserHome;

为了更轻松地进行 URL 级访问，请在您的

trailingSlash: true

中使用

next.config.js

。这将允许使用

/user?id=abc

因为在这种情况下我们在 url 中得到 404（或者我们必须添加

.html

）...

从这个意义上说，要访问我们使用

/user?id=abc

的页面，它将重定向到

/user/abc

.

我知道这并不能完全回答原来的问题。 但是，对于许多情况（实验），它是有效的。这就是为什么我在这里分享这个。

Answer 2

据我所知，我认为支持 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