如何在 NextJS+React 中使用 api 生成的内容创建用户可自定义的动态 url？

Question

我需要有关在带有 React 的 Nextjs 中自定义动态 url 的帮助。我创建了一个 Nextjs+React 应用程序，它利用自定义 server.js 来处理路由和 'static' 动态 url。现在我需要迁移这个现有的设置，以便能够使用用户选择从 CMS 定义的任何 slug，并且仍然呈现正确的页面（内容将从 api 检索）。

我认为我需要做的是：让我们有一个用户定义的 url ：www.host.com/some-blog-group/post-of-the-day

让server.js中的pages/index.js处理所有路由。

server.get('*', (req, res) => handle(req, res));

在 page/index.js 中，我需要将请求发送回后端，即。 http://backend.com/get-page/some-blog-group/post-of-the-day
后端将返回一个响应，该响应基本上由要为页面呈现的组件列表以及可能的类型和页面的其他完整数据组成（以帮助格式化和检索组件的 content/layout）。
然后，这些组件中的每一个都将根据需要渲染 point.3 提供的渲染数据。
多田！页面呈现没有问题。

这样的思路对吗？现有的应用程序已经有几十个页面（建议 Next.js 按文件夹设置 'statically'，并根据需要在 server.js 中重新路由以进行动态路由）。有没有更好的方法来迁移此设置？或者也许我一开始就不需要 Nextjs？

Answer 1

which utilizes custom server.js to handle routing

我假设是一个快速服务器，为什么不使用 nextjs routing？

您可以创建一个pages/test/index.js，内容如下：

import React from "react";
import Link from "next/link";

class Test extends React.Component {
  static async getInitialProps({ query }) {
    return { query };
  }

  render() {
    return (
      <div>
        <Link href="/">
          <a>home</a>
        </Link>
        <pre>
          {JSON.stringify(this.props.query, undefined, 2)}
        </pre>
      </div>
    );
  }
}

export default Test;

然后创建pages/test/[...all].js，内容如下：

import Test from "./index";
export default Test;

您应该能够打开 localhost/test/1/2/3 并获得如下查询：

{
  "all": [
    "1",
    "2",
    "3"
  ]
}

索引现在可以根据查询应用任何要呈现的逻辑。如果您需要根据查询发出请求，您可以使用 getInitialProps 来获取该请求。

如何在 NextJS+React 中使用 api 生成的内容创建用户可自定义的动态 url？

How do I create user-customizable dynamic url with api-generated content in NextJS+React?

javascript

reactjs

next.js