App Router란 무엇인가?

목차

• App Router란?
• 폴더와 파일의 역할
• 컴포넌트의 계층 구조(특수 파일)
• Colocation(특수 폴더)
• 고급 라우팅 기술 가능

App Router란?

• Next.js가 페이지 라우팅을 하는 방법.
• Next.js 13버전 부터 기존의 Pages Router 방식에서 완전히 새로운 App Router 방식이 도입됨.
• 프로젝트 내부 app 폴더 내에서 새 디렉토리를 만들면 그것이 url 세그먼트가 됨.
• App Router에서는 공통 레이아웃, 중첩 라우팅, 에러 처리 방법 등을 제공함.
• 만약 pages router와 app router를 한 프로젝트에서 혼용하는 경우 앱 라우터가 우선됨. 따라서 충돌이 발생할 수 있음.
• 개발자가 page.tsx 파일에서 "use client"를 최상단에서 명시하지 않으면 기본적으로 리액트 서버 컴포넌트로 동작함.
• 리액트만 배우고 온 경우에는 서버 컴포넌트 방식이 생소할 수 있어서 러닝 커브가 있을 수 있음.

폴더와 파일의 역할

• Next.js의 앱 라우터는 파일 시스템 기반의 라우팅 방식임.
• 이 말은 app 폴더 내에 폴더를 만들면 그것이 세그먼트가 되고, 그 폴더 안에 page.tsx를 만들면 그 세그먼트에 접속할 때 렌더링 할 페이지를 만든다는 의미임.
• 폴더를 계속 중첩해서 만들면 세그먼트가 계속해서 늘어나고, 최종적으로 리프 세그먼트 폴더(최종 경로, 더 이상 children이 없는 폴더)에 있는 파일을 렌더링 하게 됨.
  • 예) app/singer/idol/ive/wonyoung/page.tsx

컴포넌트의 계층 구조(특수 파일)

위 파일들은 Next.js의 파일 구조를 다루는 포스트에서 다루었다.

위 파일을 한 꺼번에 사용한다면 계층 구조는 오른쪽과 같다.

폴더를 중첩해서 만들 때에는, 완전히 새로운 파일들을 만드는 것이 아니라 그 폴더의 계층 구조에 따라서 종속된다.

Colocation(특수 폴더)

• 정확한 명칭은 Co-location인데, 쉽게 이야기해서 코로케이션이란 관심사 별로 비슷한 파일들을 한 군데에 그룹핑해서 모아두는 것을 의미함.
• Next.js에서는 컴포넌트, 스타일링 파일, 테스트 파일 등을 폴더를 만들어서 모아둘 수 있음.
• 여기에 사용되는 폴더의 이름도 저 위의 특수 파일 처럼 특수 폴더라고 이해하면 됨.
• 이것을 특수 폴더라고 하는 이유가, app 폴더 내부에 폴더를 만들면 자동으로 url 세그먼트를 얻고 라우팅이 되지만, 위 특수 폴더들은 라우팅이 될 수도 안 될 수도 있음.
  • components
    • 이 폴더는 라우팅이 안 됨.
    • 페이지를 모아두는 폴더가 아니라 컴포넌트들을 모아두는 폴더임.
    • 여기서 컴포넌트를 모아서 작성하고, 페이지 말고 컴포넌트에서 import해서 사용하면 됨.
  • lib
    • 이 폴더는 라우팅이 안 됨.
    • 라이브러리 파일을 모아두는 폴더.
    • 이곳에 라이브러리를 모아두고, 페이지 말고 컴포넌트에서 import해서 사용하면 됨.
  • dashboard
    • 이 폴더에는 두 가지 파일이 오는데, 파일에 따라 라우팅 여부가 갈림. 
      • page.ts
        • 이 파일은 라우팅이 됨.
        • /dashboard로 접근 가능.
      • nav.ts
        • 이 파일은 라우팅이 안 됨.
        • 내비게이션 컴포넌트 파일이고, 다른 페이지나 컴포넌트에서 import해서 사용하면 됨.
  • api
    • 이 폴더에는 두 가지 파일이 오는데, 파일에 따라 라우팅 여부가 갈림.
      • route.ts
        • 이 파일은 라우팅이 됨.
        • /api로 접근 가능.
        • API 엔드포인트 파일임.
      • db.ts
        • 이 파일은 라우팅이 안 됨.
        • 데이터베이스 관련 유틸리티 파일임.
        • 위 route.ts, 즉 API 엔드포인트 파일에서 import해서 사용하면 됨.

고급 라우팅 기술 가능

Next.js의 App Router를 이용하면 Parallel Routes(병렬 라우트), Intercepting Routes(가로채기 라우트)가 가능하다. 이는 나중에 자세히 다룬다.

패러렐 라우츠는 한 페이지에서 두 개 이상의 페이지를 보여주는 기술. 예를 들어 라이브러리의 기술 문서 등을 보면 왼쪽에 사이드 내비게이션 메뉴가 있고, 오른쪽에는 body를 보여주는 것.

인터셉팅 라우츠는 현재 페이지의 컨텍스트를 유지하면서 이 페이지 안에 다른 페이지를 표시하는 기능임. 예를 들어 소셜미디어에서 글을 보다가 글 리스트에서 수정 버튼을 누르면 글 수정 페이지로 넘어가는 것이 아니라 모달로 뜨면서 배경에 현재 보고 있는 페이지의 맥락을 유지시키면서 글 수정 페이지를 모달로 띄우는 것.