Next.js(next/link)에서 현재 페이지에 활성 클래스(active class)를 설정하는 방법

Next.js(next/link)에서 현재 페이지에 활성 클래스(active class)를 설정하는 방법이 됩니다.
네비게이션이므로, 루트와 일치하는 링크의 스타일을 바꾸고 싶을 때에 편리할까 생각합니다.
(Vue.js의 active-class 이미지입니다)

Active Link components 만들기

ActiveLink.tsx

import { withRouter } from 'next/router'
import Link from 'next/link'
import React, { Children } from 'react'

const ActiveLink = ({ router, children, ...props }: any) => {
  const child = Children.only(children)

  let className = child.props.className || ''
  if (router.pathname === props.href && props.activeClassName) {
    className = `${className} ${props.activeClassName}`.trim()
  }

  delete props.activeClassName

  return <Link {...props}>{React.cloneElement(child, { className })}</Link>
}

export default withRouter(ActiveLink)

next/link 에는, 디폴트로 액티브 클래스를 붙이는 기능은 없기 때문에, next/link (을)를 랩 해 새로운 components를 만듭니다.

만든 Active Link components 로드

import ActiveLink from '../components/common/ActiveLink'

const Home = () => {
  return (
    <div>
      <ActiveLink href="/" activeClassName="bg-red-200"> // ルートが一致した時のstyle(active class)
        <a className="p-2">Home</a> // 共通のスタイル
      </ActiveLink>
      <ActiveLink href="/demo" activeClassName="bg-red-200">
        <a className="p-2">Demo</a>
      </ActiveLink>
      <ActiveLink href="/demo2" activeClassName="bg-red-200">
        <a className="p-2">Demo2</a>
      </ActiveLink>
    </div>
  )
}

export default Home

위에서 만든 ActiveLink.tsx를 사용합니다.activeClassName 에 활성 클래스를 설정할 수 있습니다.

참고