next-best-practices

개요

next-best-practices란?

next-best-practices는 Next.js를 사용하는 프론트엔드 개발자를 위한 종합 스킬입니다. 확장 가능하고 유지보수하기 쉬운 Next.js 애플리케이션을 구축하기 위한 실용적인 모범 사례와 패턴을 제공합니다. 파일 규칙, React 서버 컴포넌트(RSC) 경계, 비동기 데이터 패칭, 오류 처리, 최적화 등 다양한 주제를 다루어 흔히 발생하는 문제를 피하고 최신 Next.js 워크플로우를 도입할 수 있도록 돕습니다.

누가 이 스킬을 사용해야 하나요?

• Next.js와 React를 사용하는 프론트엔드 개발자
• Next.js 앱 라우터로 이전하는 팀
• 최신 Next.js 규칙을 배우거나 적용하려는 모든 분

어떤 문제를 해결하나요?

• 대규모 Next.js 프로젝트의 파일 및 폴더 구조 명확화
• 서버 및 클라이언트 컴포넌트의 올바른 사용법 안내
• Next.js 15+의 비동기 데이터 패턴 및 마이그레이션 설명
• 일반적인 번들링 및 런타임 오류 예방
• 견고한 오류 처리 및 디버깅 전략 제공

언제 next-best-practices가 적합한가요?

• 새 Next.js 프로젝트 시작 시 또는 기존 프로젝트 리팩토링 시
• 팀원에게 Next.js 규칙을 교육할 때
• 데이터 패칭, 라우팅, 번들링 문제 해결 시

사용 방법

설치 단계

1. 다음 명령어로 스킬을 프로젝트에 추가하세요:

   npx skills add https://github.com/vercel-labs/next-skills --skill next-best-practices
   

2. SKILL.md 파일을 열어 개요와 상세 가이드 링크를 확인하세요.
3. 다음 지원 파일을 검토하여 특정 주제를 학습하세요:
   • file-conventions.md: 프로젝트 구조, 라우트 세그먼트, 특수 파일에 대해 배웁니다.
   • rsc-boundaries.md: 유효한 React 서버 컴포넌트 패턴과 그렇지 않은 패턴을 이해합니다.
   • async-patterns.md: params, cookies, headers의 새로운 비동기 API로 마이그레이션합니다.
   • data-patterns.md: 적합한 데이터 패칭 및 변이 전략을 선택합니다.
   • error-handling.md: 오류 경계 구현과 네비게이션 예외 처리 방법을 익힙니다.
   • bundling.md: 서드파티 패키지 번들링 문제를 해결합니다.
   • directives.md: 'use client', 'use server', 'use cache' 같은 React 및 Next.js 지시문 사용법을 배웁니다.
   • debug-tricks.md: Next.js 개발 도구와 엔드포인트로 디버깅 속도를 높입니다.

프로젝트에 맞게 적용하기

• 제공된 패턴을 참고하여 리포지토리, 도구, 배포 환경에 맞게 조정하세요.
• 코드를 그대로 복사하지 말고 각 패턴이 사용하는 스택과 Next.js 버전에 적합한지 검토하세요.

주요 다루는 주제

• 파일 규칙과 프로젝트 구조
• RSC 경계 및 컴포넌트 패턴
• 비동기 데이터 패칭 및 마이그레이션
• 라우트 핸들러와 런타임 선택
• 오류 경계 및 전역 오류 처리
• 이미지 및 폰트 최적화
• 번들링 및 외부 의존성 관리
• 디버깅 및 개발 도구

자주 묻는 질문

next-best-practices 콘텐츠는 어떻게 미리 볼 수 있나요?

설치 후 파일 탭을 열어 SKILL.md, async-patterns.md, bundling.md 등 포함된 모든 가이드를 탐색하세요. 각 파일은 특정 Next.js 모범 사례에 집중합니다.

next-best-practices는 특정 Next.js 버전에 맞춰져 있나요?

이 스킬은 Next.js 15+에 맞게 업데이트되었으며 새로운 비동기 API와 규칙 마이그레이션 단계를 포함합니다. 일부 패턴은 이전 버전에서는 적용되지 않을 수 있습니다.

커스텀 설정과 함께 next-best-practices를 사용할 수 있나요?

네, 다만 라우팅, 서버 런타임, 번들링 관련 커스텀 구성과 호환되는지 각 패턴을 검토해야 합니다.

특정 주제에 대해 더 자세한 정보가 필요하면 어떻게 하나요?

각 주제 파일에는 실용적인 예제와 공식 Next.js 또는 React 문서 링크가 포함되어 있어 심화 학습이 가능합니다.

문제가 발생하면 어디서 도움을 받을 수 있나요?

debug-tricks.md에서 고급 디버깅 팁을 확인하거나 스킬 파일 내 공식 Next.js 문서 링크를 참고하세요.