laguagu/claude-code-nextjs-skills

claude-code-nextjs-skills은(는) 무엇을 하나요?

Claude Code에서 AI 앱 개발을 위한 스킬 모음 — Next.js 16, AI SDK 6, pgvector, bun, Ralph Loop를 지원합니다.

포함된 기술

• Next.js 16 — 최신 서버 컴포넌트, 라우트 핸들러, 스트리밍 및 부분 프리렌더링
• AI SDK 6 — Vercel AI SDK를 활용한 LLM 통합 (스트리밍 텍스트, 도구 호출, 다중 모달)
• pgvector — PostgreSQL 기반 벡터 유사도 검색 (임베딩, ANN 인덱스)
• bun — 고속 패키지 매니저 및 런타임 (의존성 설치, 개발 서버, 테스트)
• Ralph Loop — 반복 작업 및 워크플로우 자동화

시작하기

Claude Code 내에서 이 스킬을 활성화한 후, 지원되는 기술 중 하나를 사용하여 AI 애플리케이션 구축을 시작하세요. 예:

# Next.js 16 + AI SDK 6 프로젝트 생성 예시
npx create-next-app@latest my-ai-app --typescript --tailwind --eslint

Claude Code에서 사용 방법

1. Claude Code 저장소에 이 스킬을 추가합니다.
2. .claude/skills/laguagu/ 디렉토리에 있는 SKILL.md 파일을 참조하세요.
3. Claude의 컨텍스트에 포함하려면 @AGENTS.md 명령어를 사용하세요.

주요 기능

• Next.js 16 통합: App Router, 서버 액션, 미들웨어 보일러플레이트
• AI SDK 6 훅: useChat, useAssistant, streamText, streamObject
• pgvector 설정: 마이그레이션, 쿼리 빌딩, 하이브리드 검색
• bun 최적화: 스크립트 실행, .env 로딩, 의존성 캐싱
• Ralph Loop: 작업 루프 정의, 진행률 추적, CI/CD 통합

예제

다음은 AI SDK 6 + pgvector 조합을 사용한 간단한 RAG 예제입니다:

import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';
import { querySimilarDocuments } from '@/lib/vector';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const lastMessage = messages[messages.length - 1].content;

  const docs = await querySimilarDocuments(lastMessage);
  const context = docs.map(d => d.content).join('\n');

  const result = streamText({
    model: openai('gpt-4o'),
    system: `관련 문서를 바탕으로 답변하세요:\n${context}`,
    messages,
  });

  return result.toDataStreamResponse();
}

참고

• 모든 스킬은 Claude Code 에이전트 모드와 호환됩니다.
• 자세한 내용은 각 기술의 공식 문서를 참조하세요: Next.js, AI SDK, pgvector, bun, Ralph Loop.

---

이 스킬은 계속 발전 중입니다. 제안사항이나 개선 요청은 언제든지 알려주세요.