메뉴
Next.js 16 with App Router, Server Components, Server Actions, Cache Components. Use for React 19.2 apps, SSR, or encountering async params, proxy.ts migration, use cache errors.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/secondsky/claude-skills --skill nextjs명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Use when reworking a change to prevent tech debt, or auditing existing debt to categorize, score, and prioritize the refactor backlog.
Discover and reduce task unknowns — blindspots, missing context, and unknown unknowns — before committing to a plan, implementation, review, or merge.
MUI Base UI unstyled React components with Floating UI. Use for accessible components, Radix UI migration, render props API, or encountering positioning, popup, v1.0 rc / pre-GA issues.
SOC 직업 분류 기준
SKILL.md 표시 중
| name | nextjs |
| description | Next.js 16 with App Router, Server Components, Server Actions, Cache Components. Use for React 19.2 apps, SSR, or encountering async params, proxy.ts migration, use cache errors. |
| license | MIT |
| metadata | {"version":"1.0.0","last_verified":"2025-11-21T00:00:00.000Z","nextjs_version":"16.2.0","react_version":"19.2.0","node_version":"20.9+","author":"Claude Skills Maintainers","repository":"https://github.com/secondsky/claude-skills","production_tested":true,"token_savings":"65-70%","errors_prevented":"18+","keywords":["Next.js 16","Next.js App Router","Next.js Pages Router","Server Components","React Server Components","Server Actions","Cache Components","use cache","Next.js 16 breaking changes","async params nextjs","proxy.ts migration","React 19.2","Next.js metadata","Next.js SEO","generateMetadata","static generation","dynamic rendering","streaming SSR","Suspense","parallel routes","intercepting routes","route groups","Next.js middleware","Next.js API routes","Route Handlers","revalidatePath","revalidateTag","next/navigation","useSearchParams","turbopack","next.config"]} |
| allowed-tools | ["Read","Write","Edit","Bash","Glob","Grep"] |
Version: Next.js 16.2.0 React Version: 19.2.0 Node.js: 20.9+ Last Verified: 2025-11-21
Use this skill when you need:
"use cache" directive (NEW in Next.js 16)revalidateTag(), updateTag(), refresh() (Updated in Next.js 16)proxy.ts replaces middleware.ts in Next.js 16)params, searchParams, cookies(), headers() now async)useEffectEvent(), React Compiler)next/image with updated defaults in Next.js 16)Do NOT use this skill for:
cloudflare-nextjs skill (OpenNext adapter: @opennextjs/cloudflare, getCloudflareContext, caching tiers, Workers-specific errors). Note: cloudflare-nextjs covers the proxy.ts exception for Cloudflare (keep middleware.ts there).clerk-auth, auth-js, or other auth-specific skillscloudflare-d1, drizzle-orm-d1, or database-specific skillstailwind-v4-shadcn skill for Tailwind + shadcn/uizustand-state-management, tanstack-query skillsreact-hook-form-zod skillCRITICAL: Next.js 16 has multiple breaking changes. For detailed migration steps, see references/next-16-migration-guide.md.
| Breaking Change | Before | After |
|---|---|---|
| Async params | params.slug | const { slug } = await params |
| Async headers | cookies() sync | await cookies() |
| Middleware | middleware.ts | proxy.ts (renamed) |
| Parallel routes | default.js optional | default.js required |
| Caching | Auto-cached fetch | Opt-in with "use cache" |
| revalidateTag() | 1 argument | 2 arguments (tag + cacheLife) |
| Node.js | 18.x+ | 20.9+ required |
| React | 18.x | 19.2+ required |
Quick Fix for Async Params:
// ✅ Next.js 16 pattern
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params
return <div>{id}</div>
}
Codemod: bunx @next/codemod@canary upgrade latest
See: references/next-16-migration-guide.md for complete migration guide with examples.
'use cache'
export async function BlogPosts() {
const posts = await db.posts.findMany()
return posts.map(post => <article key={post.id}>{post.title}</article>)
}
| API | Purpose | Example |
|---|---|---|
"use cache" | Opt-in component/function caching | 'use cache' at top |
revalidateTag() | Invalidate by tag | revalidateTag('posts', 'max') |
updateTag() | Update cache without revalidation | updateTag('posts', newData) |
refresh() | Refresh current page | refresh() |
revalidatePath() | Invalidate by path | revalidatePath('/posts') |
// next.config.ts
const config = { experimental: { ppr: true } }
// page.tsx
export const experimental_ppr = true
export default function Page() {
return (
<>
<StaticHeader />
<Suspense fallback={<Skeleton />}>
<DynamicContent />
</Suspense>
</>
)
}
See: references/caching-apis.md for complete caching API reference with ISR, tag-based revalidation, and advanced patterns.
Server Components are the default in App Router. They run on the server and can fetch data, access databases, and keep logic server-side.
// app/posts/page.tsx (Server Component by default)
export default async function PostsPage() {
const posts = await db.posts.findMany()
return <div>{posts.map(p => <article key={p.id}>{p.title}</article>)}</div>
}
import { Suspense } from 'react'
export default function Page() {
return (
<div>
<Header />
<Suspense fallback={<Skeleton />}>
<Posts />
</Suspense>
</div>
)
}
| Server Components | Client Components |
|---|---|
| Data fetching, DB access | Interactivity (onClick) |
| Sensitive logic | React hooks (useState) |
| Large dependencies | Browser APIs |
| Static content | Real-time updates |
Client Component (requires 'use client'):
'use client'
import { useState } from 'react'
export function Counter() {
const [count, setCount] = useState(0)
return <button onClick={() => setCount(count + 1)}>{count}</button>
}
Server Actions are async functions that run on the server, callable from Client or Server Components.
// app/actions.ts
'use server'
import { revalidatePath } from 'next/cache'
export async function createPost(formData: FormData) {
const title = formData.get('title') as string
await db.posts.create({ data: { title } })
revalidatePath('/posts')
}
// Server Component Form (simplest)
import { createPost } from './actions'
export default function NewPostPage() {
return (
<form action={createPost}>
<input name="title" required />
<button type="submit">Create</button>
</form>
)
}
| Pattern | Use Case | Reference |
|---|---|---|
| Client Form with Loading | useFormState + useFormStatus | templates/server-action-form.tsx |
| Error Handling | Return { error } or { success } | references/server-actions-patterns.md |
| Optimistic Updates | useOptimistic hook | references/server-actions-patterns.md |
| File Upload | FormData + blob storage | references/server-actions-patterns.md |
| Redirect After Action | redirect() function | references/server-actions-patterns.md |
See: references/server-actions-patterns.md for error handling, optimistic updates, file uploads, and advanced patterns.
Route Handlers are the App Router equivalent of API Routes.
// app/api/posts/route.ts
export async function GET(request: Request) {
const posts = await db.posts.findMany()
return Response.json({ posts })
}
export async function POST(request: Request) {
const body = await request.json()
const post = await db.posts.create({ data: body })
return Response.json({ post }, { status: 201 })
}
Dynamic Routes (with async params):
// app/api/posts/[id]/route.ts
export async function GET(
request: Request,
{ params }: { params: Promise<{ id: string }> }
) {
const { id } = await params // Await in Next.js 16
const post = await db.posts.findUnique({ where: { id } })
return post ? Response.json({ post }) : Response.json({ error: 'Not found' }, { status: 404 })
}
See: templates/route-handler-api.ts for search params, webhooks, and streaming patterns.
| Feature | Usage |
|---|---|
| React Compiler | experimental: { reactCompiler: true } - Auto-memoization |
| View Transitions | useTransition() + router.push() |
| useEffectEvent | Stable event handlers without deps |
// Static metadata
export const metadata: Metadata = {
title: 'My Blog',
description: 'A blog about Next.js',
openGraph: { title: 'My Blog', images: ['/og-image.jpg'] },
}
// Dynamic metadata (await params in Next.js 16)
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params
const post = await db.posts.findUnique({ where: { id } })
return { title: post.title, description: post.excerpt }
}
// next/image
import Image from 'next/image'
<Image src="/profile.jpg" alt="Profile" width={500} height={500} priority />
// next/font
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
<html className={inter.variable}>
Remote images: Configure images.remotePatterns in next.config.ts.
params is a PromiseError: Type 'Promise<{ id: string }>' is not assignable to type '{ id: string }'
Solution: Await params in Next.js 16:
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params
}
middleware.ts is deprecatedWarning: middleware.ts is deprecated. Use proxy.ts instead.
Solution: Rename file and function:
// Rename: middleware.ts → proxy.ts
// Rename function: middleware → proxy
export function proxy(request: NextRequest) {
// Same logic
}
default.jsError: Parallel route @modal was matched but no default.js was found
Solution: Add default.tsx:
// app/@modal/default.tsx
export default function ModalDefault() {
return null
}
Error: You're importing a component that needs useState. It only works in a Client Component
Solution: Add 'use client':
'use client'
import { useState } from 'react'
export function Counter() {
const [count, setCount] = useState(0)
return <button onClick={() => setCount(count + 1)}>{count}</button>
}
fetch() not cachingCause: Next.js 16 uses opt-in caching with "use cache".
Solution: Add "use cache" directive:
'use cache'
export async function getPosts() {
const response = await fetch('/api/posts')
return response.json()
}
See All 18 Errors: references/error-catalog.md
| Pattern | Usage |
|---|---|
| Lazy Loading | const HeavyComp = dynamic(() => import('./Heavy'), { ssr: false }) |
| Code Splitting | Automatic per route - each page.tsx gets own bundle |
| Turbopack | Default in Next.js 16, opt out with --webpack flag |
| PPR | experimental: { ppr: true } + <Suspense> boundaries |
{
"compilerOptions": {
"strict": true,
"baseUrl": ".",
"paths": { "@/*": ["./*"] }
}
}
| Reference | Load When... |
|---|---|
next-16-migration-guide.md | Migrating from Next.js 15, async params errors, proxy.ts setup |
server-actions-patterns.md | Error handling, optimistic updates, file uploads, advanced forms |
caching-apis.md | ISR, tag-based revalidation, updateTag(), refresh(), PPR details |
error-catalog.md | Debugging any Next.js error, comprehensive error solutions |
top-errors.md | Quick fixes for the 5 most common Next.js errors |
| Type | Files |
|---|---|
| References | error-catalog.md, top-errors.md, next-16-migration-guide.md, server-actions-patterns.md, caching-apis.md |
| Templates | async-params-page.tsx, server-action-form.tsx, route-handler-api.ts, cache-component-use-cache.tsx, parallel-routes-with-default.tsx, proxy-migration.ts |
| Skill | Purpose |
|---|---|
cloudflare-nextjs | Deploy to Cloudflare Workers via the OpenNext adapter (@opennextjs/cloudflare) |
tailwind-v4-shadcn | Styling |
clerk-auth | Authentication |
drizzle-orm-d1 | Database |
react-hook-form-zod | Forms |
zustand-state-management | Client state |
Official Docs: https://nextjs.org/docs | App Router: https://nextjs.org/docs/app
Version: Next.js 16.2.0 | React 19.2.0 | Node.js 20.9+ | TypeScript 5.9+ Production Tested: E-commerce, SaaS, content sites | Token Savings: 65-70%