AI 프롬프트로 Next.js 200% 활용하기

1. 역할 / 2. 맥락 / 3. 지시 / 4. 형식

Next.js App Router의 폴더 구조를 트리 다이어그램으로 보여줘.
동적 라우트([slug]) / 그룹 ((auth)) / 병렬 (@modal) /
인터셉트 ((..)photo)의 차이를 표 + 예시로.

layout.tsx의 중첩 동작을 페이지 전환 시 시각화해줘.
루트 레이아웃 / 그룹 레이아웃 / 동적 [id] 레이아웃 /
template.tsx와의 차이까지.

Next.js Link / Image / Script 컴포넌트가
일반 a / img / script와 어떻게 다른지 표로 정리해줘.
prefetch / lazy / priority / strategy 옵션 활용도.

Next.js 14 metadata API로 동적 SEO를 구현해줘.
generateMetadata 함수 / Open Graph / Twitter Card /
structured data(JSON-LD) / sitemap.ts / robots.ts.

Server vs Client Component를 비교해줘.
각 행: 실행 위치 / 번들 포함 여부 / Hook 사용 / 직접 DB 접근 /
언제 무엇을 쓰는지 결정 트리 + 잘못된 사용 5가지.

Next.js fetch 캐시 동작을 정리해줘.
기본 캐시 / no-store / revalidate=N / tags+revalidateTag /
각 옵션의 동작 + 언제 무엇을 쓰는지 결정 트리.

app/api/.../route.ts로 REST API를 만들어줘.
GET/POST/PUT/DELETE 핸들러 / NextRequest 활용 /
Zod 입력 검증 / 적절한 status 코드 / 에러 응답 일관성.

middleware.ts로 인증 + 국제화 + A/B 테스트를 구현해줘.
NextResponse.redirect / cookies / matcher 설정 /
Edge runtime 호환 / 응답 헤더 추가.

ISR + 온디맨드 재검증 패턴을 설계해줘.
revalidate 옵션 / revalidatePath / revalidateTag /
Stripe webhook으로 결제 후 캐시 무효화 코드 +
CDN 동작 + 트래픽 폭주 시 fallback.

React Server Components의 streaming + Suspense를
같은 페이지를 두 방식(streaming X / streaming O)으로 작성해서 비교해줘.
LCP / FCP 차이 + loading.tsx / Suspense 경계 설계 원칙.

Next.js 성능 병목 5가지를 진단·해결하는 패턴을 정리해줘.
큰 번들(@next/bundle-analyzer) / 이미지 / 폰트 /
캐시 누락 / 클라이언트 코드 폭증.
각각 코드 예시 + Web Vitals 측정.

// ❌ 나쁜 프롬프트: 'Next.js로 데이터 가져와줘'
// app/posts/page.tsx
export default async function Posts() {
  const r = await fetch('/api/posts');
  return <ul>{(await r.json()).map((p: any) => <li>{p.title}</li>)}</ul>;
}
// 문제: any, key 누락, 캐시 옵션 명시 안 됨, 에러 무시


// ✅ 좋은 프롬프트: 캐시 명시 + 타입 + 에러 처리
import { z } from 'zod';

const PostSchema = z.object({ id: z.number(), title: z.string() });
const PostsSchema = z.array(PostSchema);
type Post = z.infer<typeof PostSchema>;

async function getPosts(): Promise<Post[]> {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60, tags: ['posts'] }, // ISR + on-demand
  });
  if (!res.ok) throw new Error(`Failed to fetch posts: ${res.status}`);
  return PostsSchema.parse(await res.json());
}

export default async function PostsPage() {
  const posts = await getPosts();
  return (
    <ul>
      {posts.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

// app/api/revalidate/route.ts — 온디맨드 재검증
// import { revalidateTag } from 'next/cache';
// export async function POST(req: Request) {
//   revalidateTag('posts');
//   return Response.json({ ok: true });
// }

/*
  📊 비교:
  | 항목         | ❌ 나쁜 | ✅ 좋은 |
  | 타입         | any    | Zod 검증된 Post |
  | 캐시 전략     | 모호함 | revalidate + tags |
  | 에러 처리     | 무시   | throw + error.tsx |
  | key prop      | 누락   | id 사용 |
  → 프롬프트의 구체성이 코드 품질을 결정합니다!
*/