Next.js Design Patterns Skill

Next.js Design Patterns Skill

This skill defines proven architectural approaches, design patterns, and team-level standards for modern Next.js (App Router) applications. The goal is to produce applications that are readable, easy to maintain, high-performing, and scalable over the long term.

The skill provides guidance on project structure, component architecture, data fetching strategies, routing, API design, state management, and performance optimization.

When to use this skill

• When designing the architecture of a new Next.js project
• When refactoring an existing Next.js codebase
• When establishing enterprise-level frontend standards
• When defining shared folder structures and coding conventions within a team
• When analyzing performance, bundle size, or data-fetching issues
• When clarifying Server Component / Client Component boundaries
• When building dashboards, admin panels, or feature-heavy applications

How to use this skill

1. Project Structure Decisions

• Prefer a feature-based (domain-driven) folder structure
• Keep routes, layouts, and page components under the app/ directory
• Group business logic, UI components, and types within feature modules
• Place shared components and utilities under a shared/ directory

2. Component Architecture

• Treat Server Components as the default
• Mark only interactive components with use client
• Keep Client Components as deep in the component tree as possible
• Allow Server Components to wrap Client Components as children

3. Data Fetching Strategy

• Perform data fetching in Server Components using async functions
• Use Promise.all to run multiple requests in parallel
• Add Suspense boundaries for slower data sources
• Apply ISR (revalidation) for static but updatable content
• Use dynamic rendering where real-time data is required