Community라이팅 & 에디팅github.com

LeahyCC/claude-skills

버전 인식 컴포넌트 경계, 데이터 페칭, 캐싱, 라우팅, 변이를 활용하여 Next.js App Router 애플리케이션을 빌드, 검토 또는 마이그레이션합니다. 일반적인 React 최적화, 복사 전용 수정 또는 마이그레이션이 포함되지 않은 Pages Router 수정이 아닌 App Router 구현 및 아키텍처 작업에 사용하십시오.

claude-skills란 무엇인가요?

이 스킬은 Next.js App Router를 사용하는 애플리케이션을 개발, 검토 및 마이그레이션하기 위한 종합적인 가이드입니다. 개발자가 앱의 지원되는 버전과 설정을 유지하면서 서버 렌더링/클라이언트 상호작용 간의 올바른 균형을 맞출 수 있도록 돕습니다. 주요 기능으로는 서버/클라이언트 컴포넌트 경계, 데이터 페칭 전략(App Router 전용: 서버 액션, 라우트 핸들러, 스트리밍), 캐싱 모델(App Router의 fetch 옵션, `unstable_cache` 등), 레이아웃/라우팅(동적 라우트, 병렬/인터셉팅 라우트), 오류/로딩/404 처리, 메타데이터, 이미지/폰트 최적화, 마이그레이션(페이지에서 앱 라우터로) 등이 포함됩니다. 프록시, 인증, 보안 모범 사례(비밀 보호, 사용자 데이터 검증)도 다룹니다. 이 스킬은 Claude Code, Cursor, Codex와 같은 AI 에이전트와 함께 사용하도록 설계되었으며, 자체 문서(`resources/` 디렉토리)와 공식 Next.js 문서(특히 Next.js 16.2+의 `node_modules/next/dist/docs/`)를 참조하여 작업합니다. 주요 원칙은 버전 인식(기존 패키지나 기능을 업그레이드하지 않음), 올바른 보안(데이터 근처에서 인증/권한 부여), 성능 최적화(폭포수 제거, 불필요한 클라이언트 코드 최소화), 그리고 검증(타입체크, 린트, 빌드, 동작 테스트 실행)입니다. 마이그레이션의 경우 점진적인 페이지에서 앱 라우터로의 전환을 지원합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/LeahyCC/claude-skills/tree/HEAD/skills/nextjs-app-router

Installed? Explore more 라이팅 & 에디팅 skills: steipete/notion, langchain-ai/langchain, bytedance/podcast-generation · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

Next.js App Router

앱의 지원되는 버전과 설정을 유지하십시오. 서버 렌더링과 직접 서버 읽기를 적절한 곳에 선호하고, 대화형 및 실시간 브라우저 동작이 필요한 곳에는 유지하십시오.

컨텍스트 파악

package.json, lockfile, 라우트 폴더, next.config.*, 프로젝트 지침을 검사하십시오. 설치된 Next.js/React 버전, App 라우터 대 Pages 라우터, 런타임/배포 제약 조건, Cache Components 활성화 여부를 식별하십시오. 모노레포에서는 영향을 받는 앱에서 이를 확인하십시오. 단순히 예제에 맞추기 위해 패키지를 업그레이드하거나 기능을 활성화하지 마십시오.

가능하면 Next.js 16.2+에서 node_modules/next/dist/docs/에 번들된 버전 일치 문서를 선호하십시오. 그렇지 않으면 지원되는 버전의 공식 문서를 참조하십시오. 라이브 문서는 더 새로운 마이너 버전을 설명할 수 있습니다. 사용 전에 API 버전 기록과 설정을 확인하십시오. 안정적인 API, 실험적 옵션, 폐기 예정 사항 및 프로젝트 관례를 구분하십시오.

관련 리소스 선택

작업에 필요한 리소스만 읽으십시오. 버전이나 동작이 불확실한 경우 공식 링크를 따르십시오.

작업리소스
서버/클라이언트 경계, 구성, 직렬화Server Components
읽기, 스트리밍, 브라우저 데이터, 액션, HTTP 엔드포인트Data fetching
기존 캐시 모드, Cache Components, 개인/원격 캐시, 무효화Caching
레이아웃, 동적 라우트, 검색, 병렬/인터셉팅 라우트Routing
요청 리디렉션/재작성 및 낙관적 인증 게이트Proxy
예상 오류, 로딩, 복구, 404 응답 의미Error handling
메타데이터 내보내기, 상속 및 SEO 통합Metadata
이미지/폰트 설정 및 로딩 트레이드오프Assets
점진적인 Pages에서 App으로 마이그레이션Migration
의도적인 주요/마이너 업그레이드Version changes

결정 우선순위

  1. 비밀과 사용자 데이터를 보호하십시오. 데이터 근처에서 읽기/변이를 인증 및 권한 부여하고, 신뢰할 수 없는 입력을 검증하며, 개인 데이터가 잘못 공유된 캐시에 포함되지 않도록 하십시오. 프록시 및 UI 가시성만으로는 충분한 인가가 아닙니다.
  2. 버전 및 렌더링 모드 전반에서 정확성을 유지하십시오. 비동기 요청 API, 캐시 전제 조건, 라우트 규칙 및 복구 props는 설치된 버전/설정에 따라 다릅니다.
  3. 입증된 폭포수 및 불필요한 클라이언트 코드를 제거하십시오. 독립적인 작업을 병렬화하고, 유용한 UI를 유지하는 Suspense 경계를 선택하십시오. 클라이언트 페칭은 폴링, 브라우저 전용 상태 및 대화형 업데이트에 여전히 적합합니다.
  4. 캐싱, 프리페치 및 에셋 힌트를 신선도, 배포 및 측정된 동작에 맞게 조정하십시오. 이는 모든 App Router 앱의 전제 조건이 아니라 선택 사항입니다.

서버 전용 작업에는 Server Components를 사용하십시오. 상호작용을 위해 유용한 모듈 경계에 'use client'를 추가하십시오. 리프(leaf)일 필요는 없습니다. UI 변이에는 Server Action을, HTTP 계약(브라우저 클라이언트 포함)에는 Route Handler를 사용하십시오. 둘 중 어느 것도 인가를 대체하지 않습니다.

실제 변경 사항 검증

가능할 때 영향을 받는 앱의 기존 타입체크, 린트 및 빌드 명령을 실행하십시오. 실패할 수 있는 동작(인증된 직접 요청, 교차 사용자 격리, 변이 후 신선도, 하드/소프트 탐색, 오류, 로딩)을 테스트하십시오. 가져오기, 인증 도우미 또는 지속성이 플레이스홀더인 상태로 스니펫을 프로덕션 준비 완료라고 부르지 마십시오. 실행된 것과 테스트되지 않은 것을 명시하십시오.

리뷰의 경우, 실행 가능한 실패와 해당 버전/설정 범위를 먼저 제시하십시오. 선택적 개선 사항을 정확성 문제와 분리하십시오. 구현의 경우, 선택된 경계/캐시 모드, 변경된 동작 및 검증을 설명하십시오.

소스 리뷰는 특정 범위로 제한되며, 전면 인증이 아닙니다. 정식 링크, 적용 가능한 버전/설정, 확인된 섹션, 업스트림 날짜 및 신선도 정책에 대해서는 SOURCES.md를 참조하십시오. 저장소의 파일럿 리뷰/평가 기록은 유지 관리 증거이며 런타임에 필요하지 않습니다.

관련 스킬