时间戳

首页 > 解决方案 > 为 Nextjs 动态路由添加前缀

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

问题描述

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

每个用户都有一个可从 访问的公共配置文件。

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

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

提前致谢。

标签： next.js

解决方案

你现在可以这样做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>
}

推荐阅读