Next.js 16 정리 - React 18 시대의 풀스택 프레임워크

Next.js 16은 React 18을 기반으로 하는 풀스택 웹 프레임워크로, 서버 컴포넌트(App Router), 스트리밍, 캐시, 미들웨어 등 프론트엔드와 백엔드를 모두 아우를 수 있는 기능을 제공합니다.
이 글에서는 Next.js 16에서 핵심적으로 알아야 할 개념과, 실무에서 자주 쓰게 될 부분 위주로 간략히 정리합니다.

---

1. 프로젝트 구조와 App Router

• app 디렉토리를 사용하는 App Router가 기본
• 파일/폴더 구조가 곧 라우팅 구조

app/
  layout.tsx      # 루트 레이아웃
  page.tsx        # '/'
  blog/
    page.tsx      # '/blog'
    [id]/
      page.tsx    # '/blog/:id'

• page.tsx : 실제 페이지 컴포넌트
• layout.tsx : 상위/하위 경로에 공통으로 적용되는 레이아웃
• loading.tsx, error.tsx, not-found.tsx 등 상태 별 화면을 파일 단위로 관리

---

2. 서버 컴포넌트 & 클라이언트 컴포넌트

• 기본은 서버 컴포넌트
  • 데이터 패칭, SEO, 초기 렌더링에 최적화
• 브라우저 API, 상태 관리, 이벤트 등이 필요한 경우에만 클라이언트 컴포넌트

// 클라이언트 컴포넌트 예시
"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount((c) => c + 1)}>{count}</button>;
}

서버 컴포넌트는 기본적으로 React 18의 스트리밍 렌더링을 활용하여, 무거운 페이지도 점진적으로 그려줄 수 있습니다.

---

3. React 18 기반 데이터 패칭

Next.js 16에서는 getServerSideProps / getStaticProps 없이도 서버 컴포넌트 안에서 바로 데이터 패칭이 가능합니다.