<Next.js> App Router 페이지 경로 추가

https://nextjs.org/docs/app/api-reference/file-conventions/layout

페이지 경로 추가

/about이라는 페이지를 추가한다는 가정

app 폴더에서 about 폴더를 만들어준다.

프로젝트 루트
│
├── app
│   ├── layout.tsx                # 모든 페이지에 공통으로 적용되는 레이아웃 파일
│   ├── page.tsx                  # 기본 페이지 컴포넌트
│   ├── [id]                      # 동적 라우트를 처리하는 폴더 (예: /app/123)
│   │   └── page.tsx              # 동적 라우트에 해당하는 페이지 컴포넌트
│   └── about                     # about 페이지 경로가 되는 폴더
│       └── page.tsx              # about 페이지에 렌더링될 파일
│       └── layout.tsx            # about 페이지의 레이아웃 / about 페이지에만 국한된 레이아웃 제공

페이지 경로 폴더 내부에 있는 layout.tsx의 역할

about 페이지의 레이아웃 / about 페이지에만 국한된 레이아웃을 제공한다.

layout.tsx는 자동적으로 page.tsx를 children으로 가지는 방식이다.

// app/about/layout.tsx
export default function AboutLayout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <header>
        <h1>About Header</h1>
      </header>
      <main>
        {children} {/* 여기에 page.tsx의 콘텐츠가 자동으로 들어감 */}
      </main>
      <footer>
        <p>About Footer</p>
      </footer>
    </div>
  );
}

// app/about/page.tsx
export default function AboutPage() {
  return (
    <div>
      <h2>About Us</h2>
      <p>We are a dedicated team.</p>
    </div>
  );
}

Next.js가 자동으로 page.tsx의 내용을 layout.tsx에서 지정한 {children}에 삽입해준다.

ETC

page.js는 화면에 렌더링 되어야 하는 파일 (반드시 해당 파일명이어야 next.js가 인식하고 렌더링함)
next.js에서 해당 파일은 서버 컴포넌트이다.

이를 확인할 수 있는 방법은, console.log가 찍히는 것으로 확인해볼 수 있다.

브라우저 콘솔창에서는 확인이 불가능하지만, IDE 터미널창에서 log를 확인해볼 수 있다.