Agent skill · software engineering · aiskillstore
nextjs-architecture
Next.js architecture specialist. Use when designing Next.js applications,
Why this skill is useful
Provides specific architectural patterns and migration strategies for Next.js that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 Specific Patterns Architecture Patterns App Router Structure 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: 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> ); } 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/nextjs-architecture