المهارات nextjs-best-practices
📦

nextjs-best-practices

آمن

Claude로 Next.js 모범 사례 적용하기

개발자들은 Next.js App Router 패턴을 따라가기 어려워하고 종종 오래된 접근 방식을 사용합니다. 이 스킬은 서버 컴포넌트, 데이터 가져오기, 라우팅 및 성능 최적화를 위한 포괄적인 모범 사례를 제공합니다.

يدعم: Claude Codex Code(CC)
🥉 73 برونزي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "nextjs-best-practices". 이 컴포넌트를 서버 컴포넌트로 만들어야 할까요, 클라이언트 컴포넌트로 만들어야 할까요? 사용자 프로필 데이터를 표시하고 테마를 전환하는 버튼이 있습니다.

النتيجة المتوقعة:

컴포넌트를 분리하세요: 사용자 프로필 데이터를 가져와서 표시하는 서버 컴포넌트를 만든 다음, 해당 데이터를 대화형 테마 전환 버튼을 위한 클라이언트 컴포넌트에 전달하세요. 이렇게 하면 데이터 가져오기가 서버에서 수행되어 효율적이며, 대화형 요소는 클라이언트에 유지됩니다.

استخدام "nextjs-best-practices". 매시간 변경되는 API 응답을 어떻게 캐시해야 하나요?

النتيجة المتوقعة:

revalidate: 3600(초)와 함께 ISR(증분 정적 재생성)을 사용하세요. 이렇게 하면 응답이 한 시간 동안 캐시된 후, 만료 후 다음 요청에서 다시 생성됩니다. 온디맨드 업데이트의 경우 데이터 소스가 업데이트될 때 revalidatePath 또는 revalidateTag를 사용하세요.

التدقيق الأمني

آمن
v1 • 2/16/2026

Security evaluation complete. All static findings are false positives. The skill contains only markdown documentation about Next.js best practices. Code examples (e.g., page.tsx, revalidate: 60) are displayed in markdown code fences, not executed as shell commands. No cryptographic algorithms, network calls, or file operations are present. This is a safe reference guide for Next.js development.

1
الملفات التي تم فحصها
204
الأسطر التي تم تحليلها
0
النتائج
1
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية

الأنماط المكتشفة

False Positive: Markdown Code ExamplesFalse Positive: Weak Cryptographic Algorithm
تم تدقيقه بواسطة: claude

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
50
المجتمع
100
الأمان
83
الامتثال للمواصفات

ماذا يمكنك بناءه

새로운 Next.js 프로젝트 설정

새로운 Next.js 프로젝트를 시작하는 개발자가 처음부터 모범 사례를 따르고자 합니다. 스킬을 사용하여 올바른 컴포넌트 아키텍처를 이해합니다.

레거시 코드 리팩터링

Pages Router에서 App Router로 마이그레이션하는 팀이 클라이언트 사이드 페치를 서버 컴포넌트로 변환하는 방법에 대한 안내가 필요합니다.

성능 검토

기존 Next.js 애플리케이션을 감사하는 개발자가 스킬을 사용하여 안티패턴과 최적화 기회를 식별합니다.

جرّب هذه الموجهات

컴포넌트 결정 가이드 
[컴포넌트 설명]이 [기능 설명]하는 경우 서버 컴포넌트를 사용해야 할까요, 클라이언트 컴포넌트를 사용해야 할까요? 트레이드오프를 설명해 주세요.
데이터 가져오기 패턴 
Next.js에서 [데이터 소스]에서 [데이터 유형]을 가져오는 가장 좋은 방법은 무엇인가요? [신선도 요구 사항]이 필요합니다.
라우트 구조 
성능 최적화 
 
[내용 설명]이 포함된 내 Next.js 페이지가 느리게 로드됩니다. 모범 사례에서 어떤 최적화 기술을 적용해야 하나요?
 
 
أفضل الممارسات
 
  •  기본적으로 서버 컴포넌트로 시작하세요 - useState, useEffect 또는 이벤트 핸들러와 같은 대화형 기능이 필요할 때만 'use client'를 추가하세요
  •  서버 사이드 캐싱을 활용하고 클라이언트 번들 크기를 줄이기 위해 서버 컴포넌트에서 데이터를 가져오세요
  •  로딩 중 사용자 경험과 정상적인 오류 처리를 제공하려면 loading.tsx 및 error.tsx 파일을 사용하세요
 
 
تجنب
 
  •  모든 컴포넌트에 'use client'를 추가하는 것은 서버 컴포넌트의 성능 이점을 무효화하고 번들 크기를 증가시킵니다
  •  useEffect를 사용하여 클라이언트 컴포넌트에서 데이터를 가져오는 것은 불필요한 클라이언트 사이드 요청과 로딩 상태를 생성합니다
  •  loading.tsx와 error.tsx를 건너뛰면 사용자가 빈 화면이나 원시 오류 메시지 대신 적절한用户体验를 보게 됩니다
 
 
الأسئلة المتكررة
 
Next.js App Router의 기본 컴포넌트 유형은 무엇인가요?  
서버 컴포넌트가 기본값입니다. 어떤 지시어도 필요하지 않습니다 - 컴포넌트는 기본적으로 서버 사이드입니다. 클라이언트 사이드 기능이 필요할 때만 'use client'를 추가하세요.
클라이언트 컴포넌트를 언제 사용해야 하나요?  
React 훅(useState, useEffect), 이벤트 핸들러(onClick, onChange), 브라우저 API 또는 클라이언트 사이드 렌더링에 의존하는 서드파티 라이브러리가 필요할 때 클라이언트 컴포넌트를 사용하세요.
Next.js에서 데이터 캐싱은 어떻게 작동하나요?  
fetch 요청은 기본적으로 캐시됩니다. 모든 요청에서 변경되는 동적 데이터에는 'no-store'를 사용하세요. 시간 기반 ISR에는 'revalidate'를 사용하세요. 온디맨드 캐시 무효화에는 revalidatePath 또는 revalidateTag를 사용하세요.
Next.js의 라우트 그룹이란 무엇인가요?  
라우트 그룹은 (폴더명) 구문을 사용하여 URL에 영향을 주지 않고 라우트를 구성합니다. 라우트 섹션에 다른 레이아웃을 적용하면서 깔끔한 URL 구조를 유지할 수 있습니다.
Next.js App Router에서 오류는 어떻게 처리하나요?  
오류를 잡고 복구 UI를 표시하려면 error.tsx(API 라우트의 경우 error.ts)를 만드세요. 404 페이지에는 not-found.tsx를 사용하세요. 두 파일 모두 자동으로 오류 경계로 래핑됩니다.
서버 액션을 클라이언트 컴포넌트와 함께 사용할 수 있나요?  
네. 'use server'가 포함된 파일에서 서버 액션을 정의한 다음 클라이언트 컴포넌트에서 가져와서 호출하세요. 액션은 서버에서 실행되는 동안 컴포넌트는 대화형을 유지합니다.
 
 
تفاصيل المطور
 
المؤلف
 sickn33
 
الترخيص
 
MIT
 
المستودع
 https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/nextjs-best-practices/
 
مرجع
 
main
 
بنية الملفات
 
📄 SKILL.md