스킬 Next.js Patterns
📦

Next.js Patterns

콘텐츠 리비전 r2 안전 ⚙️ 외부 명령어🌐 네트워크 접근

Next.js App Router 기능 구축

Next.js 팀은 페이지, 레이아웃, 라우팅, 데이터 가져오기 패턴을 혼용하는 경우가 많습니다. 이 스킬은 Claude, Codex, Claude Code에 간결한 프로젝트 규칙을 제공합니다.

지원: Claude Codex Code(CC)
Maintain this Skill? Claim it 📊 76 적절함

내 에이전트로 설치

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

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

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

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

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

Markdown 상세 GET /skills/abdulsamad94-next-js-patterns.md 서명된 manifest GET /api/skills/abdulsamad94-next-js-patterns/manifest 서명된 lockfile GET /api/skills/abdulsamad94-next-js-patterns/lockfile

테스트해 보기

"Next.js Patterns" 사용 중입니다. 브라우저 상태와 내비게이션을 사용하는 대시보드 페이지를 검토합니다.

예상 결과:

어시스턴트는 해당 페이지에 Client Component 경계가 필요하다고 식별하고, 프로그래밍 방식의 내비게이션은 해당 경계 내부에서만 사용할 것을 권장합니다.

"Next.js Patterns" 사용 중입니다. 마케팅 라우트의 metadata 및 폰트 사용을 계획합니다.

예상 결과:

어시스턴트는 metadata를 라우트 파일 또는 레이아웃에 배치하고 루트 레이아웃에서 next/font/google을 사용할 것을 권장합니다.

"Next.js Patterns" 사용 중입니다. 제품 상세 페이지의 데이터 가져오기 선택지를 확인합니다.

예상 결과:

어시스턴트는 초기 데이터에는 서버 측 가져오기를, 브라우저 주도 업데이트에만 클라이언트 측 가져오기를 제안합니다.

보안 감사

안전
v10 • 2026. 7. 18. 버전별 보고서 열기

All 13 external-command detections are false positives caused by Markdown inline code and fenced TypeScript examples. The single network detection is documentation that recommends ordinary application data fetching and contains no endpoint, credential, or exfiltration instruction. No prompt injection, deceptive instruction, or other intent-level security concern was found.

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

위험 요인

⚙️ 외부 명령어 (13)
SKILL.md:9 SKILL.md:12 SKILL.md:14 SKILL.md:17 SKILL.md:21 SKILL.md:22 SKILL.md:24-34 SKILL.md:34-37 SKILL.md:37-38 SKILL.md:38 SKILL.md:41 SKILL.md:42-45 SKILL.md:45
🌐 네트워크 접근 (1)
SKILL.md:37
가장 최근에 완료된 정적·의미론적 감사에서 확인된 보안 발견 사항이 감지되지 않았습니다. 이는 스킬에 부작용이 없음을 증명하지 않습니다.
감사자: claude 감사 이력 보기 →
이 보고서 공유 및 인용

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

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

보고서 링크 복사

https://skillstore.io/skills/abdulsamad94-next-js-patterns/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 배지

