Next.js 라우터

Next.js

Next.js 는 React를 감싸고 있는 프레임 워크

Next에서의 추가 기능들이 개발에 효율성을 올려줄 수 있다고 생각해 기술 스택으로 선택함

Next.js 와 React에서 큰 차이를 보이는 곳이 Router 부분

라우팅을 할 때 Next에서는 상대적으로 쉽게 하는 반면, React는 경로 및 컴포넌트 설정에 있어서 복잡함

React-Link VS Next-Link

React-Link

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

export default function App(){
	return (
		<Router>
      <Switch> 
      	<Route exact path="/mintchoco" />
      	<Route exact path="/" />
        <Route exact path="/choco" />
      	<Route exact path="" />
      </Switch>
		</Router>
	);
}

• React는 라우팅을 하기 위해 별도의 세팅이 필요하다. 하지만 Next.js는 Pages 폴더 안에 컴포넌트가 있으면, 별도의 설정 없이 해당 경로로 라우팅이 된다.

Next-Link

import Link from "next/Link";

export default function App(){
	return (
      <Link href={"/mintchoco"}>
      	about
      </Link>
	);
}

Next-Router vs Next-Link

router와 link의 가장 큰 차이점은 Js VS HTML

따라서 link의 경우 SEO에 유리하다.

Router 예시

import { useRouter } from 'next/router'
const router = useRouter()

• Router.push | Router.replace - 페이지 전환 시 사용(replace는 뒤로가기 불가능)

  router.push(url, as, options)
  router.replace(url, as, options)
  
  // 이동할 URL
  // 이동 후 브라우저에 표시될 URL
  // options: 기타 옵션
  

• Router.prefetch(url, as) - 페이지 데이터를 미리 가져옴

  router.prefetch(url, as)
  
  // 이동할 URL
  // 이동 후 브라우저에 표시될 URL
  

• Router.back | Router.reload - 뒤로가기와 새로고침

  router.back()
  router.reload()