메뉴
Next.js 16 App Router best practices for this repo. Use when creating routes, layouts, data fetching, metadata, or anything touching the Next.js framework surface.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Clean code and structure standards for this repo. Use when writing or refactoring any TypeScript/React code — covers naming, file layout, typing, and testing discipline.
Self-review a change before declaring it finished. Use after implementing any feature or fix, before committing or reporting completion.
Understand the true intent behind a request before writing any code. Use at the start of every non-trivial task, especially vague ones ("make it better", "add a page", "fix the layout").
Security rules for all code in this repo. Use when handling any external input, env vars, auth, API routes, server actions, or dependencies.
UI/UX design standards for this stack (Tailwind v4 + shadcn/ui). Use whenever creating or modifying any page, component, layout, or style — the goal is professional, consistent UI with zero AI slop.
| name | nextjs-quality |
| description | Next.js 16 App Router best practices for this repo. Use when creating routes, layouts, data fetching, metadata, or anything touching the Next.js framework surface. |
This repo runs Next.js 16 — newer than most training data. When in doubt about an
API, read the bundled docs in node_modules/next/dist/docs/ instead of guessing from
memory. Heed deprecation notices.
"use client" only when the component needs
state, effects, event handlers, or browser APIs — and push that directive as deep into
the tree as possible (leaf components, not layouts).next lint does not exist in Next 16. Linting is the plain eslint CLI
(npm run lint). Never add next lint to scripts or docs.async Server Components and route handlers over
client-side useEffect fetching. Cache deliberately — know whether each fetch is
static, revalidated, or dynamic.route.ts handlers.src/app/<segment>/page.tsx. Route-specific components live next to the
route; shared components go in src/components/.layout.tsx (persistent shell),
loading.tsx (Suspense fallback), error.tsx (error boundary, must be a client
component), not-found.tsx.searchParams are async in Next 16 — await them:
const { slug } = await params.next/link; programmatic navigation uses useRouter from
next/navigation (never next/router).next/image (automatic sizing/optimization) — never bare <img>.next/font (already configured with Geist in the root layout).metadata or generateMetadata from pages/layouts — never manual
<head> tags.process.env.X; browser-visible only with NEXT_PUBLIC_
prefix. Document new variables in .env.example.pages/ directory, getServerSideProps, getStaticProps, getInitialPropsnext/head, next/routeruseEffect + fetch for data that could be fetched on the serverpages/api/ (use src/app/**/route.ts)After framework-level changes, run npm run build — it type-checks generated route types
and catches invalid segment configs that dev mode tolerates.