스킬 nextjs-app-router-patterns
⚡
nextjs-app-router-patterns
안전 🌐
네트워크 접근⚙️
외부 명령어🔑
환경 변수
Next.js App Router 패턴 적용
App Router 기능은 구조화하고 선택하기 어려울 수 있습니다. 이 스킬은 Next.js 14+ 라우팅, 데이터 페칭 및 서버 컴포넌트에 대한 명확한 패턴과 예제를 제공합니다.
지원: Claude Codex Code(CC)
1
스킬 ZIP 다운로드
2
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
3
토글을 켜고 사용 시작
테스트해 보기
"nextjs-app-router-patterns" 사용 중입니다. 스트리밍 및 캐싱과 함께 제품 페이지에 대한 간단한 계획을 보여주세요.
예상 결과:
- 제품 헤더는 서버 컴포넌트를 사용하여 먼저 렌더링되도록 하세요
- 리뷰 및 추천을 로딩 UI와 함께 Suspense로 감싸세요
- 제품 페치에 태그 기반 재검증을 적용하여 제어된 캐시 새로고침을 수행하세요
보안 감사
안전v4 • 1/17/2026
Pure documentation skill containing only markdown explanations and TypeScript code examples. No executable scripts, network calls, filesystem access, or external commands are implemented. All code is illustrative documentation for Next.js App Router patterns.
2
스캔된 파일
721
분석된 줄 수
3
발견 사항
4
총 감사 수
위험 요인
🌐 네트워크 접근 (11)
⚙️ 외부 명령어 (23)
SKILL.md:33-44 SKILL.md:44-48 SKILL.md:48-92 SKILL.md:92-98 SKILL.md:98-137 SKILL.md:137-158 SKILL.md:158-162 SKILL.md:162-196 SKILL.md:196-200 SKILL.md:200-243 SKILL.md:243-245 SKILL.md:245-249 SKILL.md:249-285 SKILL.md:285-289 SKILL.md:289-352 SKILL.md:352-356 SKILL.md:356-398 SKILL.md:398-402 SKILL.md:402-445 SKILL.md:445-449 SKILL.md:449-494 SKILL.md:494-500 SKILL.md:500-522
🔑 환경 변수 (2)
감사자: claude 감사 이력 보기 →
품질 점수
38
아키텍처
100
유지보수성
81
콘텐츠
22
커뮤니티
100
보안
87
사양 준수
만들 수 있는 것
App Router 빌드 시작
새 Next.js 14+ 앱에서 레이아웃, 로딩 상태 및 데이터 페칭을 위한 명확한 구조를 얻습니다.
라우팅 아키텍처 계획
일관된 로딩 UI로 대시보드 및 복잡한 흐름을 위한 병렬 및 가로채기 라우트를 설계합니다.
데이터 페칭 최적화
제품 목록 및 상세 페이지를 위한 캐싱 및 재검증 전략을 선택합니다.
이 프롬프트를 사용해 보세요
App Router 기본사항
핵심 App Router 파일 규칙과 Server Components 대 Client Components를 사용하는 시기를 설명하세요.
Server Actions 추가
재검증 및 리다이렉트와 함께 카트에 항목을 추가하는 Server Actions 패턴을 제공하세요.
병렬 라우트 계획
분석 및 팀 패널을 위한 로딩 상태와 함께 병렬 라우트 구조를 제안하세요.
고급 캐싱
태그 무효화와 함께 제품 목록 및 상세 페이지를 위한 캐싱 및 재검증 선택을 권장하세요.
모범 사례
- Server Components로 시작하고 필요한 경우에만 클라이언트 추가
- 데이터를 사용하는 컴포넌트와 함께 데이터 페칭을 공동 배치하세요
- 스트리밍과 명확한 로딩 상태를 가능하게 하도록 Suspense 경계를 사용하세요
피하기
- 서버 폴백 없이 Client Components에서 중요 데이터 페칭
- 렌더 트리를 팽창시키는 과도한 중첩 레이아웃
- 느린 데이터 소스에 대한 로딩 상태 건너뛰기
자주 묻는 질문
Next.js 14 및 15와 호환되나요
예. Next.js 14 및 15와 호환되는 App Router 패턴을 대상으로 합니다.
이 스킬의 한계는 무엇인가요
지침과 예제를 제공하지만 코드를 실행하거나 프로젝트를 빌드하지는 않습니다.
기존 App Router 앱에서 사용할 수 있나요
예. 현재 구조에 패턴을 점진적으로 적용할 수 있습니다.
내 데이터나 파일에 액세스하나요
아니요. 지침만 제공하고 로컬 데이터에는 액세스하지 않습니다.
패턴이 내 설정과 충돌하는 경우
제약 조건을 공유하고 패턴의 맞춤형 변형을 요청하세요.
공식 문서와 어떻게 비교되나요
패턴을 예제와 함께 요약하고 구성합니다. 공식 문서는 여전히 기본 참조입니다.