如何在Next.js中实现Nuxt.js的NuxtPage路由嵌套效果

要在Next.js中复刻Nuxt.js里通过<NuxtPage>在父页面渲染子路由、避免布局代码重复的效果，可通过动态导入子组件+路由校验的方式实现，以下是基于Pages Router的具体方案：

一、对齐Nuxt.js的路由目录结构 #

先调整Next.js的pages目录，和Nuxt的结构保持一致：

-| pages/
---| [username]/
------| stats.tsx
------| settings.tsx
------| about.tsx
------| index.tsx
---| [username].tsx
---| index.tsx

• [username].tsx：作为父页面，承载公共布局（如用户信息栏、导航），负责渲染子路由组件
• [username]/目录下的文件：仅包含子页面的内容逻辑，无需重复写布局

二、实现父页面[username].tsx #

通过useRouter获取当前路由信息，动态导入对应子组件，同时处理路由有效性校验和404场景，还能向子组件传递props：

import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'

// 定义允许的子路由列表，对应[username]目录下的文件
const allowedSubRoutes = ['stats', 'settings', 'about', ''] // 空字符串对应index.tsx

export default function UserProfileLayout() {
  const router = useRouter()
  const [ChildComponent, setChildComponent] = useState<React.FC<any> | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [notFound, setNotFound] = useState(false)

  useEffect(() => {
    const loadChildComponent = async () => {
      setIsLoading(true)
      setNotFound(false)
      
      // 解析当前子路由：比如/@johndoe123/stats的子路由为'stats'，/@johndoe123为空
      const subRoute = router.asPath.split('/').slice(2).join('/') || ''

      // 校验子路由是否合法
      if (!allowedSubRoutes.includes(subRoute)) {
        setNotFound(true)
        setIsLoading(false)
        return
      }

      try {
        // 动态导入子组件，空路由对应index.tsx
        const module = await import(`./[username]/${subRoute || 'index'}`)
        setChildComponent(module.default)
      } catch (err) {
        setNotFound(true)
      } finally {
        setIsLoading(false)
      }
    }

    // 确保路由就绪后再加载组件
    if (router.isReady) {
      loadChildComponent()
    } else {
      const handleRouteReady = () => {
        loadChildComponent()
        router.events.off('routeChangeComplete', handleRouteReady)
      }
      router.events.on('routeChangeComplete', handleRouteReady)
    }
  }, [router])

  if (isLoading) return <div>加载中...</div>
  if (notFound) return <div>Page not found</div>

  return (
    <div className="user-profile-container">
      {/* 公共布局区域：所有子页面共享的内容 */}
      <header>
        <h1>用户主页：{router.query.username}</h1>
        <nav>
          <a href={`/${router.query.username}/stats`}>统计</a>
          <a href={`/${router.query.username}/settings`}>设置</a>
          <a href={`/${router.query.username}/about`}>关于</a>
        </nav>
      </header>

      {/* 渲染子组件并传递props */}
      {ChildComponent && <ChildComponent foobar={123} />}
    </div>
  )
}

三、子页面示例（如stats.tsx） #

子页面只需专注内容逻辑，无需重复布局：

interface StatsProps {
  foobar: number
}

export default function StatsPage({ foobar }: StatsProps) {
  return (
    <section>
      <h2>用户统计数据</h2>
      <p>父页面传递的foobar值：{foobar}</p>
    </section>
  )
}

四、方案优势 #

1. 完全对齐Nuxt.js的路由逻辑：访问/@johndoe123时渲染index.tsx，访问/@johndoe123/stats时渲染stats.tsx
2. 避免代码重复：公共布局仅在父页面维护，子页面只负责内容
3. 自动处理404：非法子路由直接返回页面不存在提示

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