Next.js

페이지 생성하기

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

app 디렉터리에서 폴더와 page 파일을 추가해 새 URL 페이지를 만드는 절차를 확인합니다.

페이지 생성과 라우팅 연결 흐름

1

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

`app/about/page.tsx` 파일을 추가하면 `/about` URL에 대응하는 새 페이지가 생깁니다.

2

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

폴더를 중첩하면 URL 세그먼트도 함께 중첩되어 섹션별 페이지 구조를 만들 수 있습니다.

3

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

Link 컴포넌트는 클라이언트 사이드 전환과 프리페치를 활용해 페이지 이동을 빠르게 처리합니다.

4

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

고정 URL만으로는 상품 id, 글 slug, 사용자 이름처럼 값에 따라 달라지는 화면을 표현하기 어렵습니다.