페이지 생성

이제 App Router의 기본 구조를 이해했으니, 실제로 페이지를 생성하고 브라우저에서 확인하는 실습을 진행해 볼 시간입니다.

이 절에서는 새 폴더와 page.tsx가 URL을 만드는 규칙, 중첩 라우트(Nested Routes), 그리고 <Link> 이동을 단계별로 안내합니다.

앞 장에서 선택한 src/app 구조와 Root Layout을 사용합니다. 앞 절의 API용 dashboard/page.tsx를 이미 작성했다면 이 절의 DashboardHomePage 코드로 해당 파일을 교체합니다. 같은 파일에 두 default export를 함께 붙이지 않습니다. 아래 첫 세 페이지는 별도 Mock API 없이 확인할 수 있습니다.

첫 번째 새 페이지 만들기: about 페이지

가장 기본적인 형태의 페이지인 About 페이지를 만들어 보겠습니다.

export default function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
      <p>
        이 페이지는 '나 혼자 Next.js' 교재의 예시 프로젝트입니다.
      </p>
      <p>Next.js 16와 함께 웹 개발을 학습하고 있습니다.</p>
    </div>
  );
}

중첩 라우트(Nested Routes) 만들기

이제 좀 더 복잡한 페이지 구조를 만들어 보겠습니다.

예를 들어, 대시보드(Dashboard) 안에 설정(Settings) 페이지가 있는 형태입니다.

export default function DashboardHomePage() {
  return (
    <div>
      <h1>Welcome to Dashboard!</h1>
      <p>여기는 대시보드의 홈 페이지입니다.</p>
    </div>
  );
}

export default function DashboardSettingsPage() {
  return (
    <div>
      <h2>Dashboard Settings</h2>
      <p>대시보드 설정을 관리하는 페이지입니다.</p>
    </div>
  );
}

페이지 간 이동: <Link> 컴포넌트 사용하기

웹 애플리케이션에서는 페이지 간에 이동하는 기능이 필수적입니다.

Next.js는 페이지 간의 클라이언트 사이드 탐색을 위해 <Link> 컴포넌트를 제공합니다.

이는 일반적인 HTML의 <a> 태그보다 여러 이점을 제공합니다.

• 클라이언트 사이드 탐색: <Link>는 페이지 전체를 새로 고치지 않고, JavaScript를 사용하여 페이지 간의 부드러운 전환을 제공합니다.
• 사전 로딩 (Preloading): production에서는 뷰포트에 들어온 <Link>의 대상을 정책에 따라 미리 가져올 수 있습니다. 자동 프리페치는 개발 서버에서 실행되지 않으므로, 이 절의 npm run dev 실습은 클릭 이동과 URL 대응을 확인합니다.

이제 src/app/page.tsx (루트 페이지)에 다른 페이지로 이동하는 링크를 추가해 보겠습니다.

import Link from 'next/link'; // Link 컴포넌트 임포트

export default function HomePage() {
  return (
    <div>
      <h1>Welcome to '나 혼자 Next.js'!</h1>
      <p>Next.js 16 App Router와 함께 웹 개발을 시작합니다.</p>

      <nav style={{ marginTop: '20px' }}>
        <ul>
          <li>
            <Link href="/about">
              About 페이지로 이동
            </Link>
          </li>
          <li>
            <Link href="/dashboard">
              Dashboard 홈으로 이동
            </Link>
          </li>
          <li>
            <Link href="/dashboard/settings">
              Dashboard 설정 페이지로 이동
            </Link>
          </li>
        </ul>
      </nav>
    </div>
  );
}

동적 라우트 개념 잡기 (예고편)

지금까지는 정적인 경로를 가진 페이지만 만들었습니다.

하지만 게시물 상세 페이지(/posts/1), 사용자 프로필 페이지(/users/john-doe)와 같이 URL의 일부가 동적으로 변하는 페이지는 어떻게 만들까요?

Next.js App Router는 대괄호([])를 사용해 동적 라우트 세그먼트를 정의합니다.

예를 들어 src/app/blog/[slug]/page.tsx 파일을 만들면 /blog/my-first-post, /blog/nextjs-basics 같은 경로를 처리할 수 있습니다.

[slug] 값은 페이지 컴포넌트의 params prop으로 전달됩니다. Next.js 16의 params는 Promise이므로 서버 컴포넌트에서는 await로 값을 읽습니다.

동적 라우트의 매개변수를 읽는 코드는 뒤의 라우팅 장에서 자세히 다룹니다.

예시

src/app/dashboard/settings/page.tsx를 /dashboard/settings와 연결해 봅니다. src/app은 앱의 기준 디렉터리여서 URL에 들어가지 않습니다. 일반 폴더 dashboard, settings가 두 경로 부분을 만들고, 마지막 page.tsx가 해당 위치의 페이지 UI를 제공합니다. 부모의 dashboard/page.tsx는 /dashboard용 페이지이며 settings 페이지를 포함하는 역할은 아닙니다. 부모 페이지 파일이 없어도 settings의 페이지 파일과 필요한 Root Layout이 있으면 /dashboard/settings는 독립적으로 존재할 수 있습니다.