Next.Js - styled-jsx

Styled-JSX

Styled-jsx는 Next.JS에서만 css를 사용하는 고유의 방법이다.

Styled-jsx 예시

<style jsx>{`
nav {
	background-color: tomato;
}
a {
	text-decoration : none;
}
`}</style>

기본적으로 html에 있는 <style>태그뒤에 jsx를 추가하고 {``} (대괄호와 백틱) 안에 css를 넣는 방식

router의 path를 따라서 색상을 변경 할 수도 있다.

// 12ver
 <Link href="/">
 	<a className={router.pathname === "/" ? "active" : ""}>
  Home
  </a>
 </Link>
<br />

 <Link  href="/about">
 <a className={router.pathname === "/about" ? "active" : ""}>
 about
 </a>
 </Link>

예를 들어 className을 active로 설정하면

.active {
            color: blue; 
        }

className(active)에 따라 color를 변경할 수 있게된다.

styled-jsx의 장점

각 component마다 style이 중복되지(덮어쓰기) 않는다.

예시

import NavBar from "../components/NavBar";

export default function Home() {

    return <div>
<NavBar/>
<h1 className="active"> Hello </h1>
<style jsx>{`
 a {
color : red;
 }
 `}</style>
</div>

}

위 코드는 index.js

예를 들어 위처럼 Navbar.js가 아닌 다른 파일(index.js)에서 styled-jsx를 설정하면 Navbar의 a에는 영향을 주지 못한다.

각 style-jsx안에서만 코드를 적용해주기 때문.

만약 전역에 추가하고 싶을 경우 예시⬇️

<style jsx global>
a {
   color : green;
 }
 `}</style>

Custom App (global)

위에 코드 처럼 global을 추가해 주는 것은 간단하다.
그런데 만약 한 곳이 아닌 여러 곳에 추가하려고 한다면 중복된 코드들을 복붙하게 될것이다.
중복을 방지하기 위해 Custom App을 사용하자.

---

1. pages 폴더에 _app.js라는 이름의 파일을 생성
   
   - _app.js라는 파일명으로 생성해야 한다.
   - js는 상단에 위치한 _app.js를 확인 후 index.js 등 아래에 위치한 파일들의 내용물을 렌더링한다.
   
2. Component, pageProps 라는 두 개의 prop들을 추가한다.
   • 작동방식 : 첫 번째 prop에 about.js가 입력된다.
     -> 두 번째 prop이 첫 번째의 내용을 받아와 리턴(렌더링)해준다.
     

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

---

global css

global css파일은 오로지 module에서만 import할 수 있다.
즉 _app.js에서는 import가 가능하다.

import NavBar from "../components/NavBar";
import "../styles/globals.css";
export default function App({Component, pageProps}){
    return (
    <>
    <NavBar/>
    <Component {...pageProps}/>
    <style jsx global>{`
        a {
            color : green;
        }
        `}</style>
    </>
    );
}

최종 코드

NavBar를 불러 오므로써 다른 파일에 중복코드 없음
global.css 파일을 import
jsx global을 전역에 코드추가, 중복코드 없음