Next.JS - Routing

Link

NavBar를 만들어 보자.

next.js 파일 경로에 components/NavBar.js 를 생성하자.

(components 폴더안에 NavBar.js 파일을 생성)

export default function NavBar() {
	 <a href ="/"> Home</a>
     <br/>
     <a href = "about">About</a>
}

next.js에서는 Link 컴포넌트를 제공하고 있다.
<a>태그는 페이지이동 시 새로고침이 발생하기에 속도가 느려질 수 있음

import Link from "next/link"

// 12.0.7 ver
<Link href="/">
	<a class="home">Home</a>
</Link>

// 13.0.6 ver
<Link class="home" href="/">
	Home
</Link>

Link를 사용하기 위해 import 해주자.

12와 13 버전의 차이점

12v
<Link>의 내용을 <a>태그로 둘러줘야 한다.
class 나 style 등을 설정할 때 <a>태그 안에 작성 해줘야 한다.

13v
<a>태그 생략
<Link>안에 class 나 style 등을 설정한다.

Router

Router도 Link와 마찬가지로 next.js가 제공하므로 import로 불러올 수 있다.

import { useRouter } from "next/router"

export default function NavBar() {
    const router = useRouter();
	console.log(router)
}

Router를 콘솔에 찍어보면 현재 location에 관한 정보들을 볼 수 있다.

router의 pathname을 이용해 어느 위치에 있는지 알아볼 수 있게 style로 코드를 작성해 보자.

// 12v
<Link href="/">
	<a style={{ color: router.pathname === "/" ? "red" : "blue" }} class="home"> Home <a/>
</Link>

// 13v
// home에 있다면 색상을 빨간색으로 변경하고 아니면 파란색으로 변경
<Link style={{ color: router.pathname === "/" ? "red" : "blue" }} class="home" href="/">
	Home
</Link>
<br />

// about에 있다면 색상을 빨간색으로 변경하고 아니면 파란색으로 변경
<Link style={{ color: router.pathname === "/about" ? "red" : "blue" }} class="about" href="/about">
	about
</Link>

(Home("/")에 있을 때에 빨간색으로 변한 모습)