스킬 nextjs-app-router-patterns
📦

nextjs-app-router-patterns

콘텐츠 리비전 r1 안전 ⚙️ 외부 명령어🌐 네트워크 접근🔑 환경 변수

더 나은 Next.js App Router 앱 구축

Next.js App Router 프로젝트는 라우팅, 스트리밍, 캐싱, Server Components가 상호작용할 때 구조화하기 어려울 수 있습니다. 이 스킬은 Claude, Codex, Claude Code에 최신 Next.js 애플리케이션 아키텍처를 위한 실용적인 패턴을 제공합니다.

지원: Claude Codex Code(CC)
Maintain this Skill? Claim it 🥉 77 브론즈

내 에이전트로 설치

이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.

에이전트 요청
Review the Skillstore skill "nextjs-app-router-patterns" from https://skillstore.io/skills/wshobson-nextjs-app-router-patterns.md and its manifest at https://skillstore.io/api/skills/wshobson-nextjs-app-router-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.

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

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

Markdown 상세 GET /skills/wshobson-nextjs-app-router-patterns.md 서명된 manifest GET /api/skills/wshobson-nextjs-app-router-patterns/manifest 서명된 lockfile GET /api/skills/wshobson-nextjs-app-router-patterns/lockfile

테스트해 보기

"nextjs-app-router-patterns" 사용 중입니다. 제품 목록 페이지에는 필터, 페이지네이션, 빠른 첫 화면 표시가 필요합니다.

예상 결과:

  • 권장 사항: 페이지를 Server Component로 유지하고 필터링된 제품을 목록 근처에서 가져오세요.
  • 제품 목록 주변에 Suspense를 사용하여 필터와 주변 레이아웃이 먼저 렌더링될 수 있도록 하세요.
  • 제품 데이터에는 태그 기반 재검증을 사용하고, 데이터베이스 접근 전에 쿼리 파라미터를 검증하세요.

"nextjs-app-router-patterns" 사용 중입니다. 대시보드에는 독립적인 분석 패널과 팀 패널이 필요합니다.

예상 결과:

  • 권장 사항: 독립적으로 로드되는 패널에는 parallel routes를 사용하세요.
  • 느린 분석 데이터가 팀 데이터를 차단하지 않도록 각 패널에 자체 로딩 상태를 제공하세요.
  • 공유 내비게이션과 레이아웃 상태는 상위 대시보드 레이아웃에 유지하세요.

"nextjs-app-router-patterns" 사용 중입니다. API 라우트가 제품 생성 요청을 받습니다.

예상 결과:

  • 권장 사항: 요청을 파싱하고, 스키마로 검증하며, 호출자를 인증하고, 필드를 허용 목록으로 제한하세요.
  • 검증 오류와 누락된 레코드에 대해 명확한 상태 코드를 반환하세요.
  • 원시 요청 본문을 영속성 호출에 직접 전달하지 마세요.

보안 감사

안전
v7 • 2026. 7. 8. 버전별 보고서 열기

All static findings were false positives caused by Markdown code fences, TypeScript examples, documentation links, and placeholder data-fetching snippets. No evidence found of command execution, credential exfiltration, prompt injection, environment file access, or system reconnaissance in SKILL.md.

1
스캔된 파일
545
분석된 줄 수
0
검토 항목
0
오탐 무시됨

위험 요인

⚙️ 외부 명령어 (23)
SKILL.md:33-44 SKILL.md:44-48 SKILL.md:48-92 SKILL.md:92-98 SKILL.md:98-137 SKILL.md:137-158 SKILL.md:158-162 SKILL.md:162-196 SKILL.md:196-200 SKILL.md:200-243 SKILL.md:243-245 SKILL.md:245-249 SKILL.md:249-285 SKILL.md:285-289 SKILL.md:289-352 SKILL.md:352-356 SKILL.md:356-398 SKILL.md:398-402 SKILL.md:402-445 SKILL.md:445-449 SKILL.md:449-494 SKILL.md:494-500 SKILL.md:500-522
🌐 네트워크 접근 (10)
SKILL.md:76 SKILL.md:136 SKILL.md:502 SKILL.md:505 SKILL.md:508 SKILL.md:511 SKILL.md:76 SKILL.md:542 SKILL.md:543 SKILL.md:544
🔑 환경 변수 (2)
SKILL.md:137 SKILL.md:137
가장 최근에 완료된 정적·의미론적 감사에서 확인된 보안 발견 사항이 감지되지 않았습니다. 이는 스킬에 부작용이 없음을 증명하지 않습니다.
감사자: codex 감사 이력 보기 →
이 보고서 공유 및 인용

버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.

버전별 보고서 열기
보안 평가

보고서 링크 복사

https://skillstore.io/skills/wshobson-nextjs-app-router-patterns/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 배지

