본문 바로가기

Web Development/Next.js

[Next.js] Next.js 라우팅 방식의 장점과 다른 방식들과의 차이점

  1. Routing이란?
    라우팅(Routing)은 URL과 페이지 컴포넌트를 연결하는 과정으로, 각 페이지의 경로를 정의하고 해당 경로에 어떤 컴포넌트를 제공할지 결정하는 것을 의미한다.
  2. 다양한 라우팅 방식들
    1. 명시적 라우팅
      개발자가 코드 내에서 직접 경로와 컴포넌트를 명시하는 방식이다.
      예를 들어, React에서는 다음과 같이 구현한다.
      @Controller('users') 
      export class Users Controller { 
          @Get() 
          findAll():string { 
              return 'This is ~~'; 
          } 
      }
    2. 코드 기반 라우팅
      서버 측에서 코드로 경로를 정의하는 방식이다.
      Express.js에서는 다음과 같이 구현한다.
      app.get('/', (req, res) => {
      	res.send('Homepage contents')
      })
    3. 데코레이터 기반 라우팅
      데코레이터를 사용하여 클래스나 메서드에 경로를 부여하는 방식이다.
      Nest.js에서는 다음과 같이 구현한다.
      <Route path=’/’ component={<Home/>} /> 
      <Route path=’/about’ component={<About/>} />
    4. 파일 구조 기반 라우팅
      파일 및 디렉토리 구조에 따라 자동으로 경로를 설정하는 방식이다.
      Next.js에서는 pages 디렉토리 내의 파일 구조에 따라 라우팅이 이루어진다.
      이 방식의 장점은 다음과 같다:
      • 직관성: 파일 구조만으로도 경로를 쉽게 파악할 수 있다.
      • 자동 코드 스플리팅 지원: 각 페이지는 독립적으로 로드되어 초기 로딩 속도가 향상된다.
      • 콜로케이션(Colocation): 관련된 코드를 한 곳에 모아두는 방식으로, 코드의 구조가 명확해지고 유지 보수가 용이하다.파일 기반 라우팅은 이러한 장점들로 인해 개발자가 프로젝트 구조를 빠르게 이해하고 효율적으로 작업할 수 있게 도와준다.