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