들어가며

Next.js의 라우팅을 살펴보다가 문득.. 오래전 리액트 라우터에서 모든 페이지들의 라우팅을 직접해주었던 기억이 났어요. 그러다가 왜 Next.js는 파일 기반의 라우팅 방식을 사용하고, 또 다른 라우팅 방식은 또 어떤 것들이 있는지 찾아보았습니다. 

 

라우팅의 정의

라우팅은 사용자가 웹 애플리케이션에서 요청한 URL을 처리하고, 해당 URL에 맞는 콘텐츠를 제공하는 과정이에요.

클라이언트 사이드 렌더링(CSR)에서는 주로 하나의 페이지 요청만 다루지만, 서버 사이드 렌더링(SSR)에서는 여러 개의 페이지와 라우팅 경로가 필요하게 됩니다. 이러한 이유로 라우팅은 SSR에서 중요한 역할을 합니다.

Next.js는 서버 사이드 렌더링을 지원하는 React 프레임워크로, 라우팅 기능이 핵심적인 역할을 합니다. Next.js의 라우팅 방식은 개발자의 생산성을 높이고, 성능을 최적화하는 데 유리한 특징을 가집니다.

 

Next.js의 라우팅 방식

Next.js는 파일 기반 라우팅(File-based Routing)을 채택하고 있어요. 이 방식은 페이지를 파일 시스템의 구조에 맞춰 자동으로 라우팅을 연결해주는 방법으로, 명시적으로 라우트를 정의할 필요 없이 파일 구조만으로 경로가 결정됩니다.

파일 시스템 기반 라우팅

Next.js에서는 pages 폴더 내에 파일을 생성하면, 해당 파일이 자동으로 라우트로 변환됩니다.

예를 들어, pages/about.js라는 파일을 만들면 /about 경로가 자동으로 연결됩니다. 이는 개발자가 라우팅을 직접 설정하지 않고도 파일만 추가하면 원하는 URL을 만들 수 있다는 장점이 있어요.

앱 라우터(App Router)

Next.js 13부터 도입된 앱 라우터(App Router)는 pages 폴더 대신 app 폴더를 사용하여 라우팅을 구성하는 방식이에요. (이제는 App Router 방식에 많이 익숙해졌죠?)

이 방식은 레이아웃(Layout), 에러(Error), 로딩(Loading) 컴포넌트와 같은 다양한 컴포넌트들을 포함하는 복잡한 라우팅 구조를 지원합니다. 이를 통해 라우팅의 관리가 더 체계적이고 확장 가능해졌습니다.

자동 코드 스플리팅

Next.js는 자동 코드 스플리팅을 지원하여, 각 페이지마다 필요한 JavaScript만 로드합니다.

이로 인해 초기 로딩 속도가 빨라지고, 불필요한 코드가 로드되지 않아 성능이 최적화됩니다. 예를 들어, /about 페이지를 요청하면 해당 페이지에 필요한 코드만 전송되고, 다른 페이지는 필요할 때 로드됩니다.

콜로케이션(Colocation)

Next.js는 라우팅뿐만 아니라 콜로케이션 원칙을 적용하여 프로젝트 구조를 관리합니다.

이는 관련된 코드(예: 컴포넌트, 스타일, 데이터 fetching 등)를 동일한 디렉토리나 파일 내에 배치하여 프로젝트 구조를 명확하고 일관되게 유지하는 방법입니다. 개발자는 각 파일이 무엇을 담당하는지 쉽게 파악할 수 있으며, 코드의 유지보수가 용이해집니다.

 

Next.js 라우팅의 장점

• 직관적인 라우팅 시스템
  파일 시스템을 기반으로 라우팅이 자동으로 설정되므로, 개발자는 라우팅을 설정하는 데 시간과 노력을 들이지 않고, 페이지를 추가하는 것만으로 라우팅이 완료됩니다.

• 확장성 있는 파일 구조
  app 폴더와 같은 구조로 다양한 레이아웃, 에러, 로딩 컴포넌트를 쉽게 관리할 수 있습니다. 이를 통해 대규모 애플리케이션에서도 유지보수가 용이합니다.

• 자동 코드 스플리팅
  넥스트JS는 페이지별로 필요한 자바스크립트만 로드하므로, 페이지가 빠르게 로드되고 초기 로딩 시간이 단축됩니다.

• 빠른 개발 환경
  라우팅 설정이 간단하고, 페이지를 추가하는 것만으로 새로운 경로를 만들 수 있어 개발 속도가 빨라집니다.

 

Next.js 라우팅 vs. 다른 라우팅 방식

• 리액트 라우터(React Router)
  리액트 라우터는 명시적인 라우팅 설정이 필요합니다.
  개발자는 Route 컴포넌트를 사용해 각 경로를 정의해야 하므로, Next.js의 파일 기반 라우팅에 비해 번거로울 수 있습니다. 
  또한, 리액트 라우터는 레이지 로딩(Lazy Loading)을 설정해 주어야 하며, 이는 개발자가 직접 설정해야 하는 부분입니다.

• 코드 기반 라우팅 (Express)
  코드 기반 라우팅은 서버 측에서 라우트를 명시적으로 정의하는 방식입니다.
  예를 들어, Express.js에서는 HTTP 메소드와 URL을 매핑하여 라우팅을 설정합니다.
  반면 넥스트JS는 파일만으로 라우팅을 처리하므로, 더 간단하고 직관적인 구조를 제공합니다.

• 데코레이터 기반 라우팅 (NestJS)
  NestJS와 같은 프레임워크는 데코레이터를 사용해 라우팅을 설정합니다.
  메소드에 데코레이터를 추가하여 특정 경로에 대한 요청을 처리합니다.
  이 방식은 코드가 더 명확하게 구조화되지만, 넥스트JS의 파일 기반 라우팅보다는 설정이 복잡할 수 있습니다.

 

마치며

Next.js의 라우팅 시스템은 사용자(UX)와 개발자(DX) 모두에게 최적화된 경험을 제공해요. 직관적인 개발 방식과 자동화된 최적화를 통해 개발자는 비즈니스 로직에 집중할 수 있고, 결과적으로 사용자에게는 빠르고 안정적인 웹 애플리케이션을 제공할 수 있어요.

그동안 어떻게 사용하는지만 알고 사용중이었는데 자세히 살펴보니 많은 것을 제공해주고 있다는 점을 느끼게 되었습니다.

감사합니다.