안동민 개발노트

이제 App Router의 기본 구조를 이해했으니, 실제로 페이지를 생성하고 브라우저에서 확인하는 실습을 진행해 볼 시간입니다. 이 절에서는 새로운 페이지를 만드는 방법, 그리고 중첩 라우트(Nested Routes)를 구성하여 더 복잡한 페이지 계층 구조를 만드는 방법을 단계별로 안내해 드리겠습니다.

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

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

src/app 디렉터리로 이동: 프로젝트의 루트 디렉터리에 있는 src/app 폴더로 이동합니다. 이곳이 모든 라우트와 페이지가 시작되는 지점입니다.

새로운 폴더 생성: src/app 디렉터리 안에 about이라는 이름의 새로운 폴더를 생성합니다.

my-next-app/
└── src/
    └── app/
        ├── about/  <- 여기에 새 폴더 생성
        ├── layout.tsx
        └── page.tsx

page.tsx 파일 생성: 방금 생성한 about 폴더 안에 page.tsx라는 이름의 파일을 생성합니다.

my-next-app/
└── src/
    └── app/
        ├── about/
        │   └── page.tsx  <- 여기에 새 파일 생성
        ├── layout.tsx
        └── page.tsx

page.tsx 파일 내용 작성: src/app/about/page.tsx 파일을 열고 다음 코드를 작성합니다.

// src/app/about/page.tsx

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

이 파일은 기본적인 React 컴포넌트이며, 특별한 지시어가 없으므로 기본적으로 서버 컴포넌트로 동작합니다.

개발 서버 확인: 개발 서버가 실행 중이지 않다면, 프로젝트 루트 디렉터리에서 npm run dev (또는 yarn dev) 명령어를 실행합니다. 브라우저를 열고 http://localhost:3000/about 주소로 접속해 보세요. 방금 만든 'About Us' 페이지가 성공적으로 렌더링되는 것을 확인할 수 있습니다.

핵심: App Router에서는 폴더 이름이 URL 경로가 되고, 그 폴더 안의 page.tsx 파일이 해당 경로의 실제 UI를 담당합니다.

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

이제 좀 더 복잡한 페이지 구조를 만들어 보겠습니다. 예를 들어, 대시보드(Dashboard) 안에 설정(Settings) 페이지가 있는 형태입니다.

dashboard 폴더 생성: src/app 디렉터리 안에 dashboard라는 새 폴더를 만듭니다.

my-next-app/
└── src/
    └── app/
        ├── about/
        ├── dashboard/  <- 여기에 새 폴더 생성
        ├── layout.tsx
        └── page.tsx

dashboard/page.tsx 파일 생성: dashboard 폴더 안에 page.tsx 파일을 생성하고 다음 내용을 작성합니다. 이 파일은 /dashboard 경로의 페이지가 됩니다.

// src/app/dashboard/page.tsx

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

http://localhost:3000/dashboard로 접속하여 확인해 보세요.

dashboard/settings 폴더 생성: dashboard 폴더 안에 다시 settings라는 새 폴더를 만듭니다.

my-next-app/
└── src/
    └── app/
        ├── about/
        ├── dashboard/
        │   ├── settings/  <- 여기에 새 폴더 생성
        │   └── page.tsx
        ├── layout.tsx
        └── page.tsx

dashboard/settings/page.tsx 파일 생성: settings 폴더 안에 page.tsx 파일을 생성하고 다음 내용을 작성합니다. 이 파일은 /dashboard/settings 경로의 페이지가 됩니다.

// src/app/dashboard/settings/page.tsx

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

개발 서버 확인: http://localhost:3000/dashboard/settings 주소로 접속하여 방금 만든 중첩 페이지가 잘 렌더링되는지 확인합니다.

핵심: 폴더 안에 폴더를 생성하고 그 안에 page.tsx를 두는 방식으로 URL 경로가 계속 중첩됩니다. 이는 파일 시스템 구조와 URL 경로가 일치하는 매우 직관적인 방식입니다.

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

웹 애플리케이션에서는 페이지 간에 이동하는 기능이 필수적입니다. Next.js는 페이지 간의 클라이언트 사이드 탐색을 위해 <Link> 컴포넌트를 제공합니다. 이는 일반적인 HTML의 <a> 태그보다 여러 이점을 제공합니다.

클라이언트 사이드 탐색: <Link>는 페이지 전체를 새로 고치지 않고, JavaScript를 사용하여 페이지 간의 부드러운 전환을 제공합니다.
사전 로딩 (Preloading): 뷰포트에 들어오는 <Link> 컴포넌트의 대상을 자동으로 미리 로드하여 사용자가 링크를 클릭했을 때 더 빠른 페이지 전환을 경험할 수 있게 합니다.

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

src/app/page.tsx 수정: src/app/page.tsx 파일을 열고 다음과 같이 수정합니다.

src/app/page.tsx

// 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 15 App Router와 함께 웹 개발을 시작합니다.</p>

      <nav style={{ marginTop: '20px' }}>
        <ul>
          <li>
            <Link href="/about">
              {/* Link 컴포넌트 내부에는 <a> 태그를 직접 자식으로 둡니다. */}
              About 페이지로 이동
            </Link>
          </li>
          <li>
            <Link href="/dashboard">
              Dashboard 홈으로 이동
            </Link>
          </li>
          <li>
            <Link href="/dashboard/settings">
              Dashboard 설정 페이지로 이동
            </Link>
          </li>
        </ul>
      </nav>
    </div>
  );
}

주의: <Link> 컴포넌트의 자식으로는 일반적인 HTML <a> 태그를 두는 것이 권장됩니다. React 14부터는 <Link> 자식으로 string이나 React element를 직접 전달하는 방식이 더 이상 사용되지 않습니다. 반드시 <a> 태그를 직접 자식으로 포함하고, <a> 태그에 CSS 클래스 등을 적용하여 스타일을 지정합니다.

개발 서버 확인: http://localhost:3000으로 접속하여 링크들이 잘 표시되는지 확인하고, 각 링크를 클릭하여 페이지가 부드럽게 전환되는지 테스트해 보세요. 브라우저의 새로고침 없이 내용만 바뀌는 것을 보실 수 있을 겁니다.

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

지금까지는 정적인 경로를 가진 페이지만 만들었습니다. 하지만 게시물 상세 페이지(/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을 통해 접근할 수 있습니다.

이 동적 라우트(Dynamic Routes) 개념은 다음 절에서 더 자세히 다루겠지만, 여기서 그 가능성을 미리 인지해 두시는 것이 좋습니다.

이제 여러분은 App Router를 사용하여 새로운 페이지를 만들고, 중첩 라우트를 구성하며, <Link> 컴포넌트를 사용하여 페이지 간에 이동하는 기본적인 방법을 숙지하셨습니다.

페이지 생성하기

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

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

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

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

On this page

페이지 생성하기

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

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

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

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

On this page

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

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