如何在 next.js 中的 patName 之前使用 slug？

Question

我现在正在使用 next.js 和 graphql。

我需要在 url 中设置工作区名称。

localhost/[workspace slug]/memeber
localhost/[workspace slug]/admin

像那样

你能帮助我吗？

Answer 1

如果你想实现动态路由，你可以使用 Next.js 内置在路由系统中，例如，在 next.js 的最新版本中，你可以在名为workspace的pages内创建一个文件夹，在workspace空间内创建一个名为[id]的文件夹，其中包含一个文件 ex。 [role].js 。
所以像/workspace/1234/admin这样的路由会被服务器自动匹配。

否则，您可以使用 express 之类的自定义服务器并使用以下内容：

  server.get('/:workspaceSlug/admin', (req, res) => {
    const { workspaceSlug} = req.params
    return app.render(req, res, '/admin', {workspaceSlug})
  })
  server.get('/:workspaceSlug/member', (req, res) => {
    const { workspaceSlug} = req.params
    return app.render(req, res, '/member', {workspaceSlug})
  })

Answer 2

在文件夹“pages”中创建一个名为 [slug] 的文件夹在该文件夹中创建 admin.js 和 member.js。 这样你就可以访问 localhost/[slug]/member & localhost/[slug]/admin。

pages
  |--[slug]
       |--admin.js  
       |--member.js

在页面内部，您可以使用useRouter检索 [slug] 的值

管理员.js

import { useRouter } from "next/router";

const Admin = (query) => {
  const router = useRouter();

  return (
    <div>
      <h1>Admin</h1>
      <p>{router.query.id}</p>
    </div>
  );
};

export default Admin;

成员.js：

import { useRouter } from "next/router";

const Member = (query) => {
  const router = useRouter();

  return (
    <div>
      <h1>Member</h1>
      <p>{router.query.id}</p>
    </div>
  );
};

export default Member;

Answer 3

在页面内创建一个名为 [slug] 的文件夹，在其中添加您的文件。 之后，您将能够使用您的文件，例如：
本地主机/人/成员
本地主机/女性/成员