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

Posted 2023-03-22

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

【英文标题】：How do I create user-customizable dynamic url with api-generated content in NextJS+React?

【发布时间】：2020-06-22 02:39:29

【问题描述】：

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

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

让pages/index.js在server.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？

【参考方案1】：

利用自定义 server.js 处理路由

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

【讨论】：

啊，我也是这么想的。基本上，使用 index.js 作为主路由器。猜这是唯一的方法。无法摆脱对项目的大重构，我猜，哈哈。感谢您的回答！ :)