nextjs-app-router-patterns

개요

nextjs-app-router-patterns란?

nextjs-app-router-patterns는 Next.js 14 이상 버전을 사용하는 프론트엔드 개발자를 위한 실용적인 스킬입니다. 서버 컴포넌트, 스트리밍, 병렬 및 인터셉트 라우트, 고급 데이터 페칭 전략 등 App Router 아키텍처를 완벽히 익히는 데 중점을 둡니다. 이 스킬은 새로운 Next.js 애플리케이션을 구축하거나 Pages Router에서 마이그레이션하거나 React 서버 컴포넌트의 성능과 확장성을 최적화하려는 팀에 적합합니다.

누가 사용해야 하나요?

• Next.js App Router를 사용하거나 마이그레이션하는 프론트엔드 개발자
• 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), React 서버 컴포넌트를 구현하는 팀
• 최신 React 앱에서 데이터 페칭, 캐싱, 풀스택 기능을 최적화하는 개발자

해결하는 문제

• Next.js App Router 모범 사례 도입을 간소화
• 서버 컴포넌트와 클라이언트 컴포넌트 사용 시점 명확화
• 확장 가능한 Next.js 프로젝트를 위한 파일 규칙과 아키텍처 패턴 제공

사용 방법

설치 단계

1. Skills CLI를 사용해 스킬을 설치하세요:

   npx skills add https://github.com/wshobson/agents --skill nextjs-app-router-patterns
   

2. SKILL.md 파일을 검토하여 개요와 워크플로우 지침을 확인하세요.
3. 필요에 따라 README.md, AGENTS.md, metadata.json 등 관련 파일을 탐색해 더 깊은 내용을 파악하세요.
4. rules/, resources/, references/, scripts/ 디렉터리에서 지원 자료와 구현 예제를 살펴보세요.

프로젝트에 맞게 적용하기

• 서버, 클라이언트, 정적, 동적, 스트리밍 렌더링 모드를 활용해 각 라우트나 컴포넌트 구조를 결정하세요.
• app/ 디렉터리 내 layout.tsx, page.tsx, loading.tsx, error.tsx, not-found.tsx 등 권장 파일 규칙을 따르세요.
• 고급 내비게이션과 사용자 경험을 위해 병렬 및 인터셉트 라우트를 통합하세요.
• 성능과 확장성을 위해 고급 데이터 페칭 및 캐싱 기법을 적용하세요.

언제 nextjs-app-router-patterns가 적합한가요?

• App Router를 사용하는 새로운 Next.js 프로젝트를 시작할 때
• Pages Router에서 서버 컴포넌트와 스트리밍을 활용하기 위해 마이그레이션할 때
• 명확하고 유지보수하기 쉬운 풀스택 React 개발 패턴이 필요할 때

자주 묻는 질문

nextjs-app-router-patterns는 무엇을 다루나요?

Next.js 14 이상 버전의 App Router 사용을 위한 서버 컴포넌트, 스트리밍, 병렬 및 인터셉트 라우트, 고급 데이터 페칭 등 포괄적인 패턴을 다룹니다.

설치 후 어디서부터 시작하나요?

SKILL.md 파일에서 개요를 확인한 후 필요에 따라 다른 지원 파일과 폴더를 탐색하세요.

이 스킬을 구버전 Next.js에 사용할 수 있나요?

이 스킬은 App Router를 사용하는 Next.js 14 이상 버전을 위해 설계되었으며, 구버전이나 기존 Pages Router에는 권장되지 않습니다.

모든 사용 가능한 파일을 어떻게 미리 볼 수 있나요?

에이전트 스킬 디렉터리의 Files 탭을 사용해 전체 파일 트리와 중첩된 참조, 헬퍼 스크립트를 탐색할 수 있습니다.