nextjs
Provides architectural patterns and best practices for Next.js 15 App Router development.
Install
mkdir -p .claude/skills/nextjs && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13869" && unzip -o skill.zip -d .claude/skills/nextjs && rm skill.zipInstalls to .claude/skills/nextjs
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Next.js 15 App Router patterns for EaseUI. Server/Client Components, data fetching, caching, server actions.Key capabilities
- →Choose between Server and Client Components
- →Configure data fetching strategies for pages
- →Implement caching layers for routes
- →Organize app router directories
- →Define metadata for routes
- →Implement Server Actions with validation
How it works
The skill provides a decision tree and workflow steps for adding new routes in Next.js 15 App Router, covering component types, data fetching, and caching.
Inputs & outputs
When to use nextjs
- →Configure data fetching strategy
- →Decide between server or client components
- →Optimize route caching
- →Organize app router directory
About this skill
Next.js 15 — EaseUI Patterns
EaseUI runs on Next.js 15 App Router. Server Components by default, client only when interactive.
Server vs Client Decision Tree
Does it need...?
├── useState, useEffect, event handlers → Client Component ('use client')
├── Direct data fetching, no interactivity → Server Component (default)
└── Both? → Split: Server parent + Client child
Workflow: Adding a New Route
Step 1: Choose Route Location
- Input: feature area
- Action: Place in correct route group:
| Route Group | Purpose |
|---|---|
app/(editor)/ | Canvas editor routes |
app/(dashboard)/ | Dashboard routes |
app/api/ | API route handlers |
app/(marketing)/ | Landing pages |
- Output:
page.tsxin correct directory
Step 2: Data Fetching Strategy
- Input: what data does this page need?
- Action: Pick strategy:
| Need | Pattern |
|---|---|
| Database reads | Server Component fetch + Supabase |
| Real-time data | no-store or SWR client-side |
| Cached data | revalidate: 60 |
| Mutations | Server Actions ('use server') |
- Output: data flowing into components
Step 3: Caching Layer
- Input: performance requirements
- Action: Configure cache:
| Layer | Control |
|---|---|
| Request | fetch() options |
| Data | revalidatePath() / revalidateTag() |
| Full route | dynamic = 'force-static' or 'force-dynamic' |
- Output: optimized data loading
File Conventions
| File | Purpose |
|---|---|
page.tsx | Route UI |
layout.tsx | Shared layout |
loading.tsx | Loading state (Suspense fallback) |
error.tsx | Error boundary |
not-found.tsx | 404 page |
Route Organization
| Pattern | Use |
|---|---|
Route groups (name) | Organize without URL |
Parallel routes @slot | Multiple same-level pages |
Intercepting (.) | Modal overlays |
Metadata
| Type | Use |
|---|---|
| Static export | Fixed metadata |
| generateMetadata | Dynamic per-route |
Essential: title (50-60 chars), description (150-160 chars), Open Graph, canonical URL.
Server Actions
- Mark with
'use server' - Validate all inputs with Zod
- Return typed responses
- Handle errors gracefully
Hard Gate (Before Submitting)
-
loading.tsxtồn tại cho route mới (Suspense fallback) - Dynamic import cho heavy components (
next/dynamic) - Route group (
()) đúng — editor vs dashboard vs marketing - Không
getServerSideProps— chỉ App Router patterns - Server Actions validate input bằng Zod
Done Condition
Route renders đúng + loading state hiện + cache strategy configured + tất cả gate items ✅
When not to use it
- →When using `getServerSideProps`
Limitations
- →The skill explicitly states not to use `getServerSideProps`.
- →The skill requires `loading.tsx` to exist for new routes.
- →The skill requires dynamic imports for heavy components.
How it compares
This skill offers a structured workflow for developing Next.js App Router routes, guiding component selection and data strategies, unlike an ad-hoc approach.
Compared to similar skills
nextjs side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| nextjs (this skill) | 0 | 4mo | No flags | Intermediate |
| nextjs-developer | 328 | 2mo | No flags | Advanced |
| frontend-developer | 27 | 4mo | No flags | Intermediate |
| nextjs-app-router-patterns | 3 | 2mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
frontend-developer
sickn33
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
nextjs-app-router-patterns
wshobson
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.
bundle-dynamic-imports
TheOrcDev
Use next/dynamic for lazy-loading heavy components. Apply when importing large components like editors, charts, or rich text editors that aren't needed on initial render.
moai-domain-frontend
modu-ai
Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.
bundle-barrel-imports
TheOrcDev
Import directly from source files instead of barrel files. Apply when using libraries like lucide-react, @mui/material, or @radix-ui/react-* to reduce bundle size and improve dev boot time.