Next.js 개발을 위한 효과적인 프롬프트 패턴을 알아봅니다.
Next.js 프롬프트 구조
App Router
페이지 구조
Next.js App Router로 대시보드 페이지를 만들어줘.
파일 구조:
app/
dashboard/
page.tsx
layout.tsx
loading.tsx
error.tsx
요구사항:
- 서버 컴포넌트 활용
- 인증 체크 (layout에서)
- 로딩 UI
- 에러 바운더리
- Metadata 설정
동적 라우트
Next.js 동적 라우트를 구현해줘.
라우트: /products/[id]
파일:
- app/products/[id]/page.tsx
- app/products/[id]/loading.tsx
기능:
- generateStaticParams로 정적 생성
- generateMetadata로 동적 메타데이터
- 404 처리 (notFound)
- ISR 설정 (revalidate)
병렬 라우트
병렬 라우트로 대시보드를 구현해줘.
구조:
app/dashboard/
layout.tsx
@analytics/page.tsx
@team/page.tsx
@notifications/page.tsx
요구사항:
- 독립적인 로딩 상태
- 개별 에러 처리
- 조건부 렌더링
- Slot으로 레이아웃 구성
서버 컴포넌트
데이터 페칭
서버 컴포넌트에서 데이터를 페칭해줘.
컴포넌트: ProductList
요구사항:
- async 서버 컴포넌트
- fetch로 API 호출
- 캐싱 전략 설정
- Suspense 경계
- 에러 처리
패턴:
- 컴포넌트 레벨 데이터 페칭
- 병렬 데이터 로딩
서버 액션
Server Actions를 구현해줘.
기능: 게시물 CRUD
액션:
- createPost(formData: FormData)
- updatePost(id: string, formData: FormData)
- deletePost(id: string)
요구사항:
- 'use server' 지시문
- Zod 유효성 검사
- revalidatePath
- 에러 핸들링
- 폼과 연동
서버/클라이언트 분리
서버와 클라이언트 컴포넌트를 적절히 분리해줘.
페이지: 상품 상세 페이지
서버 컴포넌트:
- ProductInfo (상품 정보)
- ProductReviews (리뷰 목록)
클라이언트 컴포넌트:
- AddToCartButton (장바구니 추가)
- ImageGallery (이미지 슬라이더)
- QuantitySelector (수량 선택)
'use client' 최소화 전략
Route Handlers
API 엔드포인트
Next.js Route Handler로 API를 만들어줘.
파일: app/api/posts/route.ts
엔드포인트:
- GET: 목록 조회 (페이지네이션)
- POST: 새 게시물 생성
요구사항:
- NextRequest 타입
- NextResponse.json()
- 에러 응답 처리
- 쿼리 파라미터 파싱
- 인증 체크
동적 API
동적 Route Handler를 만들어줘.
파일: app/api/posts/[id]/route.ts
엔드포인트:
- GET: 단일 조회
- PUT: 수정
- DELETE: 삭제
요구사항:
- params에서 id 추출
- 404 처리
- 권한 검증
- 응답 타입 통일
Middleware
인증 미들웨어
Next.js Middleware로 인증을 구현해줘.
파일: middleware.ts
기능:
- 보호된 경로 정의 (matcher)
- JWT 토큰 검증
- 리다이렉트 처리
- 공개 경로 허용
경로:
- /dashboard/* - 인증 필요
- /admin/* - 관리자만
- /auth/* - 공개
국제화 미들웨어
i18n Middleware를 구현해줘.
지원 언어: ko, en, ja
기본 언어: ko
기능:
- Accept-Language 헤더 감지
- 쿠키에서 언어 설정 읽기
- URL 기반 라우팅 (/en/about)
- 리다이렉트 처리
Metadata
SEO 설정
Next.js Metadata API로 SEO를 설정해줘.
페이지: 블로그 게시물
정적 메타데이터:
- 사이트 기본 정보 (layout.tsx)
동적 메타데이터:
- generateMetadata로 게시물별 설정
- Open Graph
- Twitter Card
- JSON-LD (구조화 데이터)
요구사항:
- 타이틀 템플릿
- 기본 이미지 폴백
- canonical URL
최적화
이미지 최적화
Next.js Image 컴포넌트 사용법을 알려줘.
시나리오:
1. 외부 이미지 (CDN)
2. 로컬 이미지
3. 반응형 이미지
4. 블러 플레이스홀더
요구사항:
- next.config.js 설정
- sizes 속성 최적화
- priority 설정
- fill 속성 사용
폰트 최적화
Next.js Font 최적화를 설정해줘.
요구사항:
- Google Fonts (Pretendard)
- 로컬 폰트 추가
- CSS 변수로 적용
- subset 최적화
- display: swap
실전 프롬프트
인증 시스템
Next.js로 완전한 인증 시스템을 구현해줘.
기능:
- 이메일/비밀번호 로그인
- 소셜 로그인 (Google)
- 세션 관리
- 보호된 라우트
구조:
- app/auth/login/page.tsx
- app/auth/register/page.tsx
- app/api/auth/[...nextauth]/route.ts
- middleware.ts
NextAuth.js 사용
블로그 플랫폼
Next.js로 블로그 플랫폼을 만들어줘.
기능:
- MDX 게시물
- 카테고리/태그
- 검색
- RSS 피드
- 사이트맵
App Router 사용:
- 정적 생성 (게시물)
- ISR (인기 게시물)
- 서버 컴포넌트 (목록)
- 클라이언트 컴포넌트 (검색)
팁
| 팁 | 설명 |
|---|---|
| App Router 명시 | Pages vs App |
| 컴포넌트 구분 | 서버/클라이언트 명확히 |
| 캐싱 전략 | revalidate 설정 |
| 파일 구조 | 경로와 파일명 |
| 버전 명시 | Next.js 14+ 등 |
Next.js의 최신 패턴을 활용하세요.