Next.js 배워서 어디에 쓸까?

Next.js의 파일 기반 라우팅을
폴더 구조 다이어그램 + 코드 예시로 설명해줘.
Link와 a 태그 차이도 포함.

Server Component vs Client Component를
비교표 + 같은 기능을 두 방식으로 작성한 코드로 보여줘.
언제 무엇을 쓰는지 결정 트리도.

Next.js 14 + Drizzle ORM + Zod + NextAuth로
SaaS 풀스택 아키텍처를 설계해줘.
Server Actions + ISR + Edge 미들웨어 포함.

// Next.js 레벨별 데모 — 핵심 개념 한 파일

// 🟢 레벨 1: app/posts/page.tsx (Server Component 기본)
export const metadata = { title: '게시글 목록' };
export default async function PostsPage() {
  const posts: Array<{id: number; title: string}> = await fetch('https://api.shop/posts').then(r => r.json());
  return (
    <ul>
      {posts.map(p => (
        <li key={p.id}><a href={`/posts/${p.id}`}>{p.title}</a></li>
      ))}
    </ul>
  );
}

// 🟡 레벨 2: app/posts/[id]/page.tsx (동적 라우트 + ISR)
export const revalidate = 60; // 60초마다 재검증
export default async function PostDetail({ params }: { params: { id: string } }) {
  const post = await fetch(`https://api.shop/posts/${params.id}`, { next: { revalidate: 60 } }).then(r => r.json());
  return <article><h1>{post.title}</h1><p>{post.body}</p></article>;
}

// 🔵 레벨 3: app/posts/new/actions.ts (Server Action)
// 'use server'
// export async function createPost(formData: FormData) {
//   const title = formData.get('title') as string;
//   await db.insert(posts).values({ title });
//   revalidatePath('/posts');
// }

// 🟣 레벨 4: middleware.ts (인증 + 국제화)
// import { NextResponse } from 'next/server';
// export function middleware(req: NextRequest) {
//   if (!req.cookies.get('session')) {
//     return NextResponse.redirect(new URL('/login', req.url));
//   }
// }

/* 한 파일에 Next.js 4단계가 모두 들어있습니다.
   레벨 1: 파일 기반 라우팅 + Server Component
   레벨 2: 동적 라우트 + ISR
   레벨 3: Server Actions + revalidatePath
   레벨 4: Middleware로 인증·국제화 */