next.js - 为 Nextjs 动态路由添加前缀

Question

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

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

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