주의: Navbar.js는 coponents 폴더에 있는 컴포넌트이므로(page 아님) 이름을 대문자로 시작함

// Navbar.js

import Link from "next/link";
import { useRouter } from "next/router";

export default function NavBar() {
  // useRouter: location에 관한 정보
  const router = useRouter();

  return(
    <nav>
      {/* a 태그를 넣어주는 이유 */}
      {/* Link 에는 style, className 적용이 안 됨 */}
      {/* 따라서 a 태그에 넣어주기 */}
      <Link href='/'>
        <a style={{color: router.pathname === '/' ? 'red' : 'blue'}}>Home</a>
      </Link>
      <Link href='/about'>
        <a style={{color: router.pathname === '/about' ? 'red' : 'blue'}}>About</a>
      </Link>
    </nav>
  )
}

// pages/home.js

import NavBar from "../components/NavBar";

export default function Home() {
  return (
    <div>
      {/* NavBar 컴포넌트 리액트와 같은 방법으로 추가 */}
      <NavBar />
      <h1>Hello</h1>
    </div>
  )
}

// pages/about.js

import NavBar from "../components/NavBar";

export default function Potato() {
  return (
    <div>
      {/* NavBar 컴포넌트 리액트와 같은 방법으로 추가 */}
      <NavBar />
      <h1>About</h1>
    </div>
  )
}

Link

• Next의 Link는 to가 아닌 href 프로퍼티로 경로 설정
• style, className등을 설정 불가
• a태그를 따로 만들어 style 및 className 등 설정

useRouter

• useRouter를 사용하면 location 정보(현재 경로, 이전 페이지 등)를 얻을 수 있음
• router.pathName(현재경로)을 이용해 a태그의 스타일 변경

Next에서 style 적용하는 다양한 방법은 다음 게시물로!!