next-best-practices
Frontend
설치
$ npx skills add https://github.com/vercel-labs/next-skills --skill next-best-practices요약
Next.js 앱 구조를 손보거나 최신 패턴에 맞춰 페이지를 구현할 때 적합합니다.
- Next.js 파일 규칙, 서버 컴포넌트, 메타데이터, 라우트 핸들러, 이미지와 폰트 최적화를 점검하는 스킬입니다.
- 한국어 큐레이션 기준으로 이 스킬의 핵심을 먼저 정리했습니다.
- 설치는 개별 스킬 페이지의 명령을 그대로 사용합니다.
- 아래 해설 섹션에서 사용 맥락과 주의점을 한국어로 길게 풀어 읽을 수 있습니다.
해설
어떤 스킬인가
next-best-practices는 Next.js 프로젝트의 구조와 구현 패턴을 점검하는 스킬입니다. App Router, Server Components, metadata, route handlers, image/font 최적화, 캐싱, 에러 처리처럼 Next.js에서 자주 실수하는 지점을 다룹니다.
Next.js는 기능이 많고 버전 변화도 빠릅니다. 에이전트가 예전 Pages Router 습관이나 불필요한 클라이언트 컴포넌트 패턴을 가져오면 코드가 복잡해질 수 있습니다. 이 스킬은 현재 Next.js 방식에 맞춰 판단하도록 도와줍니다.
언제 쓰면 좋은가
새 라우트를 만들거나 SEO 메타데이터를 추가하거나 서버/클라이언트 경계를 정리할 때 좋습니다. 특히 정적 생성, 동적 라우트, sitemap, opengraph 이미지처럼 검색 노출과 연결되는 작업에 유용합니다.
프로젝트가 이미 자체 규칙을 갖고 있다면 그 규칙이 우선입니다. 이 스킬은 일반 기준을 제공하므로, 기존 코드베이스의 패턴을 먼저 읽고 적용해야 합니다.
설치
npx skills add https://github.com/vercel-labs/next-skills --skill next-best-practices
요청할 때는 사용하는 Next.js 버전과 라우터 구조를 함께 알려주는 편이 좋습니다.