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

Question

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

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

1. 让所有路由由 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

后端将返回一个响应，该响应基本上包含要为页面呈现的组件列表，以及可能的页面类型和其他完整数据(以帮助格式化和检索组件的内容/布局)。

然后，每个组件都会根据需要渲染 point.3 给出的渲染数据。

田田!页面呈现没有问题。

这个思路正确吗？现有的应用程序已经有数十个页面(按照 Next.js 的建议按文件夹“静态”设置，并根据需要在 server.js 中重新路由以实现动态路由)。有更好的方法来迁移此设置吗？或者也许我一开始就不需要 Nextjs？

Answer 1

which utilizes custom server.js to handle routing

我假设有一个 express 服务器，为什么不使用 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获取该请求。