React-Router vs Next-Router

Next.js는 React를 감싸고 있는 프레임워크이다.
React의 기능들을 그대로 가지고 있으면서 Next.js에서만 구현할 수 있는 추가 기능들이 있어서 오히려 더 배운다고 생각하면 된다.
하지만, Next.js와 React에서 차이를 유일하게 크게 보이는 곳이 Router 부분이다.
라우팅을 할 때 Next에서는 상대적으로 쉽게하는 반면 React는 상대적으로 경로 및 컴포넌트 설정에 있어서 복잡하다.

Next.js 같은 경우는 원하는 a 태그에 링크를 걸어서 href 형식으로 주면된다.

javascript 형식과 굉장히 비슷하다.

Link는 SEO(Search Engine Optimization), 즉, 검색최적화를 위하여 많이 사용되고 Routing은 그 외의 함수를 실행시킬 때 많이 사용한다.
Link 태그를 사용하는 경우는, 자동으로 다른페이지로 넘어갈 때 많이 사용된다.
즉, 어떤 태그를 클릭해서 다른 페이지로 넘어갈 때 함수를 동작시키지 않고 그냥 페이지를 보여주면 되는 경우에는 Link 사용하는 게 훨씬 효율적이고 실무에서 많이 사용한다.
결국 Routing을 사용하게 되면 클릭했을 때 어떤 함수들이 실행되는지 다른 회사들에서는 모르니 SEO를 할때는 주소가 나와있는 Link href를 많이 사용하게 된다.
반대로 라이퉁 같은 경우는 함수를 동작시켜서 클라이언트에서 데이터 request & response 요청을 할 때 등 자동으로 페이지를 넘기지 않을 경우 router.push & replace를 사용한다고 보면 된다.

router.push를 만들고 타입스크립트 혹은 자바스크립트 파일명을 그대로 써주면 그 페이지가 주소가 된다.

React같은 경우는 Nested Routes를 설정할 때 `을 이용하여 {match.path}:slug` 직접 설정해줘야하는데

Next.js에서는 파일명 [ ](대괄호)하고 동적 라우팅을 해주고 그 주소로 router.push()를 하면 nested routes가 완성된다.

티스토리툴바