NextJS如何实现同一页面同时匹配首页与用户名动态路由？

你之前直接用[username].js动态路由达不到预期，是因为Next.js有固定的路由匹配优先级：静态路由 > 动态路由 > 通配兜底路由。pages/[username].js属于单段动态路由，只会匹配/任意单段非根路径的请求，根本不会命中根路径/，根路径请求默认只会交给pages/index.js处理，所以单靠一个动态路由文件没法同时覆盖两类路由。

根据你是否要把两类页面逻辑收敛到同一个文件，选对应方案就行：

方案1：分文件维护（官方推荐，无额外兼容成本） #

这是最符合Next.js路由约定的写法，不用做特殊配置：

• 保留现有pages/index.js（App Router对应app/page.jsx），只写首页渲染逻辑
• 新建pages/[username].js（App Router对应app/[username]/page.jsx），专门写用户个人页逻辑，通过路由参数拿到用户名拉取数据渲染即可
  • Pages Router下用useRouter().query.username或者getServerSideProps的context.params.username获取路径里的用户名
  • App Router下直接通过组件props的params.username获取用户名

方案2：单文件兼容两类路由（适合逻辑强关联、不想拆文件的场景） #

如果你坚持把首页和用户页逻辑放在同一个入口文件里，根据你用的Next.js路由模式选对应写法：

Pages Router 版本（pages目录路由） #

1. 把现有pages/index.js重命名为pages/[[...slug]].js，这是可选全匹配路由，会同时命中根路径/和任意层级的子路径
2. 在文件内通过路由参数判断渲染对应内容，记得手动处理非预期的多段路径返回404，示例代码：

import { useRouter } from 'next/router'

export default function EntryPage() {
  const router = useRouter()
  const { slug } = router.query

  // 根路径场景：slug为空，渲染首页
  if (!slug || slug.length === 0) {
    return (
      <div>
        <h1>网站首页</h1>
        {/* 首页内容 */}
      </div>
    )
  }

  // 多段路径不属于用户页规则，直接返回404
  if (slug.length > 1) {
    return <div>404 页面不存在</div>
  }

  // 单段路径为用户名，渲染个人页
  const username = slug[0]
  return (
    <div>
      <h1>用户 {username} 的个人主页</h1>
      {/* 个人页内容 */}
    </div>
  )
}

// 服务端渲染场景下的参数判断逻辑
export async function getServerSideProps(context) {
  const { slug } = context.params
  if (!slug || slug.length === 0) {
    // 拉取首页所需数据
    return { props: { pageData: {} } }
  }
  if (slug.length > 1) {
    return { notFound: true }
  }
  const username = slug[0]
  // 拉取对应用户数据
  // const userData = await fetchUser(username)
  return { props: { username } }
}

App Router 版本（Next.js 13+ app目录路由） #

1. 在app目录下新建[[username]]文件夹，在文件夹内创建page.jsx作为入口，可选动态段[[username]]会自动同时匹配/和/[username]两类路由
2. 通过组件参数判断渲染内容，示例代码：

// app/[[username]]/page.jsx
export default function EntryPage({ params }) {
  // 根路径下username参数不存在，渲染首页
  if (!params?.username) {
    return (
      <div>
        <h1>网站首页</h1>
        {/* 首页内容 */}
      </div>
    )
  }

  const username = params.username
  return (
    <div>
      <h1>用户 {username} 的个人主页</h1>
      {/* 个人页内容 */}
    </div>
  )
}

方案3：保留index.js文件名，通过重写转发路由 #

如果你不想改动现有index.js的文件名，可以通过Next.js的重写规则把单段路径的请求转发到根路径处理：

1. 打开项目根目录的next.config.js，添加重写配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      // 注意：如果有/login、/about这类静态单段路径，要把对应的重写规则写在前面优先匹配
      {
        source: '/:username',
        destination: '/',
      },
    ]
  },
}

module.exports = nextConfig

2. 重启开发服务后，在现有pages/index.js里就可以通过useRouter().query.username拿到路径里的用户名，判断渲染首页还是用户页即可。

• 不要尝试在pages/[username].js里写根路径的渲染逻辑，路由优先级规则决定了根路径请求永远不会进入这个文件
• 用全匹配路由或者重写方案时，一定要手动处理静态路由、多段路径的匹配逻辑，避免出现非预期的页面匹配

内容的提问来源于stack exchange，提问作者kasayiyanyatir