개념 설명
Next.js 13 버전부터 도입된 App Router는 프로젝트 내의 파일 시스템 구조를 통해 웹 애플리케이션의 경로(Route)를 결정하는 방식임. src/app 디렉터리가 루트 경로(/)가 되며, 그 하위 폴더 이름이 곧 URL 주소가 됨. 각 폴더 안의 page.tsx 파일은 해당 경로로 접속했을 때 사용자에게 보여지는 실제 UI 구성 요소 역할을 수행.
💡 사용 상황 예시
- 상세 페이지 구축:
/about주소를 만들고 싶을 때app/about/page.tsx생성 - 중첩 라우팅(Nested Routes): 블로그 포스트처럼
/blog/first-post구조를 만들 때app/blog/first-post/page.tsx계층 구성 - 동적 라우팅: 사용자의 ID나 게시글 번호에 따라 페이지를 생성해야 할 때
[id]형태의 폴더명 활용
기본 문법
Next.js 라우팅 시스템의 핵심 규칙임.
- 경로 정의:
src/app폴더 내부에 하위 폴더 생성 (예:dashboard) - 페이지 생성: 생성한 폴더 내에 반드시
page.tsx(또는.js,.jsx) 파일 작성 - 컴포넌트 작성: 해당 파일 내에서 React 컴포넌트를
export default로 선언
// src/app/contact/page.tsx 파일 예시
export default function ContactPage() {
return <h1>문의하기 페이지임</h1>;
}자주 하는 실수
- 파일명 오류:
page.tsx가 아닌index.tsx나 다른 이름을 사용 시 라우팅 인식 불가. 반드시 정해진 예약어인page를 사용해야 함. - 폴더와 파일의 혼동:
app/contact.tsx와 같이 폴더 없이 파일을 생성하면 경로로 인정되지 않음. 항상 폴더/page.tsx 구조 유지 필요. - 대소문자 구분: 운영체제 환경에 따라 폴더명의 대소문자가 URL 경로 인식에 문제를 일으킬 수 있으므로 소문자 사용 권장.
핵심 요약
- 폴더명 기반 라우팅:
src/app내 폴더 구조가 곧 웹사이트의 URL 주소임.- 예약어 page.tsx 필수: 실제 화면을 렌더링하기 위해서는 폴더 안에 반드시
page.tsx파일 존재 필요.- 직관적 구조 관리: 파일 시스템을 통한 경로 관리로 별도의 라우터 설정 없이 개발 효율성 증대.
출처: 한 입 크기로 잘라먹는 Next.js(v15)
