Run any Skill in Manus with one click

nextjs-architecture

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.

Run Skill in Manus

Stars349

Forks29

UpdatedJanuary 20, 2026 at 01:00

Source

aiskillstore

aiskillstore/marketplace

View GitHub Repository View Creator Repositories

Install command

Download

Run Skill in Manus

Useful forSOC

Software DevelopersComputer and Mathematical Occupations15-1252L4

File Explorer

2 files

SKILL.md

readonly

name	nextjs-architecture
description	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.
author	Joseph OBrien
status	unpublished
updated	2025-12-23
version	1.0.1
tag	skill
type	skill

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

More from this repository

same repository

frontend-guardrails

aiskillstore/marketplace

Professional frontend standards for building, scaffolding, extending, or reviewing any UI or frontend project — new or existing — even when standards aren't explicitly asked for. Keeps generated code consistent, reusable, secure, and production-quality. Framework-agnostic: React, Vue, Angular, Svelte, plain JS.

2026-06-09349

shareone

aiskillstore/marketplace

发布本地生成的 HTML、Markdown、TXT、PDF、Word 或 PPTX 到 ShareOne 平台，生成公网分享短链接；或者当用户提供 ShareOne 链接并要求下载文件、修改文件、拉取/处理评论时使用此技能。当用户要求“发布”、“分享”、“生成链接”、“上线”，或者“下载这个链接的文件”、“修改这个 ShareOne 链接的内容”、“拉取这个链接的评论”时，必须使用此技能。

2026-06-09349

verging-ai-chat

aiskillstore/marketplace

Generate AI chat completions using GPT-4o through the verging.ai proxy API with streaming (SSE) and non-streaming response support.

2026-06-08349

verging-ai-tts

aiskillstore/marketplace

Convert text to speech audio using OpenAI TTS-1-HD through the verging.ai proxy API. Supports multiple voices, playback speed control, and various audio output formats.

2026-06-08349

imagegen

aiskillstore/marketplace

Generate AI images using DALL-E 3 or gpt-image-1 through the verging.ai proxy API. Supports standard and HD quality, multiple images per request, and returns CDN-hosted image URLs.

2026-06-08349

vision

aiskillstore/marketplace

Analyze images using GPT-4o Vision through the verging.ai proxy API, supporting both image URL (JSON) and file upload (multipart) modes.

2026-06-08349

name	nextjs-architecture
description	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.
author	Joseph OBrien
status	unpublished
updated	2025-12-23
version	1.0.1
tag	skill
type	skill

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