在 NextJS 路由中的 slug 前面添加符号（例如 @）

Posted 2023-02-22

【中文标题】在 NextJS 路由中的 slug 前面添加符号（例如 @）

【英文标题】：Adding symbol (e.g. @) in front of slug in NextJS route

【发布时间】：2021-05-29 00:36:39

【问题描述】：

我正在尝试在 slug URL 前添加 @。例如：https://example.com/@username。

我尝试了@[username].js，但这不起作用。

这可能吗？

【问题讨论】：

您只需在地址栏中输入，@username 将作为参数传递给您的动态路由[username].js。

【参考方案1】：

在您处理用户的后端，将@ 放在用户的用户名中。然后，只需将用户名视为纯文本 slug。这是因为 URL 中允许使用 @，就像 a、b 或 c。

Working example on StackBlitz.

pages/index.js:

import Link from 'next/link'

const username = '@foobar' // hardcoded example username, this will be recieved from your backend

export default function Index() 
    return (
        <Link href=username>
            <a>username</a>
        </Link>
    )

pages/[username].js:

import  useRouter  from 'next/router'

export default function Username() 
    const router = useRouter()
    const  username  = router.query

    return <h1>User: username</h1>

【参考方案2】：

尝试使用rewrites 和一些正则表达式。 Next.js 在后台使用path-to-regexp。

  async rewrites() 
    return [
      
        source: '/:userId(@[a-zA-Z0-9]+)/:id*',
        destination: "/user/:userId/:id*",
      
    ]
  

在客户端使用next/link:

<Link href=`@$userId`>
  <a>user</a>
</Link>