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).
npx claudepluginhub viktorbezdek/skillstack --plugin nextjs-developmentThis skill is limited to using the following tools:
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.mdSearches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Guides agent creation for Claude Code plugins with file templates, frontmatter specs (name, description, model), triggering examples, system prompts, and best practices.
A 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