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.
Best use case
nextjs-architecture is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. 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 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.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "nextjs-architecture" skill to help with this workflow task. Context: 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.
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/nextjs-architecture/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How nextjs-architecture Compares
| Feature / Agent | nextjs-architecture | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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 developmentRelated Skills
c4-architecture
Generate architecture documentation using C4 model Mermaid diagrams. Use when asked to create architecture diagrams, document system architecture, visualize software structure, create C4 diagrams, or generate context/container/component/deployment diagrams. Triggers include "architecture diagram", "C4 diagram", "system context", "container diagram", "component diagram", "deployment diagram", "document architecture", "visualize architecture".
react-native-architecture
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.
nextjs-supabase-auth
Expert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected route.
nextjs-best-practices
Next.js App Router principles. Server Components, data fetching, routing patterns.
nextjs-app-router-patterns
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
multi-cloud-architecture
Design multi-cloud architectures using a decision framework to select and integrate services across AWS, Azure, and GCP. Use when building multi-cloud systems, avoiding vendor lock-in, or leveraging best-of-breed services from multiple providers.
architecture
Architectural decision-making framework. Requirements analysis, trade-off evaluation, ADR documentation. Use when making architecture decisions or analyzing system design.
architecture-decision-records
Write and maintain Architecture Decision Records (ADRs) following best practices for technical decision documentation. Use when documenting significant technical decisions, reviewing past architectural choices, or establishing decision processes.
langchain-architecture
Design LLM applications using the LangChain framework with agents, memory, and tool integration patterns. Use when building LangChain applications, implementing AI agents, or creating complex LLM w...
architecture-synthesis
Generate a reference architecture specification from analyzed frameworks. Use when (1) designing a new agent framework based on prior art, (2) defining core primitives (Message, State, Tool types), (3) specifying interface protocols, (4) creating execution loop pseudocode, or (5) producing architecture diagrams and implementation roadmaps.
architecture-documenter
Document system architecture and technical design decisions for effective team communication and ...
review-architecture
アーキテクチャレビュースキル（設計整合性、コーディング規約、ドキュメント整合性の確認）