Create Nav Component

• /components 폴더를 만들어 준후
• NavBar 컴포넌트 생성
• <a> 태그를 사용할 시 ESLint 오류가 발생한다.
• Next.js 에 앱 내에서 페이지를 네비게이트할 때 사용해야만 하는 특정 컴포넌트가 존재하기 때문에
  • React 에서 react-router Link 를 쓰는 것과 같다
• <a> 태그 사용시 새로고침 된다
  • 클라이언트 사이드 네비게이션이 아니라는 뜻
• <Link> 컴포넌트를 사용한다
  • react-router 의 Link 컴포넌트랑 이름이 같을 뿐이다
  • import Link from "next/link";
  • 사실 동작은 비슷하다
• 다만 Link 컴포넌트는 attributes 를 지정해줄 수 없고 오직 href 만을 위해 사용한다.
• 따라서 Link 컴포넌트를 a 태그 감싸주는 형태로 사용해야 한다.

useRouter()

• Next.js 의 hook 이다
• 라우터와 연결시켜주는 hook
• const router = useRouter();
  • router 변수에 url-path 등의 정보가 생긴다.
  • 유저가 지금 어느 페이지에 있는지 알 수 있게 된다.
• 사용예
  • 삼항 연산자 사용하여 router.pathname 의 상태에 따라 스트일 변화를 줄 수 있다.

참조

노마드코더 NextJS 시작하기