[![Skillstore security assessment](https://skillstore.io/badges/skills/abdulsamad94-next-js-patterns/security.svg)](https://skillstore.io/skills/abdulsamad94-next-js-patterns?utm_source=security_passport_badge)

HTML 배지

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

임베드 카드

<iframe src="https://skillstore.io/embed/skills/abdulsamad94-next-js-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 인용

AbdulSamad94. (2026). Next.js Patterns security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/abdulsamad94-next-js-patterns/audits/10

BibTeX 인용

@techreport{abdulsamad94-abdulsamad94-next-js-patterns-2026, author = {AbdulSamad94}, title = {Next.js Patterns security audit report (audit version 10)}, institution = {Skillstore}, year = {2026}, number = {10}, url = {https://skillstore.io/skills/abdulsamad94-next-js-patterns/audits/10}, 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: "Next.js Patterns security audit report (audit version 10)" version: "unspecified" type: report authors: - name: "AbdulSamad94" date-released: "2026-07-18" url: "https://skillstore.io/skills/abdulsamad94-next-js-patterns/audits/10" identifiers: - type: other value: "skillstore:abdulsamad94-next-js-patterns:audit:10" description: "Skillstore immutable audit report identifier"

Skillstore 점수

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

만들 수 있는 것

App Router 페이지 만들기

예상되는 Next.js 파일 구조를 따르는 페이지와 레이아웃을 구축합니다.

라우팅 선택 검토

내비게이션이 올바른 컴포넌트 컨텍스트에서 Link 또는 useRouter를 사용하는지 확인합니다.

프로젝트 패턴 표준화

컴포넌트, 데이터 가져오기, 폰트, metadata에 대한 팀 지침을 정렬합니다.

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

페이지 계획하기 
Use the next-js-patterns skill to plan a new App Router page for this feature. Include page location, component type, and navigation needs.
컴포넌트 경계 확인 
Use the next-js-patterns skill to review this component. Tell me whether it should be a Server Component or Client Component and why.
내비게이션 흐름 개선 
Use the next-js-patterns skill to review this navigation flow. Recommend Link or useRouter for each navigation action.
App Router 규칙 감사 
Use the next-js-patterns skill to audit this Next.js feature. Check routing, layouts, component boundaries, data fetching, fonts, and metadata.

모범 사례

  • 브라우저 API 또는 상태가 필요하지 않으면 기본적으로 Server Components를 사용합니다.
  • 내부 링크에는 Link를 사용하고, 클라이언트 측 프로그래밍 방식 내비게이션에는 useRouter를 사용합니다.
  • 공유 래퍼, 폰트, metadata는 적절한 레이아웃 파일에 배치합니다.

피하기

  • 브라우저 요구사항이 없는데도 모든 컴포넌트에 use client를 추가하는 것.
  • Server Components에서 useRouter를 사용하는 것.
  • 라우트 metadata를 페이지 또는 레이아웃 파일 대신 관련 없는 컴포넌트에 넣는 것.

자주 묻는 질문

이 스킬은 App Router를 지원하나요?
예. Next.js 15 App Router 페이지, 레이아웃, 라우팅 및 관련 규칙에 중점을 둡니다.
이 스킬이 자체적으로 완전한 기능을 생성하나요?
아니요. 프로젝트에서 작업하는 동안 AI 어시스턴트가 적용할 수 있는 구현 지침을 제공합니다.
컴포넌트는 언제 use client를 사용해야 하나요?
컴포넌트에 상태, effects, 브라우저 API 또는 클라이언트 전용 내비게이션 동작이 필요할 때 사용합니다.
어떤 내비게이션 API를 권장하나요?
내부 내비게이션에는 Link를, Client Components의 프로그래밍 방식 내비게이션에는 useRouter를 권장합니다.
SEO metadata도 다루나요?
예. 적절한 경우 페이지 또는 레이아웃 파일에 metadata를 정의하도록 어시스턴트에게 상기시킵니다.
Claude Code와 Codex가 사용할 수 있나요?
예. 마켓플레이스 metadata에는 Claude, Codex, Claude Code 지원이 명시되어 있습니다.

개발자 세부 정보

작성자

AbdulSamad94

라이선스

MIT

Skillstore 리비전

r2

버전 안내

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

리포지토리

https://github.com/AbdulSamad94/Hackhaton-SpecsKitPlus/tree/master/.claude/skills/nextjs

참조

80999bf530a7874d7bedf8ce202001ecb4c4f5e0

유지보수 최신성

2026. 7. 25.

사용량

13 다운로드 · 250 조회

파일 구조

📄 SKILL.md

AbdulSamad94의 다른 스킬

전체 보기

관련 스킬

전체 보기