4장: Next.js의 페이지와 라우팅

파일 시스템 기반 라우팅 이해하기

Next.js 15에서 라우팅의 핵심은 바로 파일과 폴더 구조만으로 URL 경로를 정의한다는 데 있습니다. 복잡한 라우팅 설정을 손으로 구성할 필요 없이, app 디렉터리 내부에 폴더와 파일을 만들기만 하면 그 경로가 곧바로 URL로 매핑됩니다. 예를 들어, app/about/page.tsx 파일을 만들면 /about 경로에서 이 페이지가 그대로 출력됩니다. 특별한 코드 없이도 직관적으로 라우팅이 이루어지는 셈입니다.

페이지 생성 방법

Next.js에서 하나의 페이지는 React 컴포넌트를 기본으로 export하는 파일입니다. 예를 들어, 홈 경로(즉, /)에 해당하는 내용을 작성하고 싶다면 app/page.tsx 파일을 만들고 그 안에 아래와 같이 React 컴포넌트를 작성합니다.

// app/page.tsx
export default function Home() {
  return <h1>홈페이지에 오신 것을 환영합니다!</h1>;
}

이처럼 각 경로에 맞는 폴더와 그 안의 page.tsx만 있으면 간단히 새로운 페이지가 만들어집니다.

동적 라우팅과 중첩 라우팅

실제 웹 서비스에서는 사용자 이름이나 글 번호와 같이 값이 유동적인 경로가 필요합니다. Next.js에서는 폴더 이름에 대괄호([ ])를 붙여 동적 라우트를 쉽게 만들 수 있습니다. 예를 들어, app/users/[userid]/page.tsx 파일은 /users/kim, /users/lee 등 다양한 사용자 경로에서 작동합니다.

또한 폴더를 계층적으로 쌓으면, 여러 경로가 중첩된 구조도 자연스럽게 표현할 수 있습니다. 이처럼 중첩과 동적 라우팅이 기본 구조만으로 해결되기 때문에, 별도의 라우터 라이브러리를 고민할 필요가 없습니다.

페이지 간 이동하기

Next.js는 내장된 Link 컴포넌트를 통해 SPA 방식으로 페이지 간 빠르고 자연스러운 이동을 지원합니다. next/link에서 불러와 사용하면 됩니다.

import Link from 'next/link';

export default function Navigation() {
  return (
    <nav>
      <Link href="/about">소개</Link>
      <Link href="/products">제품</Link>
    </nav>
  );
}

클릭 시 페이지 전체가 새로고침되지 않고, 부드럽게 목적지 페이지로 이동하는 모습을 확인할 수 있습니다.

Next.js 15에서의 추가 기능

최신 버전에서는 비동기 라우트 처리, 구간별 로딩(Loading UI), 라우팅 에러 핸들링 등도 강화되었습니다. 각 폴더에 loading.tsx 혹은 error.tsx 파일을 추가하면, 네트워크 지연이나 오류가 발생할 때 사용자에게 적절한 안내 화면을 보여줄 수 있습니다. 또한, 서버 컴포넌트와 클라이언트 컴포넌트를 자유롭게 사용할 수 있어 유지보수와 최적화에도 큰 도움을 줍니다.

정리하며

Next.js의 페이지 및 라우팅 시스템은 초보자도 쉽게 이해할 수 있도록 설계되었습니다. 단순히 폴더와 파일을 구성하는 것만으로 원하는 경로와 페이지를 구현할 수 있고, 복잡해지는 웹 서비스 구조도 직관적으로 관리할 수 있습니다. 앞으로의 장에서 여러 응용 예시를 하나씩 살펴보며, 실제 프로젝트에 적용하는 방법을 자세히 익히게 될 것입니다.