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

Active Link components 만들기

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)

만든 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

참고