[NextJS] NextJS_CSS

Next JS

 

.module.css 파일 생성

CSS 를 적용할 파일과 같은 폴더에 파일명.module.css 파일 생성
ex) NavBar.js
      NavBar.module.css

 

.active {
  color: tomato;
}
.link {
  text-decoration: none;
}

코드를 css에 적고

 

import styles from "./NavBar.module.css"; 📍import 해주기

				<a
          className={`${styles.link} ${ 
            router.pathname === "/" ? styles.active : ""
          }`} 📍 백틱 사용
        >
          Home
        </a>

				<a
	          className={[ 📍 배열 사용
            styles.link,
            router.pathname === "/about" ? styles.active : "",
          ].join(" ")} 📍 join은 배열내에 것들을 합쳐줌
        >
          About
        </a>

📌 백틱으로 여러개의 스타일을 주는방법과 배열로 주는 방법 2가지가 존재.

.컴포넌트 이름 {CSS 작성} 적용할 파일에 연결

 

< style jsx>< /style>

module.css 와 다른 방법으로 css를 연동하는방법

 

<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: white;
        }
      `}</style>
    </nav>

 

• 사용할 컴포넌트 안에서 style jsx를 열어주고 css를 적기만하면 끝난다.
  ➞ import 하지 않아도되는 장점과 클래스네임을 일일히 기억할 필요가 없는 장점이 있음.

 

• module.css와 마찬가지로 다른 컴포넌트에서 같은 이름을 사용해도 겹치지 않는다.
  ➞ 무작위로 추가적인 클래스네임이 생성되기때문 → 변수이름짓는데 자유로워지며 충돌을 피할 수 있는 장점이있다.

 

Globals Style 와 Custom App

 

NextJS에서 globalsStyle을 적용하려면 appComponent를 custom해줘야 한다.

⭐️ _app.js 파일을 수정하면 서버를 재시작 해야함 ⭐️

 

기본적으로 숨어져있는 app을 수정하려면

 

1. pages에 _app.js를 만들어야한다.

 

 

2. _app.js에서 App component를 생성하고, Component와 pageProps를 parameter로 받은 후 불러와준다.

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

 

3. 그후 styles폴더안의 globals.css 를 불러온다. (module이 아닌 css는 커스텀app에서만 불러올 수 있음)

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

4. 여러 페이지에 공통으로 사용되는 navBar나 footer를 임포트해준다.

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

5. style jsx global 을 통해 추가로 글로벌스타일을 주거나, globals.css를 수정하여 글로벌 스타일을 줄 수 있다.

import NavBar from "../components/NavBar";
import "../styles/globals.css";
export default function App({ Component, pageProps }) {
  return (
    <>
      <NavBar />
      <Component {...pageProps} />
      <style jsx global>
        {`
          * {
            font-size: 18px;
          }
        `}
      </style>
    </>
  );
}