nextjs-architecture

用途

Next.js Architecture 是一个 Next.js 架构专家技能，提供 App Router、Server Components、性能优化和迁移策略方面的专业知识。当需要设计 Next.js 应用架构、从 Pages Router 迁移到 App Router、实现 Server Components、优化 Next.js 性能、做出 Next.js 架构决策或构建全栈 Next.js 应用时，可以使用该技能。

主要能力

• 架构设计：设计 Next.js 应用结构。
• App Router：实现 App Router 模式与路由。
• Server Components：有效使用 Server Components。
• 性能：为生产环境优化 Next.js。
• 迁移：从 Pages Router 迁移到 App Router。
• 最佳实践：应用 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。
• 对慢查询使用流式渲染。
• 图片优化。
• 代码分割。

迁移示例：Pages Router → App Router

迁移步骤：

1. 转换布局

// 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>
  );
}

1. 转换页面

// 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} />;
}

最佳实践

1. Server First：默认使用 Server Components。
2. Client When Needed：仅在必要时添加 'use client'。
3. Static When Possible：尽可能生成静态页面。
4. Stream Slow Queries：对慢数据使用 Suspense。
5. Optimize Images：使用 Next.js Image 组件。

适用场景

• Next.js 架构设计
• App Router 迁移
• Server Components 实现
• Next.js 性能优化
• 全栈 Next.js 开发

限制

资料未提供该技能的安装命令、收费方式、支持平台或具体版本要求等信息。