Next.js style 적용은 어떻게 할까?

Next.js에서 Style을 적용하는 방법에는 어떤 것이 있을까?

① CSS module을 사용하는 방법

가장 먼저 css module을 사용하는 방법을 적용해보았는데 NavBar.js에 CSS를 적용하기 위해 NavBar.module.css라는 파일을 생성해주었다.

그 후 css 파일 안에서 클래스 선택자로 스타일을 만들어주었고 이를 NavBar.js에 불러와 사용하였다.

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

.active {
  color: tomato;
}

link의 경우 두가지 a태그에 모두 적용이 되어야하고, active의 경우 조건부로 true인 경우에만 적용이 되도록 해야하는데 그럴 때는 ``을 이용하거나 className을 배열로 만들어준 후 공백을 사이에 두고 join 하는 방법을 적용해볼 수 있었다.

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

export default function NavBar() {
  const router = useRouter();
  return (
    <nav>
      <Link href='/'>
      	// ``을 활용하는 방법
        <a  className={`${styles.link} ${router.pathname === "/" ? styles.active : ""}`}>Home</a>
      </Link>
      <Link href='/about'>
	    // 배열로 만들어서 공백을 사이에 두고 join하는 방법
        <a className={[styles.link, router.pathname === "/about" ? styles.active : ""].join(" ")}>About</a>
      </Link>
    </nav>
  );
}

② styled jsx를 사용하는 방법(Next.js의 고유한 방법)

두번째로는 Next.js에서 사용하는 고유한 방법으로 처음 보는 css 적용 방식이었다. styles jsx라는 것을 이용하니 컴포넌트 내에서 클래스를 독립적으로 사용할 수 있어 다른 컴포넌트에서 사용하는 className과 겹칠 것을 걱정하지 않아도 된다.

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

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

③ global styles 적용하기

각각의 컴포넌트에서 styles를 적용할 수 있지만 전역으로 사용하고 싶을 때는 글로벌 스타일을 적용해야한다. 그럴 때는 _app.js라는 파일을 만들어 그 안에서 적용하면 되는데 next.js는 index.js를 보여주기 전에 _app.js를 먼저 확인하고 index.js를 렌더링하기 때문에 _app.js에서 스타일을 적용시켜주면 된다. _app.js의 이름은 무조건 이거여야할 것!

import NavBar from "../components/NavBar";
import "../styles/globals.css";

// component와 pageProps를 받아오면서 <Component> 자리에서 각각의 컴포넌트를 보여줌
// 나머지 Nav나 style은 전체 적용
export default function App({Component, pageProps}) {
  return (
    <>
      <NavBar/>
      <Component {...pageProps}/>
      <style jsx global>{`
        a {
          color: white;
        }
      `}</style>
    </>
  );
}