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

Question

I am using next.js and graphql now.

I need to set the workspace name in url.

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

like that

Can you help me?

Answer 1

If you want to implement dynaming routing you can use Next.js built in routing system , for example with last version of next.js you can create a folder inside pages called workspace , inside workspace a folder called [id] which containes a file ex. [role].js .
So a route like /workspace/1234/admin will be automatically matched by the server.

Otherwise you can use a custom server like express and use something like this:

  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

Inside folder "pages" create a folder called [slug] In that folder create admin.js and member.js. This way you can access localhost/[slug]/member & localhost/[slug]/admin.

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

Inside the page, you can retrieve the value of [slug] by using useRouter

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;

Answer 3

Create a folder named [slug] inside pages, inside that add your files. After that you will be able to use your files for example:
localhost/men/member
localhost/women/member