[![Skillstore security assessment](https://skillstore.io/badges/skills/wshobson-nextjs-app-router-patterns/security.svg)](https://skillstore.io/skills/wshobson-nextjs-app-router-patterns?utm_source=security_passport_badge)

HTML 배지

<a href="https://skillstore.io/skills/wshobson-nextjs-app-router-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-nextjs-app-router-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

임베드 카드

<iframe src="https://skillstore.io/embed/skills/wshobson-nextjs-app-router-patterns.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
학술 인용 (APA · BibTeX · CFF)

APA 인용

wshobson. (2026). nextjs-app-router-patterns security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-nextjs-app-router-patterns/audits/7

BibTeX 인용

@techreport{wshobson-wshobson-nextjs-app-router-patterns-2026, author = {wshobson}, title = {nextjs-app-router-patterns security audit report (audit version 7)}, institution = {Skillstore}, year = {2026}, number = {7}, url = {https://skillstore.io/skills/wshobson-nextjs-app-router-patterns/audits/7}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "nextjs-app-router-patterns security audit report (audit version 7)" version: "unspecified" type: report authors: - name: "wshobson" date-released: "2026-07-08" url: "https://skillstore.io/skills/wshobson-nextjs-app-router-patterns/audits/7" identifiers: - type: other value: "skillstore:wshobson-nextjs-app-router-patterns:audit:7" description: "Skillstore immutable audit report identifier"

변형 비교

설치 가능한 변형 2개

각 작성자의 스킬은 별도의 설치 항목으로 유지됩니다. 추천 변형은 Skillstore 근거로 순위가 정해집니다.

이 변형이 1위인 이유

Skillstore 점수가 가장 높음
wshobson 권장 현재

wshobson-nextjs-app-router-patterns

Skillstore 점수 77
증거 신뢰도 높음
Skillstore 사용량 17
업데이트됨

2026-09-09

sickn33

sickn33-nextjs-app-router-patterns

Skillstore 점수 38
증거 신뢰도 중간
Skillstore 사용량 14
업데이트됨

2026-09-09

Skillstore 점수

이 점수의 이유 증거 신뢰도: 높음
55
아키텍처
85
유지보수성
87
콘텐츠
71
커뮤니티
78
사양 준수

만들 수 있는 것

새 App Router 프로젝트 계획

구현을 시작하기 전에 파일 규칙, 렌더링 모드, 로딩 상태, 라우트 경계를 선택합니다.

기존 Next.js 라우트 현대화

Pages Router 방식의 습관을 Server Components, 레이아웃, route handlers를 사용하는 App Router 패턴으로 전환합니다.

아키텍처 패턴 검토

기능이 캐싱, Suspense, 메타데이터, Server Actions를 유지보수 가능한 방식으로 사용하는지 확인합니다.

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

렌더링 패턴 선택 
Use the Next.js App Router patterns skill to recommend rendering modes for this page. Include Server Component, Client Component, static, dynamic, and streaming tradeoffs.
라우트 구조 설계 
Use the skill to design an App Router folder structure for this feature. Include layout, page, loading, error, route handler, and default files where appropriate.
데이터 가져오기 개선 
Use the skill to review this data fetching flow. Recommend caching, revalidation, tag invalidation, and Suspense boundaries for a Next.js App Router implementation.
고급 라우팅 감사 
Use the skill to evaluate this App Router design with parallel routes, intercepting routes, Server Actions, and metadata generation. Call out security and validation gaps.

모범 사례

  • Server Components로 시작하고 브라우저 API, 훅, 직접적인 상호작용이 필요한 경우에만 Client Components를 추가하세요.
  • 느린 데이터 영역 주변에 Suspense 경계를 배치하여 페이지의 나머지 부분이 빠르게 스트리밍될 수 있도록 하세요.
  • 요청 본문, 폼 데이터, 라우트 파라미터, 검색 파라미터를 데이터베이스 작업에 사용하기 전에 검증하세요.

피하기

  • 명확한 상호작용 요구사항 없이 큰 라우트 트리의 최상단에 use client를 넣는 것.
  • 원시 요청 본문을 데이터베이스 쓰기나 Server Actions에 직접 전달하는 것.
  • 안전하게 캐시, 사전 빌드, 재검증할 수 있는 콘텐츠에 동적 렌더링을 사용하는 것.

자주 묻는 질문

이 스킬은 완전한 Next.js 애플리케이션을 생성하나요?
아니요. 기존 프로젝트 안에서 에이전트가 적용할 수 있는 아키텍처 안내와 코드 패턴을 제공합니다.
어떤 Next.js 버전을 대상으로 하나요?
App Router 모델을 사용하는 Next.js 14 이상을 대상으로 합니다.
Server Components에 도움이 될 수 있나요?
예. Server Components를 언제 사용해야 하는지와 Client Component가 언제 필요한지 설명합니다.
캐싱을 다루나요?
예. fetch 캐싱, 재검증, 태그, 경로 무효화 패턴을 설명합니다.
이 스킬은 게시해도 안전한가요?
예, 중간 위험도 참고 사항이 있습니다. 이 스킬은 안내 전용이지만, 사용자가 복사하기 전에 하나의 API 예제를 개선해야 합니다.
Claude, Codex, Claude Code가 사용할 수 있나요?
예. 메타데이터에는 Claude, Codex, Claude Code 지원이 명시되어 있습니다.

개발자 세부 정보

작성자

wshobson

라이선스

MIT

Skillstore 리비전

r1

버전 안내

작성자가 버전을 선언하지 않았습니다.

리포지토리

https://github.com/wshobson/agents/tree/main/plugins/frontend-mobile-development/skills/nextjs-app-router-patterns

참조

64ca8af0f54a325752f08bd54e52151061ea659a

유지보수 최신성

2026. 7. 21.

사용량

9 다운로드 · 263 조회

파일 구조

📄 SKILL.md

wshobson의 다른 스킬

전체 보기

관련 스킬

전체 보기