React router vs Next router

Next와 React

Next는 React의 기능들을 그대로 가지고 있으면서 Next.js에서만 구현할 수 있는 추가 기능들이 있다고 한다. 그런데 React와 유일한 차이는 Router 부분이다. 라우팅을 할 때 Next에서는 상대적으로 쉽게 하는데 React는 상대적으로 경로 및 컴포넌트 설정에 있어서 복잡하다고 한다. NEXT에서는 React Router를 사용하지 않고, NEXT에서 개발한 Router를 사용한다. 이는 SSR를 포함하여 한 패키지 안에서 API를 제공하기 위해서다. React를 중심으로 만들어지기는 했으나, 편리함을 위해 약간씩 React 와는 차이가 있습니다.

 

 

next/router

Router 객체를 임포트해서 사용하는 next/router는 조금 더 프로그래머에게 제어권을 주는 API를 제공해준다. 파일 시스템 기반의 라우팅 기능을 제공한다. 페이지를 만들고 싶으면 파일을 만들면 된다.

 

속성

• Router.route: 현재 경로 반환
• Router.pathname: queryString 을 포함한 전체 경로 반환
• Router.query: queryString이 파싱되어 저장된 객체로 빈 값은 {}로 반환
• Router.push(url, as=url): 주어진 url 파라미터에 따라 pushState() 메서드를 호출
• Router.replace(url, as=url): 주어진 url 파라미터에 따라 replaceStete() 메서드 호출

*History.replaceState() : 현재 히스토리 항목을 수정하고 이를 stateObj, title및 URL메소드 매개변수로 전달한다. 이 방법은 일부 사용자 작업에 대한 응답으로 현재 기록 항목의 상태 개체 또는 URL을 업데이트하려는 경우에 특히 유용하다.

 

이벤트

• routeChangeStart(url): 라우팅이 시작될 때 호출
• routeChangeComplete(url): 라우팅이 끝나면 호출
• routeChangeError(err, url): 라우팅 도중 에러 발생 시 호출
• beforeHistoryChange(url): 브라우저 내의 히스토리가 바뀌기 직전에 호출
• appUpdated(nextRoute): 페이지가 업데이트 되었는 데 새 버전의 어플리케이션이 사용 가능한 경우 호출

 

* 참고한 글

http://52.78.22.201/tutorials/nextjs/nextjs-004/

WebFrameworks.kr - NEXT JS - Router

 

https://velog.io/@moony_moon/React-Next-Router-vs-React-Router

React- Next Router vs React Router