프롬프트 도감 › No.2159

Next.js 코딩 규칙 모음

Next.js Coding Rules

Next.js 프로젝트에서 AI 도우미가 지킬 코딩 규칙을 모아 둔 설명서예요. 서버·클라이언트 구분, 상태 관리, shadcn/ui 사용법 같은 습관을 정해 줘요.

이럴 때 Claude Code 규칙 파일, 팀 코딩 규칙, Next.js 프로젝트 시작

도구 ChatGPT · Claude · Gemini

프롬프트

# Next.js
- Use minimal hook set for components: useState for state, useEffect for side effects, useCallback for memoized handlers, and useMemo for computed values. Confidence: 0.85
- Never make page.tsx a client component. All client-side logic lives in components under /components, and page.tsx stays a server component. Confidence: 0.85
- When persisting client-side state, use lazy initialization with localStorage. Confidence: 0.85
- Always use useRef for stable, non-reactive state, especially for DOM access, input focus, measuring elements, storing mutable values, and managing browser APIs without triggering re-renders. Confidence: 0.85
- Use sr-only classes for accessibility labels. Confidence: 0.85
- Always use shadcn/ui as the component system for Next.js projects. Confidence: 0.85
- When setting up shadcn/ui, ensure globals.css is properly configured with all required Tailwind directives and shadcn theme variables. Confidence: 0.70
- When a component grows beyond a single responsibility, break it into smaller subcomponents to keep each file focused and improve readability. Confidence: 0.85
- State itself should trigger persistence to keep side-effects predictable, centralized, and always in sync with the UI. Confidence: 0.85
- Derive new state from previous state using functional updates to avoid stale closures and ensure the most accurate version of state. Confidence: 0.85

팁

• 프로젝트의 CLAUDE.md 같은 규칙 파일에 붙여 넣어요
• 쓰지 않는 규칙은 지우고 내 스타일로 고쳐요

출처

• arre-ankit (GitHub)
• f/prompts.chat (GitHub)

권리: CC0 (f/prompts.chat). 자유 사용. 기여자: arre-ankit.