▲ Next.js 완전 가이드

// 서버 컴포넌트 (기본) — DB 직접 접근 가능
async function ProductList() {
    const products = await db.product.findMany({ take: 20 });
    return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
}

// 클라이언트 컴포넌트 — 인터랙션 필요 시
'use client';
import { useState } from 'react';
export function Counter() {
    const [n, setN] = useState(0);
    return <button onClick={() => setN(n+1)}>{n}</button>;
}

// 기본 — 무기한 캐시 (SSG처럼 동작)
const res = await fetch('https://api.example.com/products');

// ISR — N초마다 백그라운드에서 재검증
const res2 = await fetch(url, { next: { revalidate: 60 } });

// 태그 기반 재검증 — 특정 데이터만 선택적으로 무효화
const res3 = await fetch(url, { next: { tags: ['products'] } });
// 이후 서버 액션 등에서: revalidateTag('products');

// 매 요청마다 새로 페칭 (SSR)
const res4 = await fetch(url, { cache: 'no-store' });

// 라우트 전체를 동적 렌더링으로 강제
export const dynamic = 'force-dynamic';

'use server';
import { revalidatePath } from 'next/cache';
import { z } from 'zod';

const schema = z.object({ name: z.string().min(1, '이름을 입력하세요') });

export async function createUser(prevState: { error?: string }, formData: FormData) {
  const parsed = schema.safeParse({ name: formData.get('name') });
  if (!parsed.success) {
    return { error: parsed.error.issues[0].message };
  }
  await db.user.create({ data: parsed.data });
  revalidatePath('/users');
  return { error: undefined };
}

'use client';
import { useActionState } from 'react';
import { createUser } from './actions';

export function UserForm() {
  const [state, formAction, isPending] = useActionState(createUser, {});
  return (
    <form action={formAction}>
      <input name="name" />
      {state.error && <p>{state.error}</p>}
      <button disabled={isPending}>추가</button>
    </form>
  );
}

import { NextRequest, NextResponse } from 'next/server';

export async function GET(_req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const user = await db.user.findUnique({ where: { id } });
  if (!user) return NextResponse.json({ error: 'not found' }, { status: 404 });
  return NextResponse.json(user);
}

export async function DELETE(_req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  await db.user.delete({ where: { id } });
  return new NextResponse(null, { status: 204 });
}

import { NextRequest, NextResponse } from 'next/server';

export function middleware(req: NextRequest) {
  const token = req.cookies.get('session')?.value;
  if (!token) {
    return NextResponse.redirect(new URL('/login', req.url));
  }
  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*', '/settings/:path*'],
};

import type { Metadata } from 'next';

export async function generateMetadata(
  { params }: { params: Promise<{ slug: string }> }
): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: { title: post.title, images: [post.coverImage] },
  };
}

export default async function sitemap() {
  const posts = await getAllPosts();
  return posts.map((p) => ({
    url: 'https://example.com/blog/' + p.slug,
    lastModified: p.updatedAt,
  }));
}

'use client';

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <p>문제가 발생했습니다: {error.message}</p>
      <button onClick={() => reset()}>다시 시도</button>
    </div>
  );
}

import { Suspense } from 'react';

export default function Dashboard() {
  return (
    <>
      <Header />
      <Suspense fallback={<p>통계 불러오는 중...</p>}>
        <SlowStats />
      </Suspense>
    </>
  );
}

import Image from 'next/image';
import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'], display: 'swap' });

export default function Hero() {
  return (
    <main className={inter.className}>
      <Image
        src="/hero.png"
        alt="제품 소개 이미지"
        width={1200}
        height={600}
        priority // LCP 이미지에만 사용
      />
    </main>
  );
}