name: nextjs-architecture description: Next.js 架构专家。适用于设计 Next.js 应用程序、迁移到 App Router、实现服务器组件或优化 Next.js 性能。涵盖 App Router、服务器组件和最佳实践。 author: Joseph OBrien status: unpublished updated: ‘2025-12-23’ version: 1.0.1 tag: skill type: skill

Next.js 架构

此技能提供 Next.js 架构专业知识，包括 App Router、服务器组件、性能优化和迁移策略。

何时使用此技能

设计 Next.js 应用程序架构时
从 Pages Router 迁移到 App Router 时
实现服务器组件时
优化 Next.js 性能时
制定 Next.js 架构决策时
构建全栈 Next.js 应用程序时

此技能的作用

架构设计：设计 Next.js 应用程序结构
App Router：实现 App Router 模式和路由
服务器组件：有效使用服务器组件
性能：为生产环境优化 Next.js
迁移：从 Pages Router 迁移到 App Router
最佳实践：应用 Next.js 最佳实践

如何使用

设计架构

为此 Next.js 应用程序设计架构

将此 Pages Router 应用迁移到 App Router

特定模式

为此功能实现服务器组件

架构模式

App Router 结构

app/
├── (auth)/
│   ├── login/page.tsx
│   └── register/page.tsx
├── dashboard/
│   ├── layout.tsx
│   ├── page.tsx
│   └── analytics/page.tsx
├── api/
│   └── users/route.ts
└── layout.tsx

服务器组件

模式：

默认使用服务器组件
使用 ‘use client’ 的客户端组件
在服务器组件中直接访问数据库
使用 Suspense 进行流式传输

性能

策略：

对已知内容使用静态生成
对频繁变化的内容使用增量静态再生
对慢查询使用流式传输
图像优化
代码分割

示例

示例 1：App Router 迁移

输入：从 Pages Router 迁移到 App Router

输出：

## Next.js 迁移：Pages Router → App Router

### 迁移步骤

**1. 转换布局**
```typescript
// 之前：pages/_app.tsx
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

// 之后：app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

2. 转换页面

// 之前：pages/users/[id].tsx
export default function UserPage({ user }) {
  return <UserProfile user={user} />;
}

// 之后：app/users/[id]/page.tsx
export default async function UserPage({ params }) {
  const user = await getUser(params.id);
  return <UserProfile user={user} />;
}


## 最佳实践

### Next.js 架构

1. **服务器优先**：默认使用服务器组件
2. **按需客户端**：仅在必要时添加 'use client'
3. **尽可能静态**：在可行时生成静态页面
4. **流式处理慢查询**：对慢数据使用 Suspense
5. **优化图像**：使用 Next.js Image 组件

## 相关用例

- Next.js 架构设计
- App Router 迁移
- 服务器组件实现
- Next.js 性能优化
- 全栈 Next.js 开发