Next.js 04. pathname과 jsx style

최신 버전의 Next.js의 useRouter는 usePathname과 구분되어있다.

아무래도 라우팅 과정에서 pathname을 자주 사용하다 보니 나누어 놓은듯 하다.

pathname을 읽어 현재 페이지를 알기 위해 링크에 스타일을 입히는데

Link태그에는 href 속성만 사용하고 내용에 a태그를 그대로 사용하기 위해선 부모 Link 태그에 legacyBehavior 속성을 추가해줘야 한다.

요롷게

<Link legacyBehavior href="/">
  <a className={pathname === "/" ? "active" : ""}>
   Home
  </a>
</Link>

Next.js는 서버 컴포넌트와 클라이언트 컴포넌트가 나뉘는 만큼
html 위주의 서버 컴포넌트에 큰 틀의 공용 css와

클라이언트 컴포넌트에 동적인 요소를 사용할 때

module.css 와 jsx style 방법이 굉장히 괜찮게 느껴졌다.

그중 jsx style은 style 태그에 jsx속성을 입력하고,
백틱 `` 사이에 css서식 그대로 사용하면 된다.

서식 적용은 style태그가 속한 component에 한정된다!

예)

      <style jsx>{`
        nav {
          display: flex;
          gap: 10px;
          flex-direction: column;
          align-items: center;
          padding-top: 20px;
          padding-bottom: 10px;
          box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
            rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
        }
        img {
          max-width: 100px;
          margin-bottom: 5px;
        }
        nav a {
          font-weight: 600;
          font-size: 18px;
        }
        .active {
          color: #f00;
        }
        nav div {
          display: flex;
          gap: 10px;
        }
      `}</style>

이상!