Next.jsNext.js两种路由系统对比目录结构： Pages Router使用pages目录，App Route

Next.js两种路由系统对比

目录结构： Pages Router使用pages目录，App Router使用app目录
动态路由：两者概念类似，但App Router的动态路由（如[id]）是作为文件夹存在的，其下需要page.tsx文件
布局： Pages Router中的布局通常需要手动在组件中组装，App Router则通过layout.tsx文件提供了更原生和强大的支持，并且布局可以支持嵌套
数据获取：在Pages Router中，如getServerSideProps等特殊函数用于数据获取。在App Router中，推荐在Server Component（服务端组件）中直接使用async/await进行数据获取。

Next.js核心概念掌握

路由系统

// App Router 结构
app/
├── layout.tsx          // 根布局
├── page.tsx           // 首页 (/)
├── loading.tsx        // 加载状态
├── error.tsx         // 错误边界
├── about/
│   ├── page.tsx      // /about
│   └── layout.tsx    // about 部分布局
└── blog/
    └── [id]/
        └── page.tsx  // 动态路由 /blog/123

// 页面导航
import Link from 'next/link'
import { useRouter } from 'next/navigation'

export default function Navigation() {
  const router = useRouter()
  
  return (
    <div>
      <Link href="/about">关于我们</Link>
      <button onClick={() => router.push('/blog')}>博客</button>
    </div>
  )
}

渲染策略

// 服务端组件 (默认)
async function UserList() {
  const users = await fetchUsers() // 直接在服务端获取数据
  
  return (
    <div>
      {users.map(user => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  )
}

// 客户端组件
'use client'
function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

// 静态生成
export async function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }]
}

Next.js 和UmiTS

特性维度	Next.js	UmiJS
核心定位	全球通用的全栈React框架	面向国内的企业级前端应用框架
渲染方式	SSR (服务端渲染)、SSG (静态站点生成)、CSR (客户端渲染)、ISR (增量静态再生)	主要支持CSR，也支持SSR，但并非其主要侧重点
路由系统	基于文件系统的约定式路由，深度集成App Router	同时支持约定式路由和配置式路由
数据流	在组件内直接使用 `async/await` 获取数据（App Router）	通过插件集成 dva（基于Redux）或其他状态管理库
插件与配置	功能高度内置，可通过配置文件进行覆盖	高度插件化，核心功能均由插件提供，可插拔
样式方案	内置支持CSS Modules、Sass、CSS-in-JS等	与Ant Design深度整合，同样支持多种CSS方案
类型支持	原生支持 TypeScript	支持 TypeScript
适用场景	内容型网站（官网、博客、电商）、需要SEO的应用	企业级后台管理系统、中后台应用
学习资源	全球社区，文档和资源非常丰富	主要面向中文开发者，中文文档和社区支持友好