[Next.js] Link 라우팅 : 현재경로 active CSS 스타일링

React 에서는 네비게이션 라우팅 구현시,

NavLink 를 사용하면, 해당 네비 메뉴가 선택됐을 때 자동으로 className에 active가 생겨서

선택된 네비 메뉴에만 스타일을 주기가 편했다.

 

하지만 Next.js 에서 Link 를 사용하면, 이 기능이 제공되지 않는다.

따라서 네비 메뉴가 선택되면, 직접 className에 active 값을 추가해줘야 한다.

---

# Next.js에서 Link 선택 시, Active 효과 부여 방법

=> 현재 경로가 선택된 메뉴와 동일할 때만 class에 active를 설정해주고 스타일링한다.

 

1. 컴포넌트 JS 코드

1) useRouter() 를 통해 현재 경로를 취득한다.

2) 현재 경로가 선택된 네비 메뉴와 동일할 때만 className에 active를 설정한다.

* Link 태그 하위에 a 태그를 작성해주는게 팁이다.

import Link from 'next/link';
import { useRouter } from 'next/router';
import React from 'react';

// CSS Module 사용했다.(이건 상황에 따라 다름)
import styles from './Nav.module.css';

function Nav() {
  // 현재 경로 취득
  const router = useRouter();
  
  return (
    <nav>
      <Link href={'/'}>
        {/* 삼항연산자로 class 에 active를 부여한다. */}
        <a className={router.pathname === '/' ? styles.active : ''}>메인</a>
      </Link>
      
      <Link href={'/test'}>
        <a className={router.pathname === '/test' ? styles.active : ''}>test</a>
      </Link>
    </nav>
  );
}

export default Nav;

 

2. 스타일 CSS코드

- class가 active 일 때만 효과를 준다.

a.active {
  color: green;
  font-weight: bold;
}

 

 

<실행 결과>

---

!!!! Next.JS 13버전부터 변경 사항!!!!

next 가 <Link> 태그를 a태그로 렌더링 해준다.

즉, 기존에 a 태그에 넣었던 내용을 Link 컴포넌트에 넣어주면 된다.

import Link from 'next/link';
import { useRouter } from 'next/router';
import React from 'react';

// CSS Module 사용했다.(이건 상황에 따라 다름)
import styles from './Nav.module.css';

function Nav() {
  // 현재 경로 취득
  const router = useRouter();
  
  return (
    <nav>
      <Link href={'/'} className={router.pathname === '/' ? styles.active : ''}>
      	메인
      </Link>
      
      <Link href={'/test'} className={router.pathname === '/test' ? styles.active : ''}>
      	test
      </Link>
    </nav>
  );
}

export default Nav;

- 참고: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor