如何在 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] 的文件夾，在其中添加您的文件。 之后，您將能夠使用您的文件，例如：
本地主機/人/成員
本地主機/女性/成員