nextjs-patterns
Next.js best practices, server components, app router patterns, caching strategies, and full-stack architecture
Profile →npx skills add cosmicstack-labs/mercury-agent-skills --skill nextjs-patterns --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Next.js Patterns Comprehensive guide to building production-grade Next.js applications with the App Router, Server Components, and modern React patterns. ## Core Architecture ### App Router vs Pages Router | Aspect | App Router | Pages Router | |--------|-----------|--------------| | **Components** | Server Components by default | Client Components only | | **Routing** | File-system based with layout nesting | File-system based, flat | | **Data Fetching** | Server-side fetch, `use`, cache primitives | `getServerSideProps`, `getStaticProps` | | **Loading States** | `loading.js` files | Manual implementation | | **Error Handling** | `error.js` files | Manual implementation | | **Streaming** | Built-in with Suspense boundaries | Not supported | ### Project Structure ``` my-app/ ├── app/ │ ├── layout.tsx # Root layout │ ├── page.tsx # Home page │ ├── loading.tsx # Root loading state │ ├── error.tsx # Root error boundary │ ├── not-found.tsx # 404 page │ ├── (auth)/ # Route group │ │ ├── login/page.tsx │ │ └── register/page.tsx │ ├── dashboard/ │ │ ├── layout.tsx # Dashboard layout │ │ ├── page.tsx # Dashboard home │ │ ├── loading.tsx │ │ └── settings/ │ │ └── page.tsx │ └── api/ │ └──
- Core Architecture
- App Router vs Pages Router
- Project Structure
- Server Components (RSC)
- When to Use Server vs Client
- Composing Server and Client Components
- Data Fetching Patterns
- Server-Side Data Fetching
- Revalidation Strategies
- Streaming with Suspense
- Route Handlers & API Patterns
- Common Patterns
- Route Groups for Organization
- Middleware for Auth
What does the nextjs-patterns skill do?
Next.js best practices, server components, app router patterns, caching strategies, and full-stack architecture
How do I install it?
Run `npx skills add cosmicstack-labs/mercury-agent-skills --skill nextjs-patterns --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From cosmicstack-labs/mercury-agent-skills, a repository with 364 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.