nextjs-architecture

Next.js アーキテクチャ

このスキルでは、App Router、Server Components、パフォーマンス最適化、移行戦略など、Next.js アーキテクチャに関する専門知識を提供します。

このスキルを使用する場面

• 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