스킬 nextjs-15-patterns
📦

nextjs-15-patterns

낮은 위험

Next.js 15 App Router 기능 빌드

Next.js 15 프로젝트에는 올바른 App Router, Server Component, Server Action 패턴이 필요합니다. 이 스킬은 Claude, Codex, Claude Code에 현대적인 구현 작업을 위한 간결한 참조 예제를 제공합니다.

지원: Claude Codex Code(CC)
📊 75 적절함
1

스킬 ZIP 다운로드

2

Claude에서 업로드

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

3

토글을 켜고 사용 시작

에이전트가 읽기 쉬운 리소스

AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.

Markdown 상세 GET /skills/barnhardt-enterprises-inc-nextjs-15-patterns.md 서명된 manifest GET /api/skills/barnhardt-enterprises-inc-nextjs-15-patterns/manifest 서명된 lockfile GET /api/skills/barnhardt-enterprises-inc-nextjs-15-patterns/lockfile

테스트해 보기

"nextjs-15-patterns" 사용 중입니다. 사용자 프로필 페이지 패턴을 요청합니다.

예상 결과:

Server Component, 함께 배치된 data fetching, not-found 상태, metadata 생성, loading boundary를 사용하는 간결한 계획입니다.

"nextjs-15-patterns" 사용 중입니다. create-post form을 처리하는 방법을 요청합니다.

예상 결과:

스키마 검증, 데이터베이스 변경, 캐시 재검증, 구조화된 오류, 선택적 리디렉션을 포함한 Server Action 접근 방식입니다.

"nextjs-15-patterns" 사용 중입니다. 대시보드를 위한 data fetching 가이드를 요청합니다.

예상 결과:

독립적인 데이터를 병렬로 fetch하고, 느린 섹션은 Suspense로 스트리밍하며, 안정적인 API 응답을 캐시하라는 추천입니다.

보안 감사

낮은 위험
v7 • 6/28/2026

The high static score is driven by false positives in Markdown documentation. Backticks are TypeScript code fences and template literals, not Ruby shell execution, and the fetch calls are Next.js examples using example.com or local routes. No prompt injection, executable scripts, malicious network behavior, or data exfiltration intent was found.

4
스캔된 파일
456
분석된 줄 수
3
발견 사항
7
총 감사 수
낮은 위험 문제 (3)
SKILL.md:11-17references/app-router.md:7-14references/server-actions.md:5-38
Static External Command Findings Are Markdown False Positives
The reported external command locations are fenced TypeScript examples, route diagrams, inline file names, or a TypeScript metadata template literal. They do not invoke a shell, spawn a process, or execute user-controlled commands.
references/data-fetching.md:79-92references/data-fetching.md:111-120
Sample Fetch Calls Are Documentation Examples
The network findings are sample Next.js fetch patterns that use api.example.com or local /api/users routes. They are not executed by the skill and do not transmit secrets or user data.
SKILL.md:3SKILL.md:67SKILL.md:135
Weak Crypto and Reconnaissance Findings Are Text Matches
The weak cryptography findings point to a description field and a TypeScript metadata description property. The reconnaissance finding points to a normal Server Component example, not host or system inspection.
감사자: codex 감사 이력 보기 →

품질 점수

45
아키텍처
100
유지보수성
87
콘텐츠
70
커뮤니티
84
보안
83
사양 준수

만들 수 있는 것

App Router 페이지 생성

Next.js 15 규칙을 따르는 페이지, 레이아웃, 로딩 상태, 오류 경계를 생성합니다.

Server Actions 구현

입력 검증, 캐시 재검증, 선택적 리디렉션을 포함한 변경 흐름을 추가합니다.

Data Fetching 선택 검토

서버 fetching, 클라이언트 fetching, 캐싱, 스트리밍, 순차 로딩 패턴을 비교합니다.

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

패턴 설명 
loading 및 error 상태가 있는 기본 Next.js 15 App Router 페이지를 어떻게 구성해야 하는지 설명해 주세요.
Server Action 빌드 
입력을 검증하고, 데이터를 작성하며, 영향을 받는 라우트를 새로고침하는 form을 위한 Server Action 계획을 만들어 주세요.
Data Fetching 선택 
이 기능 아이디어를 검토하고 각 데이터 소스에 대해 server fetching, client fetching, caching 또는 streaming을 추천해 주세요.
라우트 트리 리팩터링 
route groups, dynamic segments, metadata, intercepted modal route를 포함한 Next.js 15 라우트 구조를 설계해 주세요.

모범 사례

  • 브라우저 상태, effects 또는 event handlers가 필요하지 않다면 Server Components를 선호하세요.
  • 데이터베이스 쓰기나 캐시 재검증 전에 모든 Server Action 입력을 검증하세요.
  • 데이터가 사용되는 위치에서 fetch하고 느린 섹션은 Suspense로 스트리밍하세요.

피하기

  • 하나의 interactive component에만 필요할 때 전체 route를 client-side로 표시하지 마세요.
  • Server Action이 더 간단하고 적절할 때 API route mutations를 사용하지 마세요.
  • App Router routes에서 loading, error, not-found 상태를 무시하지 마세요.

자주 묻는 질문

이 스킬은 Next.js 15를 지원하나요?
예. Next.js 15 App Router 패턴과 관련 React 19 Server Action 사용에 중점을 둡니다.
전체 프로젝트를 자동으로 마이그레이션할 수 있나요?
아니요. AI 어시스턴트가 프로젝트 편집 중 적용할 수 있는 패턴과 가이드를 제공합니다.
보안 가이드가 포함되어 있나요?
Server Actions를 위한 입력 검증 예제를 포함하지만, 완전한 애플리케이션 보안 체크리스트는 아닙니다.
Claude Code와 함께 사용할 수 있나요?
예. 이 스킬은 Claude, Codex, Claude Code 지원을 명시합니다.
네트워크 액세스가 필요한가요?
아니요. 이 스킬은 문서 전용입니다. 샘플 fetch 호출은 애플리케이션 코드를 위한 예제입니다.
어떤 프로젝트에 가장 도움이 되나요?
Next.js App Router 기능을 빌드하거나 검토하는 React 팀에 가장 유용합니다.

개발자 세부 정보

라이선스

MIT

리포지토리

https://github.com/Barnhardt-Enterprises-Inc/quetrex-claude/tree/main/skills/nextjs-15-patterns

참조

main

파일 구조

📁 references/

📄 app-router.md

📄 data-fetching.md

📄 server-actions.md

📄 SKILL.md