01 · Concept

Next.js 심화

App Router의 파일 컨벤션, 렌더링 전략 선택 기준, Server Actions까지 Next.js 핵심 개념을 심화 학습합니다.

Next.js App Router는 layout.tsx, page.tsx, loading.tsx, error.tsx 파일 컨벤션으로 UI 계층을 구성합니다. 페이지마다 SSG / ISR / SSR 전략을 독립적으로 선택할 수 있으며, revalidateTag로 On-Demand ISR을 트리거합니다. Server Actions는 별도 API 라우트 없이 서버 함수를 클라이언트에서 직접 호출하는 패턴으로, 폼 처리와 뮤테이션에 활용됩니다.

02 · Interactive Demo

Next.js App Router 핵심 패턴

파일 컨벤션 트리, 렌더링 전략 비교, Server Action 흐름을 인터랙티브하게 확인하세요.

App Router 파일 트리
03 · Code Example

코드 예시

실제 코드로 동작 원리를 확인하세요.

// app/api/properties/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const city = searchParams.get('city');
  const data = await fetchProperties({ city });
  return NextResponse.json(data);
}

export async function POST(request: NextRequest) {
  const body = await request.json();
  const created = await createProperty(body);
  return NextResponse.json(created, { status: 201 });
}
04 · Interview Point

면접 핵심 질문

App Router는 React Server Components를 기본으로 사용하여 컴포넌트 단위로 서버/클라이언트를 분리합니다. 파일 컨벤션(layout.tsx, loading.tsx, error.tsx)으로 UI 계층을 구성하며, Server Actions와 Streaming을 지원합니다.

Pages Router는 getServerSideProps, getStaticProps로 데이터를 fetching하며, 모든 컴포넌트가 기본적으로 클라이언트 컴포넌트입니다. 더 단순하고 예측 가능하지만 번들 크기 최적화가 어렵습니다.
revalidatePath('/properties')는 특정 경로의 캐시를 무효화합니다. 해당 경로와 하위 경로의 캐시가 초기화됩니다.

revalidateTag('properties-list')는 특정 태그로 묶인 모든 fetch 캐시를 무효화합니다. 태그는 fetch(url, { next: { tags: ['properties-list'] } })로 부여합니다. 여러 경로에 걸쳐 있는 데이터(예: 사이드바 매물 수)를 한 번에 무효화할 때 유용합니다.
Server Actions는 폼 제출, 뮤테이션 등 클라이언트가 서버 함수를 직접 호출할 때 사용합니다. 별도 API 엔드포인트 없이 revalidatePath, redirect와 함께 사용하면 폼 처리 흐름이 단순해집니다. 서버 컴포넌트의 action prop에 직접 전달할 수 있습니다.

Route Handler는 외부 클라이언트(모바일 앱, 타사 서비스)가 호출하는 REST API나 Webhook 처리에 적합합니다. HTTP 메서드를 명시적으로 export하고 표준 Request/Response를 다룹니다.
Middleware는 요청이 라우트에 도달하기 전에 Edge Runtime에서 실행됩니다. Node.js API는 사용할 수 없고 Web API만 사용 가능합니다.

적합한 사용 사례: 인증 토큰 검사 후 리다이렉트, 로케일(i18n) 감지 및 라우팅, A/B 테스트를 위한 쿠키 설정, 봇 차단.

부적합한 사용 사례: DB 직접 조작(Node.js API 필요), 무거운 연산(Edge 런타임 제약), 복잡한 비즈니스 로직(Route Handler 또는 Server Actions 사용).