Question

我定义了很多路由，其中一条路由专用于用户配置文件。

每个用户都有一个可通过访问的公开个人资料。

我尝试创建文件pages/@[username].js，但似乎不起作用。

有没有一种方法可以在不使用用户名传递@符号的情况下实现这种行为，因为这会使index.js处理首页变得非常复杂，并且我希望将代码分开。

谢谢。

Answer 1

您现在可以在 next.config.js

中这样做

module.exports = {
  async rewrites() {
    return [
      {
        source: '/@:username',
        destination: '/users/:username'
      }
    ]
  }
}

这将使任何指向 /@username 的链接转到 /users/[username] 文件，即使地址栏会显示 /@username。

然后，在您的 /pages/[username].tsx 文件中：

import { useRouter } from 'next/router'

export default function UserPage() {
  const { query = {} } = useRouter()

  return <div>User name is {query.username || 'missing'}</div>
}

Answer 2

Next.js尚不支持此功能。

您应该看这个issue。

在Nextjs动态路由中添加前缀

2 个答案: