Next.js App Router 시작하기

Next.js는 React로 풀스택 앱을 만드는 프레임워크입니다. 최신 App Router 는 폴더 구조로 라우팅을 정의하고, 컴포넌트를 기본적으로 서버에서 실행합니다. 이 한 강좌만 따라와도 라우팅, 데이터 패칭, 배포까지 한 바퀴를 돌게 됩니다.

학습 목표

• create-next-app 으로 프로젝트를 만들고 개발 서버를 실행한다.
• app/ 폴더 구조가 어떻게 URL로 이어지는지 이해한다.
• page.tsx 의 역할과 작성법을 익힌다.
• 서버 컴포넌트와 클라이언트 컴포넌트의 차이를 맛본다.

프로젝트 생성

npx create-next-app@latest my-app
cd my-app
npm run dev

설치 중 몇 가지를 물어봅니다. TypeScript, App Router, ESLint는 모두 Yes 로 두면 이 강좌와 똑같은 환경이 됩니다. 실행 후 브라우저에서 http://localhost:3000 을 열어 보세요.

✓ TypeScript        → Yes
✓ ESLint            → Yes
✓ Tailwind CSS      → 취향대로
✓ App Router        → Yes  (가장 중요)

파일 기반 라우팅

app/ 폴더의 page.tsx 가 페이지가 됩니다. 폴더 이름이 곧 URL 경로입니다.

app/
├── page.tsx              →  /
├── about/page.tsx        →  /about
├── layout.tsx            →  공통 레이아웃
└── blog/
    └── [slug]/page.tsx   →  /blog/hello   (동적 라우트)

page.tsx 는 기본 내보내기(default export)로 React 컴포넌트를 반환하면 됩니다.

// app/about/page.tsx
export default function AboutPage() {
  return <h1>소개 페이지</h1>;
}

서버 컴포넌트 (기본값)

App Router의 컴포넌트는 기본적으로 서버에서 실행됩니다. DB나 파일을 직접 읽을 수 있고, 비밀 키를 클라이언트로 보내지 않아 안전합니다. 함수를 async 로 선언하고 await 하면 끝입니다.

// app/posts/page.tsx — 서버 컴포넌트
async function PostsPage() {
  const posts = await getPosts(); // 서버에서 직접 호출
  return (
    <ul>
      {posts.map((p) => (
        <li key={p.id}>{p.title}</li>
      ))}
    </ul>
  );
}

export default PostsPage;

💡 TIP — 서버 컴포넌트는 브라우저로 JavaScript 번들을 보내지 않습니다. 그만큼 페이지가 가벼워집니다.

클라이언트 컴포넌트

상태나 이벤트(onClick 등), 브라우저 API가 필요하면 파일 맨 위에 'use client' 지시어를 추가합니다.

'use client';
import { useState } from 'react';

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

⚠️ 주의 — useState, useEffect, onClick 같은 것을 서버 컴포넌트에서 쓰면 에러가 납니다. 상호작용이 필요한 부분만 'use client' 로 떼어 내세요.

이 강좌 사이트 자체가 Next.js App Router로 만들어졌고, 마크다운을 서버 컴포넌트에서 직접 읽어 렌더링합니다. 목차의 글 내용은 서버에서, 사이드바의 펼침/접힘 같은 상호작용은 클라이언트 컴포넌트에서 처리하는 식입니다.

요약

• Next.js App Router는 app/ 폴더 구조로 라우팅을 정의한다.
• page.tsx 가 하나의 페이지가 되고, 폴더 이름이 URL이 된다.
• 컴포넌트는 기본이 서버 컴포넌트이며 async/await 로 데이터를 직접 읽는다.
• 상호작용이 필요하면 'use client' 로 클라이언트 컴포넌트를 만든다.

연습문제

1. create-next-app 으로 새 프로젝트를 만들고 /hello 경로에 "안녕하세요"를 출력하는 페이지를 추가해 보세요.
2. 서버 컴포넌트와 클라이언트 컴포넌트의 차이를 두 문장으로 설명해 보세요.
3. 버튼을 누르면 숫자가 1씩 증가하는 Counter 를 만들고, 왜 'use client' 가 필요한지 적어 보세요.

힌트 — 폴더 app/hello/ 를 만들고 그 안에 page.tsx 를 두면 /hello 가 됩니다. 상태(useState)를 쓰는 순간 클라이언트 컴포넌트가 필요합니다.