[노마드코더] #3 CSS, Custom App

CSS Modules

Next.js에는 css를 적용하는 다양한 방식이 있는데,

먼저 module.css 파일을 통해 css 모듈을 사용하는 방식을 알아보자

 

[components/NavBar.module.css]

.link {
  text-decoration: none;
}
 
.active {
  color: blue;
}
 
.inactive {
  color: grey;
}

module.css 파일을 생성해 클래스 선택자 형태로 넣어준다

* 파일은 원하는 곳에 원하는 이름으로 생성해도 된다 

* 서로 다른 모듈 파일에서 같은 선택자 이름을 사용해도 문제가 없다!

 

[components/NavBar.js]

import styles from "./NavBar.module.css";
...
<a
  className={`${styles.link} ${
    router.pathname === "/" ? styles.active : styles.inactive
  }`}
>
...
<a
  className={[
    styles.link,
    router.pathname === "/about" ? styles.active : styles.inactive,
  ].join(" ")}
>

원하는 className에 객체를 문자열로 넣으면 적용되며 복수 적용도 가능하다

* 이름을 꼭 styles로 import하지 않아도 된다

 

Styles JSX

style jsx를 활용해 js파일 내부에서 CSS를 적용해보자

 

[components/NavBar.js]

  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>{`
        a {
          text-decoration: none;
        }
        .active {
          color: blue;
        }
      `}</style>
    </nav>
  );

ClassName이나 태그로 해당 js 파일 내부의 컴포넌트들을 스타일링 할 수 있다

 

Custom App

style jsx global로 해당 Page에 보여지는 모든 요소들에게 글로벌 스타일을 적용할 수 있다

 

[pages/index.js]

export default function Home() {
  return (
    <div>
      <h1>Hello</h1>
      <style jsx global>{`
        a {
          color: red;
        }
      `}</style>
    </div>
  );
}

CRA의 App.js역할을 하는 _app.js 파일을 추가하고 App 전체에 글로벌 스타일을 적용해보자

 

[pages/_app.js]

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
    </>
  );
}

이렇게 선언하면 해당 파일이 App의 모든 Page를 가져오는 App.js 역할을 하게 된다

import NavBar from "../components/NavBar";
import "../styles/globals.css";
 
export default function App({ Component, pageProps }) {
  return (
    <>
      <NavBar />
      <Component {...pageProps} />
    </>
  );
}

App.js와 마찬가지로 특정 컴포넌트가 모든 화면에 보여지도록 할 수 있고,

일반 css 파일을 import해 App 전체에 글로벌 스타일을 적용할 수 있다!

* 컴포넌트나 Page는 모듈화된 css 파일만 import 할 수 있다

 

본 내용은 노마드코더의 'NextJS 시작하기'를 바탕으로 작성되었습니다