From nextjs-development
Next.js framework development including App Router, Server Components, Server Actions, SSR, SSG, ISR, caching, data fetching, middleware, layouts, parallel routes, and module architecture for Next.js 13+/15/16. NOT for generic React patterns, hooks, or component logic (use react-development). NOT for UI/CSS design systems or visual styling (use frontend-design).
How this skill is triggered — by the user, by Claude, or both
Slash command
/nextjs-development:nextjs-developmentThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
A unified skill merging best practices for Next.js development, covering App Router patterns, Server Components, data fetching, caching strategies, and module architecture.
references/architecture-patterns.mdreferences/component-patterns.mdreferences/database-patterns.mdreferences/extended-patterns.mdreferences/hooks-patterns.mdreferences/next-16-migration-guide.mdreferences/page-patterns.mdreferences/permission-patterns.mdreferences/service-patterns.mdreferences/top-errors.mdreferences/typescript-patterns.mdresources/app-router-complete.mdresources/caching-strategies.mdresources/common-patterns.mdresources/complete-examples.mdresources/component-patterns.mdresources/data-fetching-complete.mdresources/data-fetching.mdresources/file-organization.mdresources/layout-hierarchy.mdA unified skill merging best practices for Next.js development, covering App Router patterns, Server Components, data fetching, caching strategies, and module architecture.
Use this skill when:
These rules are NON-NEGOTIABLE. Violations will break builds or cause runtime errors.
<Image> from next/image// CORRECT
import Image from 'next/image'
<Image src="/logo.png" alt="Logo" width={200} height={100} />
// WRONG - BUILD WILL FAIL
<img src="/logo.png" alt="Logo" />
Only add 'use client' when the component needs:
useState, useEffect, etc.)onClick, onChange, etc.)window, localStorage, etc.)const data = await fetch('/api/data', { cache: 'no-store' })
const data = await fetch('/api/data', { cache: 'force-cache' })
const data = await fetch('/api/data', { next: { revalidate: 3600 } })
// CORRECT (Next.js 16)
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params
const cookieStore = await cookies()
const headersList = await headers()
}
params, searchParams, cookies(), headers(), and draftMode() are now async.
export default async function Page({
params,
searchParams,
}: {
params: Promise<{ slug: string }>
searchParams: Promise<{ query: string }>
}) {
const { slug } = await params
const { query } = await searchParams
return <div>{slug}</div>
}
middleware.ts is deprecated. Use proxy.ts instead.
// proxy.ts (NEW)
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export function proxy(request: NextRequest) {
const token = request.cookies.get('token')
if (!token) {
return NextResponse.redirect(new URL('/login', request.url))
}
return NextResponse.next()
}
export const config = {
matcher: '/dashboard/:path*',
}
'use cache'
export async function ExpensiveComponent() {
const data = await fetch('https://api.example.com/data')
return <div>{data}</div>
}
revalidateTag('posts', 'max')
// Cache life profiles: 'max', 'hours', 'days', 'weeks', 'default'
Do you need interactivity (onClick, onChange)?
├─ YES → Client Component ('use client')
└─ NO → Server Component (default)
Do you need React hooks (useState, useEffect)?
├─ YES → Client Component
└─ NO → Server Component
Do you need browser APIs (window, localStorage)?
├─ YES → Client Component
└─ NO → Server Component
Do you need to fetch data?
├─ Use Server Component (preferred)
└─ Client Component only if data must be client-side
app/
layout.tsx # Root layout (required)
page.tsx # Home page (/)
loading.tsx # Loading UI
error.tsx # Error boundary
not-found.tsx # 404 page
template.tsx # Re-rendered layout
blog/
layout.tsx # Blog layout
page.tsx # /blog
[slug]/
page.tsx # /blog/[slug]
(marketing)/ # Route group (no URL effect)
about/page.tsx # /about
@modal/ # Parallel route
login/page.tsx
default.tsx # Required fallback
api/
users/route.ts # API route
async/await with fetch() or direct DB calls (preferred)Promise.all([...]) for multiple requests<Suspense> for progressive loadinguseSuspenseQuery for client-fetched datacache: 'no-store' | cache: 'force-cache' | next: { revalidate: N } | next: { tags: [...] }'use server' directiveformData.get() for form fieldsschema.safeParse()revalidateTag() / revalidatePath() after mutationsuseFormStatus() for loading statesuseOptimistic() for optimistic UI updatesapp/(routes)/[module]/ # Pages (list, detail, create, edit)
lib/services/[module]/ # Service layer (data access)
hooks/[module]/ # Custom hooks
types/ # TypeScript interfaces & DTOs
_components/ # Feature-specific components
See Extended Patterns for detailed code examples of all patterns above.
references/extended-patterns.md - Detailed code examples for all patternsreferences/architecture-patterns.md - Overall architecturereferences/component-patterns.md - Component patternsreferences/database-patterns.md - Database schema and RLSreferences/hooks-patterns.md - Custom hooksreferences/page-patterns.md - Page structurereferences/permission-patterns.md - Permission systemreferences/service-patterns.md - Service layerreferences/typescript-patterns.md - TypeScript patternsreferences/next-16-migration-guide.md - Migration guidereferences/top-errors.md - Common errors and solutionsresources/app-router-complete.md - App Router guideresources/caching-strategies.md - Caching deep diveresources/data-fetching-complete.md - Data fetching patternsresources/metadata-api.md - Metadata API guideresources/server-actions-complete.md - Server Actions guideresources/rendering-strategies.md - SSG, ISR, SSR, Streamingresources/routing-patterns.md - Routing patternsresources/server-client-decision.md - Server/Client decision guidetemplates/app-router-async-params.tsx - Async params patterntemplates/cache-component-use-cache.tsx - Cache Componentstemplates/parallel-routes-with-default.tsx - Parallel routestemplates/proxy-migration.ts - Proxy migrationtemplates/route-handler-api.ts - Route handlerstemplates/server-actions-form.tsx - Server Actions formstemplates/layout-template.md - Layout templatestemplates/page-template.md - Page templatesscripts/analyze-routing-structure.mjs - Analyze routingscripts/check-versions.sh - Check versionsscripts/validate-patterns.py - Validate Next.js patternsSkill Version: 1.0.0 Next.js Versions: 13+, 15, 16 Last Updated: January 2026
npx claudepluginhub viktorbezdek/skillstack --plugin nextjs-developmentTeaches Next.js 14/15 App Router patterns: server components, data fetching, caching, server actions. Corrects Pages Router anti-patterns.
Provides Next.js 14+ best practices for App Router structure, Server/Client Components, API routes, loading/error UI, and file conventions.
Provides code patterns for Next.js 16+ App Router including Server Components, Client Components, Server Actions, Route Handlers, caching with 'use cache', parallel routes, and files like layout.tsx, page.tsx.