home / skills / 89jobrien / steve / nextjs-architecture
This skill helps you design and migrate Next.js apps with App Router, Server Components, and performance best practices.
npx playbooks add skill 89jobrien/steve --skill nextjs-architectureReview the files below or copy the command above to add this skill to your agents.
---
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
1. **Architecture Design**: Designs Next.js application structure
2. **App Router**: Implements App Router patterns and routing
3. **Server Components**: Uses Server Components effectively
4. **Performance**: Optimizes Next.js for production
5. **Migration**: Migrates from Pages Router to App Router
6. **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**:
```markdown
## 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**
```typescript
// 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
This skill provides specialist guidance for designing and evolving Next.js applications, with emphasis on the App Router, Server Components, and production performance. It helps plan architecture, execute migrations from the Pages Router, and apply best practices for full‑stack Next.js projects. Use it to reduce complexity, improve load times, and make maintainable routing and data‑fetching choices.
I evaluate your current app structure, routing needs, and data flows, then recommend an App Router layout, component partitioning (Server vs Client), and caching strategy. For migrations I provide stepwise changes: convert layouts, move pages to app/, and adapt data fetching to the new conventions. I also suggest performance tactics like static generation, ISR, streaming with Suspense, and image/code optimization tuned to your use case.
How do I decide between Server and Client Components?
Default to Server Components for data fetching and rendering. Use Client Components only when you need browser APIs, event handlers, or stateful UI. Keep client scope minimal to reduce bundle size.
What are the minimal steps to migrate from Pages Router to App Router?
Create app/layout.tsx to replace _app, move each page into app/<route>/page.tsx, convert API endpoints to route handlers under app/api or pages/api, and adjust data fetching to use async Server Components or client hooks where needed.