nextjs-architecture

Next.js 架构

此技能提供 Next.js 架构方面的专业知识，包括 App Router、Server Components、性能优化和迁移策略。

何时使用此技能

• 设计 Next.js 应用架构时
• 从 Pages Router 迁移到 App Router 时
• 实现 Server Components 时
• 优化 Next.js 性能时
• 制定 Next.js 架构决策时
• 构建全栈 Next.js 应用时

此技能的功能

1. 架构设计：设计 Next.js 应用结构
2. App Router：实现 App Router 模式和路由
3. Server Components：有效使用 Server Components
4. 性能：优化 Next.js 的生产环境表现
5. 迁移：从 Pages Router 迁移到 App Router
6. 最佳实践：应用 Next.js 最佳实践

使用方法

设计架构

Design the architecture for this Next.js application

Migrate this Pages Router app to App Router

特定模式

Implement Server Components for this feature

架构模式

App Router 结构

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

Server Components

模式：

• 默认使用 Server Components
• 使用 'use client' 的 Client Components
• 在 Server Components 中直接访问数据库
• 使用 Suspense 实现流式传输

性能

策略：

• 为已知内容进行静态生成
• 对频繁变化的内容使用 ISR
• 对慢速查询使用流式传输
• 图像优化
• 代码拆分

示例

示例 1：App Router 迁移

输入：将 Pages Router 迁移到 App Router

输出：

## Next.js Migration: Pages Router → App Router

### Migration Steps

**1. Convert Layout**
```typescript
// Before: pages/_app.tsx
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

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

2. 转换页面

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

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

## Best Practices

### Next.js Architecture

1. **Server First**: Use Server Components by default
2. **Client When Needed**: Add 'use client' only when necessary
3. **Static When Possible**: Generate static pages when feasible
4. **Stream Slow Queries**: Use Suspense for slow data
5. **Optimize Images**: Use Next.js Image component

## Related Use Cases

- Next.js architecture design
- App Router migration
- Server Components implementation
- Next.js performance optimization
- Full-stack Next.js development