[Nextjs] Nextjs 시작하기 - (3) css 스타일링 하는 법, Link 스타일링 하는 법

nextjs에서 css 스타일링을 하는 방법은 크게 3가지가 있다.

 

1. global css 사용
2. module.css
3. styled jsx

global css는 우리가 일반적으로 import로 css 파일을 가져오는 방식이니 넘어가고, nextjs에서 사용하는 module.css와 styled jsx 방식이 뭔지 알아보겠다.

 

css module 방식

일반 css 파일을 import 해오는 방식의 문제점은, css 스타일이 전역적으로 적용된다는 것이다. 그 문제점을 해결해 줄 수 있는게 바로 css module이다. 이 css module은 Nextjs 뿐만 아니라 React에서도 사용할 수 있는 방법이다.

 

• css module을 적용해 스타일링을 하고 화면을 개발자도구로 검사했을 때, 내가 작성한 className 뒤에 무작위의 숫자가 붙어있는 것을 볼 수 있다. 이를 통해 전역적으로 css가 적용되는 것을 막아준다.

 

예제에서는 Navbar 컴포넌트에 한정되는 css module을 만들어 보겠다.

 

1. module.css로 확장자를 줘서 css 모듈을 만든다.

// NavBar.module.css
.link {
  text-decoration: none;
}

.active {
  color: tomato;
}

2. 컴포넌트에서 css module을 import해온다. [import 해올 때의 css 모듈 이름].[class명] 형식으로 참조해 className에 적용한다.

// NavBar.tsx
import Link from 'next/link';
import styles from './NavBar.module.css';
import { useRouter } from 'next/router';

function NavBar() {
  const router = useRouter();
  return (
    <nav>
      <Link
        href="/"
        className={`${styles.link} ${
          router.pathname === '/' ? styles.active : ''
        }`}
      >
        Home
      </Link>
      <Link
        href="/about"
        className={[
          styles.link,
          router.pathname === '/about' ? styles.active : '',
        ].join(' ')}
      >
        About
      </Link>
    </nav>
  );
}

export default NavBar;

 

styled jsx

컴포넌트에서 html을 작성할 때 <style jsx>라는 태그를 이용해 스타일링 하는 방법이다. css-in-js는 object 방식으로 style을 작성했다면, styled jsx는 컴포넌트의 html 작성 부분에 작성할 수 있다는 차이점이 있다.

 

module.css와 마찬가지로 브라우저에서 개발자도구로 화면을 검사해보면, className 뒤에 무작위 문자열이 붙은 모습을 볼 수 있다. styled jsx도 다른 컴포넌트와 className이 겹치지 않게 해준다.

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

function NavBar() {
  const router = useRouter();
  return (
    <nav>
      <Link href="/" legacyBehavior>
        <a className={router.pathname === '/' ? 'active' : ''}>Home</a>
      </Link>
      <Link href="/about" legacyBehavior>
        <a className={router.pathname === '/about' ? 'active' : ''}>About</a>
      </Link>
      <style jsx>{`
        a {
          text-decoration: none;
        }
        .active {
          color: tomato;
        }
      `}</style>
    </nav>
  );
}

export default NavBar;

 

Link 컴포넌트에 스타일 적용이 안 되는 경우

Nextjs 13부터는 Link 컴포넌트 하위에 a 태그를 작성하지 않도록 되어 있다.

분명 Link 태그는 브라우저에서 찾아보면 a 태그로 표시된다. Link는 a 태그의 wrapper이기 때문이다.

 

하지만 아무리 a 태그에 스타일을 적용해봐도 Link태그에는 스타일링이 적용되지 않는 경우가 있다.

만약 styled jsx 방식을 사용한다면, 다음과 같이 Link 태그에 legacyBehavior 속성을 주고, a 태그도 작성해주자.

Link가 아니라 a 태그에 대해 스타일링을 해주면 된다.

return (
    <nav>
      <Link href="/" legacyBehavior>
        <a className={router.pathname === '/' ? 'active' : ''}>Home</a>
      </Link>
      <Link href="/about" legacyBehavior>
        <a className={router.pathname === '/about' ? 'active' : ''}>About</a>
      </Link>
      <style jsx>{`
        a {
          text-decoration: none;
        }
        .active {
          color: tomato;
        }
      `}</style>
    </nav>
  );