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

Question

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

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

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

那样

你能帮帮我吗？

Answer 1

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

否则你可以使用 custom server like 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] 的值

admin.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;

member.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;

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

how can I use slug before patName in next.js?

reactjs

server-side-rendering

next.js