페이지 생성

src/app 디렉터리로 이동: 프로젝트의 루트 디렉터리에 있는 src/app 폴더로 이동합니다.

이곳이 모든 라우트와 페이지가 시작되는 지점입니다.

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

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

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

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

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

개발 서버 확인: 개발 서버가 실행 중이지 않다면, 프로젝트 루트 디렉터리에서 npm run dev (또는 yarn dev) 명령어를 실행합니다.

브라우저를 열고 http://localhost:3000/about 주소로 접속해 보세요.

방금 만든 About Us 페이지가 성공적으로 렌더링되는 것을 확인할 수 있습니다.

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

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

dashboard/page.tsx 파일 생성: dashboard 폴더 안에 page.tsx 파일을 생성하고 다음 내용을 작성합니다.

이 파일은 /dashboard 경로의 페이지가 됩니다.

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

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

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

dashboard/settings/page.tsx 파일 생성: settings 폴더 안에 page.tsx 파일을 생성하고 다음 내용을 작성합니다.

이 파일은 /dashboard/settings 경로의 페이지가 됩니다.

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

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

핵심: 폴더 안에 폴더를 생성하고 그 안에 page.tsx를 두는 방식으로 URL 경로가 계속 중첩됩니다.

이는 파일 시스템 구조와 URL 경로가 일치하는 매우 직관적인 방식입니다.

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 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>
  );
}

주의: Next.js 13부터 <Link>가 자체적으로 <a> 요소를 렌더링합니다.

따라서 <Link><a>...</a></Link>처럼 <a>를 중첩하면 안 됩니다.

텍스트나 React 요소를 바로 자식으로 전달하고, 스타일 클래스와 링크 속성은 <Link>에 지정합니다.

개발 서버 확인: http://localhost:3000으로 접속하여 링크들이 잘 표시되는지 확인하고, 각 링크를 클릭하여 페이지가 부드럽게 전환되는지 테스트해 보세요.

브라우저의 새로고침 없이 내용만 바뀌는 것을 보실 수 있을 겁니다.