Nextjs动态路由添加前缀

Question

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

每个用户都有一个可通过 HTTP://example.com/@username 访问的公共配置文件。

我尝试过创建文件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>
}