스킬 nextjs-app-router-patterns
📦

nextjs-app-router-patterns

안전

App Router 패��으로 현대적인 Next.js 앱 구축

또한 다음에서 사용할 수 있습니다: wshobson

Next.js 14+ App Router의 복잡성으로 어려움을 겪고 계신가요? 이 스킬은 Server Components, 스트리밍, 병렬 라우팅, 데이터 가져오기를 위한 검증된 패턴을 ��공하여 개발 속도를 높여줍니다.

지원: Claude Codex Code(CC)
🥉 74 브론즈
1

스킬 ZIP 다운로드

2

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

3

토글을 켜고 사용 시작

테스트해 보기

"nextjs-app-router-patterns" 사용 중입니다. ISR 캐싱으로 블로그 게시물을 가져오는 Server Component 생성

예상 결과:

  • 비동기 데이터 가져오기가 포함된 app/blog/page.tsx 생성
  • 매시간 캐시 새로고침을 위한 revalidate: 3600 구성
  • 재검증 중 더 나은 UX를 위한 loading.tsx 스켈레톤 추가
  • 우아한 실패 처리를 위한 오류 바운더리 포함

"nextjs-app-router-patterns" 사용 중입니다. 사진 라우트를 인터셉트하는 모달 구현

예상 결과:

  • @modal 병렬 라우트 구조 생성
  • (.)photos/[id]/page.tsx에 인터셉팅 라우트 추가
  • 직접 탐색을 위한 default.tsx 폴백 설정
  • 적절한 닫기 동작이 포함된 모달 컴포넌트 구현

보안 감사

안전
v1 • 2/24/2026

This skill contains documentation-only markdown files with Next.js educational code examples. All 56 static findings are false positives because the scanner incorrectly flagged markdown code blocks as executable code. No actual security risks detected.

2
스캔된 파일
580
분석된 줄 수
0
발견 사항
1
총 감사 수
보안 문제를 찾지 못했습니다
감사자: claude

품질 점수

38
아키텍처
100
유지보수성
87
콘텐츠
50
커뮤니티
100
보안
91
사양 준수

만들 수 있는 것

Pages Router에서 App Router로 마이그레이션

최소한의 중단으로 기존 Next.js 애플리케이션을 새로운 App Router 아키텍처로 전환하기 위한 단계별 가이드.

성능 최적화��� 이커머스 사이트 구축

빠르고 확장 가능한 온라인 스토어를 위한 스트리밍 제품 ��이지, 병렬 장바구니 업데이트, ISR 캐싱 구현.

실시간 데이터로 대시보드 애플리케이션 생성

병렬 라우트와 Suspense 바운더리를 사용하여 독립적으로 로드되는 패널로 복잡한 레이아웃 설계.

이 프롬프트를 사용해 보세요

기본 Server Component 설정 
API에서 제품을 가져와서 그리드로 표시하는 Next.js Server Component를 생성하세요. 적절한 오류 처리 및 로딩 상태를 포함하세요.
Suspense로 스트리밍 구현 
리뷰와 추천을 점진적으로 스트리밍하는 제품 상세 페이지를 구축하세요. 로드될 때 콘텐츠를 표시하기 위해 Suspense 바운더리를 사용하세요.
폼 처리를 위한 Server Actions 생�� 
검증, 오류 처리, 성공 시 리디렉션이 포함된 Server Actions를 사용하여 체크아웃 폼을 구현하세요. 낙관적 UI 업데이트를 포함하세요.
대시보드를 위한 병렬 라우트 설정 
병렬로 로드되는 독립적인 분석, 팀, 활동 패널이 있는 대시보드 레이아웃을 설계하세���.

모범 사례

  • 기본적으로 Server Components로 시작하고 브라우저 API 또는 인터랙티브 기능이 필요한 경우에만 'use client' 추가
  • 최적의 캐싱과 코드 구성을 위해 데이터를 소비하는 곳 근처에 데이터 가져오기 배치
  • 스트리밍을 활성화하고 인지된 성능을 개선하기 위해 전략적으로 Suspense 바운더리 사용

피하기

  • 실행할 수 없는 Server Components에서 useState 또는 useEffect 사용
  • 소비 컴포넌트와 함께 가져오기를 배치하는 대신 최상위 수준에서 모든 데이터 가져오기
  • 데이터 가져오기 중 사용자 경험을 저해하는 로딩 상태 무시

자주 묻는 질문

Server Components와 Client Components의 차이점은 무엇인가요?
Server Components는 서버에서 렌더링되어 HTML을 브라우저로 전송합니다. 백엔드 리소스에 ��접 액세스할 수 있습니다. Client Components는 브라우저에서 실행되며 useState, useEffect, 이벤트 핸들러로 인터랙티브 기능을 지원합니다.
Pages Router에서 App Router로 어떻게 마이그레이션하나요?
pages/ 디렉터리와 함께 app/ 디렉터리를 생성하세요. app/에서 라우트를 재생성하여 점진적으로 마이그레이션하세요. 마이그레이션 중에는 두 라우터를 공존할 수 있���니다. 가져오기를 업데이트하고 새 파일 규칙에 맞게 조정하세요.
Server Actions와 API 라우트 중 언제 사용해야 하나요?
컴포넌트에서 트리거되는 폼 제출 및 데이터 변경에는 Server Actions를 사용하세요. 외부 소비자나 비React 클라이언트를 위한 REST 엔드포인트가 필요할 때 API 라우트를 사용하세요.
App Router에서 캐싱은 어떻게 작동하나요?
App Router는 기본적으로 fetch 요청을 캐시합니다. 캐싱을 비활성화하려면 cache: 'no-store', 정적 캐싱에는 cache: 'force-cache', ISR에는 next: { revalidate: N }을 사용하세요. 태그 기반 무효화를 통해 대상 캐시 업데이트가 가능합니다.
동적 세그먼트와 함께 병렬 라우트를 사용할 수 있나요?
네, 병렬 라우트는 동적 세그먼트와 함께 작동합니다. 각 병렬 슬롯은 동일한 params를 수신합니다. 레이아웃에서 @analytics 및 @team과 같은 슬롯 명명 규칙을 사용하�� 독립적인 렌더링 영역을 정의하세요.
인터셉팅 라우트는 무엇에 사용되나요?
인터셉팅 라우트를 사용하면 탐색 컨텍스트를 기준으로 동일한 URL에 대해 다른 UI를 표시할 수 있습니다. 일반적인 사용 사례로는 앱 내부에서 탐색할 때 나타나지만 직접 방문 시 전체 페이지를 표시하는 모달이 있습니다.

개발자 세부 정보

작성자

sickn33

라이선스

MIT

리포지토리

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/nextjs-app-router-patterns

참조

main

파일 구조

📁 resources/

📄 implementation-playbook.md

📄 SKILL.md