Error

먼저 api 호출 시 발생할 수 있는 에러에 대해 정의해야 한다.
가장 일반적인 에러는 인증 에러가 있을 것이다.

위치	400 처리(입력 검증 실패 등)	500 처리(예상 못한 예외)	UI 표시
Route Handler `app/api/**/route.ts`	`NextResponse.json(..., { status: 400/422 })`	`NextResponse.json(..., { status: 500 })` (또는 throw 후 catch)	JSON(또는 파일/스트림)
Page/Server Component `app/**/page.tsx`	페이지 상태로 “잘못된 요청” 안내(상태코드 직접 지정 어려움)	예외를 throw → 해당 세그먼트의 `error.tsx`로 이동(응답 500)	`error.tsx`
Server Action `"use server"`	값 반환으로 폼 내부에 에러 표시(상태코드 제어 X)	throw 하면 500 + `error.tsx`	폼 에러 메시지 or `error.tsx`
404 (특수)	`notFound()` 호출	—	`not-found.tsx` (응답 404)
Middleware `middleware.ts`	간단한 규칙 차단 시 `new NextResponse("...", { status: 400 })`	—	텍스트/리다이렉트

App Router에선 페이지 응답의 임의 상태코드(예: 400)를 직접 세팅하기 어려움.
“사용자 잘못” 류는 API(Route Handler)에서 400/422로 내고, 페이지는 친절한 메시지/가이드로 처리하는 게 표준 패턴.

Route Handler: 400/500

// app/api/users/route.ts
import { NextResponse } from "next/server";

export async function POST(req: Request) {
  try {
    const body = await req.json();

    // 입력 검증 실패 → 400 또는 422
    if (!body.email) {
      return NextResponse.json(
        { error: "email is required" },
        { status: 400 } // 422도 자주 사용
      );
    }

    // ...비즈니스 로직...
    return NextResponse.json({ ok: true }, { status: 201 });
  } catch (err) {
    console.error("POST /api/users error:", err);
    return NextResponse.json(
      { error: "Internal Server Error" },
      { status: 500 }
    );
  }
}

클라이언트(또는 Server Component)에서 이 JSON을 해석해 필드별 에러 표시로 매핑.

Page/Server Component: 404, 500 처리