Next js
지난번에 SSR에 대해 포스팅한적이 있습니다. 아주 간단하게 요약하자면 웹 페이지 방문자가 볼 컨텐츠를 서버에서 (어느정도는)그린 다음에 클라이언트에 전송해 주는 방식입니다. SSR을 사용하기 위해서는 프론트 엔드 서버가 필요하고 해당 서버를 구축하기 위한 방법 중 하나가 바로 Next js입니다. Next는 React를 기반으로 하는 SPA 프레임워크로 오늘은 단순 React 프로젝트와의 가장 큰 차이점 중 하나인 앱 라우터를 설명해보고자 합니다.
라우팅
Next.js의 앱 라우터(App Router)는 Next.js 13에서 도입된 기능입니다. 이전까지는 페이지 라우터만을 사용할 수 있었습니다. Next.js 앱 라우터는 웹 애플리케이션의 URL 구조를 정의하고 사용자 요청에 따라 적절한 페이지를 렌더링하는 데 사용되는 기능입니다.
페이지 라우터에서는 파일 시스템 기반 라우팅, 즉 파일 이름을 기반으로 url을 일치시켜 라우팅을 하는 방식이었습니다. 반면 앱 라우터에선 파일이 아닌 폴더를 기준으로 라우팅을 합니다. 만약 http://localhost/main/about이라는 페이지로 라우팅하고 싶다면 페이지 라우터에서는 page 디렉토리에서 main/about.js라는 파일을 만들어야 합니다. 앱 라우터에서는 app 디렉토리에서 main/about/ 경로를 만들고 해당 경로에 page.js라는 파일을 만들어야 합니다.
동적 라우팅이나 중첩 라우팅은 같은 방식을 사용합니다. 동적 라우팅은 대괄호를 사용하여 [slug]와 같은 방식으로, 중첩라우팅은 폴더의 중첩으로 설정할 수 있습니다. 그리고 이후에 설명할 병렬 라우팅과 인터셉팅 라우트의 폴더는 url 구조에 영향을 주지 않습니다.
Parallel Routing(병렬 라우팅)
병렬 라우팅은 한 번에 여러 경로를 동시에 렌더링하는 기능입니다. 이를 통해 하나의 레이아웃 내에서 여러 페이지를 병렬로 표시할 수 있습니다. 각 페이지 그룹은 @ 기호를 사용하여 구분하며, 공통된 레이아웃 파일을 사용하여 일관된 디자인을 유지할 수 있습니다.
다음과 같은 폴더 구조로 a와 b를 병렬 라우팅으로 렌더링할 수 있습니다. @a/에는 해당하는 페이지 컴포넌트가 포함됩니다. 이렇게 구성된 디렉토리에서는 layout.tsx 파일에서 props로 받아 각 라우트 그룹의 컨텐츠를 조합하여 전체 페이지 레이아웃을 정의할 수 있습니다.
app/
├── layout.tsx
├── page.tsx
├── @a/
│ ├── page.tsxIntercepting Routes
인터셉팅 라우트는 특정 경로로의 이동을 가로채고 처리하는 컴포넌트를 정의하는 기능입니다. 예를 들어, 사용자가 특정 페이지로 이동할 때, 먼저 모달 창을 표시하거나, 페이지 이동을 취소하고 다른 동작을 수행할 수 있습니다.
.(dot)을 폴더 이름에 사용하여 인터셉팅 라우트를 구현할 수 있습니다. 괄호 안의 점의 개수는 상대경로 규칙처럼 작동하여 해당 경로의 라우팅을 가로챕니다. 아래의 폴더 구조 예시에서는 위의 photo가 아래의 photo를 가로챕니다.
app/
├── layout.tsx
├── page.tsx
├── (.)pohto/
│ ├── page.tsx
├── photo/
│ ├── page.tsx앱 라우터의 애플리케이션 라우팅 파일 규칙
page: 경로에 해당하는 기본 페이지를 정의합니다.
layout:레이아웃은 여러 경로 간에 공유되는 UI입니다. 또한 각 페이지 컴포넌트(page.js)를 렌더링하는 역할도 수행합니다.
not-found: 사용자가 존재하지 않는 경로로 이동했을 때 표시할 커스텀 페이지를 정의합니다.
error: 예상치 못한 오류를 잡아내고 대체 UI를 표시합니다.
loading: Suspense를 기반으로 로딩 상태를 표시되는 대체 UI입니다.
default: 병렬 라우트 내에서 폴백을 렌더링하는 데 사용됩니다.
middleware: 미들웨어는 라우트가 렌더링되기 전에 실행됩니다. 인증, 로깅 또는 리다이렉트 처리와 같은 사용자 지정 서버 측 로직을 구현하는 데 특히 유용합니다
route: 웹 요청을 사용하여 특정 경로에 대한 사용자 정의 요청 핸들러를 생성할 수 있습니다.
template: 템플릿 파일은 각 자식 레이아웃이나 페이지를 래핑하는 데 레이아웃과 유사합니다. 레이아웃은 라우트 간에 지속되고 상태를 유지합니다.
(폴더): 라우팅(혹은 url)과 상관없이 폴더로 그룹화합니다.
_폴더: 해당 폴더는 라우팅에서 제외됩니다.
참고 자료
Next, [Routing Fundamentals, File Conventions]