🛠️ 開発・MCP コミュニティ

nextjs-architecture

Next.jsアプリケーションの設計、App Routerへの移行、Server Componentsの実装、パフォーマンス最適化を支援するSkill。

📜 元の英語説明(参考)

Next.js architecture specialist. Use when designing Next.js applications, migrating to App Router, implementing Server Components, or optimizing Next.js performance. Covers App Router, Server Components, and best practices.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Next.jsアプリケーションの設計、App Routerへの移行、Server Componentsの実装、パフォーマンス最適化を支援するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⬇ このSkillをダウンロード(.skill) 元のソースを見る ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-17
取得日時: 2026-05-17
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Next.js Architecture

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

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

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
遅いクエリに対するストリーミング
画像の最適化
コード分割

例

例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. Convert Pages

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



## ベストプラクティス

### Next.jsアーキテクチャ

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開発

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Next.js Architecture

This skill provides Next.js architecture expertise including App Router, Server Components, performance optimization, and migration strategies.

When to Use This Skill

When designing Next.js application architecture
When migrating from Pages Router to App Router
When implementing Server Components
When optimizing Next.js performance
When making Next.js architecture decisions
When building full-stack Next.js applications

What This Skill Does

Architecture Design: Designs Next.js application structure
App Router: Implements App Router patterns and routing
Server Components: Uses Server Components effectively
Performance: Optimizes Next.js for production
Migration: Migrates from Pages Router to App Router
Best Practices: Applies Next.js best practices

How to Use

Design Architecture

Design the architecture for this Next.js application

Migrate this Pages Router app to App Router

Specific Patterns

Implement Server Components for this feature

Architecture Patterns

App Router Structure

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

Server Components

Pattern:

Server Components by default
Client Components with 'use client'
Direct database access in Server Components
Streaming with Suspense

Performance

Strategies:

Static generation for known content
ISR for frequently changing content
Streaming for slow queries
Image optimization
Code splitting

Examples

Example 1: App Router Migration

Input: Migrate Pages Router to App Router

Output:

## 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. Convert Pages

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