React-router & Next-router

Next.js

• Next.js 는 React 를 감싸고 있는 프레임워크이다.
• React 의 기능들을 그대로 가지고 있으면서 Next.js 에서만 구현할 수 있는 추가 기능들이 있다.

Router 차이

• Next.js 와 React 에서 차이가 큰 부분이 Router 부분인데, 라우팅을 할 때 Next 에서는 상대적으로 쉽게하는 반면 React는 상대적으로 경로 및 컴포넌트 설정에 있어서 복잡하다.

React Routing

import {BrowseRouter as Router, Switch, Route} from 'react-router-dom'

export default function App(){
<Router>
      <Switch>
      	<Route exact path = "/boards/new"/ >
      	<Route exact path = "/" />
      </Switch>
</Router>

Next.js Routing

import { useRouter } from "next/router";

const router = useRouter();

router.push(`/boards/new`);

• router.push 를 만들고 타입스크립트 혹은 자바스크립트 파일명을 그대로 써주면 그 페이지가 주소가 되는 구조.
• 라우팅 면에서 확실히 Next.js 가 편하지만 React.js 를 쓰는 기업이 많기 때문에 둘다 알아놓으면 좋다.