[Next.js] App Router

Next.js는 왜 폴더가 곧 URL ????

Next.js는 최신 버전부터 App Router를 도입하여, 폴더 구조만으로 페이지와 URL을 정의할 수 있도록 했다.파일 시스템 기반의 라우팅 방식이라 누구나 직관적으로 구조를 파악하고 사용할 수 있다는 장점이 있다.( 혁명 그 자체. .)  Next.js의 App Router가 어떻게 동작하는지, 그리고 URL이 어떻게 생성되는지 예시와 함께 정리하고자 한다.

---

Next.js의 App Router는 /app 폴더를 기준으로 작동한다.
이 app 폴더가 프로젝트의 루트 경로(/)를 구성하게 되며, 내부 폴더와 파일이 곧 URL 경로가 된다.

app폴더 내의 page.tsx파일을 (/)를 루트 세그먼트(root segment)라고 부른다.

/app
├── layout.tsx   # 전체 사이트 공통 레이아웃
└── page.tsx     # 루트 경로 (/)

 

루트 세그먼트가 중요한 이유

• 루트 세그먼트(/)는 사용자가 처음 방문했을 때 보여지는 페이지다.
• 이곳에서 전체 애플리케이션의 시작점을 정의할 수 있다.
• 초기 로딩, 메인 화면, 또는 리다이렉션 등을 처리하는 데 사용된다.

따라서 app/page.tsx는 거의 모든 프로젝트에서 반드시 존재해야 하는 중요한 파일이다.

Segment란? URL 경로를 구성하는 조각이다.

/blog/posts/123이라는 URL이 있다면,
blog → 첫 번째 세그먼트 posts → 두 번째 세그먼트 123 → 세 번째 세그먼트
각 세그먼트는 Next.js에서 폴더 하나에 대응하며, 그 구조에 따라 URL이 자동으로 만들어진다.

 

새로운  URL 경로 생성

새로운  URL 경로 생성하고 싶다면, app 폴더 내에 새 폴더를 만들고 그 안에 page.tsx 파일을 생성하면 된다.

/app
├── about-us
│   └── page.tsx   # → /about-us
├── layout.tsx
└── page.tsx       # → /

 

위와 같은 구조에서는 /about-us라는 URL 경로에 접근하면 about-us/page.tsx의 내용이 화면에 렌더링된다.

page.tsx 파일의 중요성

폴더만 있고 page.tsx 파일이 없는 경우, 해당 폴더는 단순히 URL 경로의 일부일 뿐, 단독으로는 화면에 렌더링되지 않는다.

/app
├── about-us
│   └── company
│       └── page.tsx   # → /about-us/company
├── layout.tsx
└── page.tsx           # → /

 

이 경우 /about-us/company는 접속 가능하지만, /about-us는 page.tsx가 없기 때문에 접근해도 아무 내용이 렌더링되지 않는다.
/about-us 페이지도 만들고 싶다면, app/blog/page.tsx 파일을 추가해야 한다.

---

 

• /app 폴더는 라우팅의 시작점이다.
• 각 폴더는 URL 경로의 한 세그먼트(segment)를 나타낸다.
• 실제 페이지를 렌더링하려면 반드시 page.tsx 파일이 필요하다.
• 공통 UI나 레이아웃은 layout.tsx 파일에서 정의한다.
• 폴더 구조만으로도 URL과 페이지가 자동으로 연결되기 때문에 매우 직관적이다.