React에서 styled-components 라이브러리를 사용하여 JS 내에서도 CSS를 작성 할 수 있던 것처럼
Next.js에서는 CSS-in-JS라는 라이브러리의 styled-jsx를 사용하여 React 구성 요소 내에서 CSS를 작성하고,
CSS 스타일의 범위를 지정(다른 구성 요소는 영향을 받지 않습니다.) 할 수 있습니다.
Next.js에는 styled-jsx에 대한 지원이 내장 되어 있지만
styled-components 또는 Emotion과 같은 다른 인기 있는 CSS-in-JS 라이브러리를 사용 할 수도 있습니다.
1. CSS 작성 및 가져오기
Next.js에는 CSS 및 Sass에 대한 지원이 내장되어 있기 때문에 .css나 .scss로 파일을 가져 올 수 있습니다.
2. 레이아웃 구성 요소
먼저 모든 페이지에서 공유할 레이아웃 구성 요소를 만들겠습니다.
1) components라는 최상위 디렉토리를 생성합니다.
2) components 디렉토리 내부에 layout.js라는 파일을 생성하고 아래와 같이 작성합니다.
export default function Layout({ children }) {
return <div>{children}</div>
}3) pages/posts/first-post.js에 Layout을 import 해오고, 가장 바깥쪽 구성 요소로 추가합니다.
import Link from "next/link";
import Head from "next/head";
import Script from "next/script";
import Layout from "../components/layout";
export default function FirstPost() {
return (
<Layout>
<Head>
<title>First Post</title>
</Head>
<Script
src="https://connect.facebook.net/en_US/sdk.js"
strategy="lazyOnload"
onLoad={()=>{console.log(`script loaded correctly, window.FB has been populated`)}}
/>
<h1>First Post</h1>
<h2>
<Link href="/">
<a>Back to home</a>
</Link>
</h2>
</Layout>
);
}3. CSS 추가
Layout 구성 요소에 몇가지 스타일을 추가 해보겠습니다.
CSS 모듈을 사용하여 React 구성 요소에서 CSS 파일을 가져 올 수 있습니다.
1) styles 디렉토리 내에 layout.module.css라는 이름으로 파일을 하나 생성합니다.
(❗CSS 모듈을 사용하기 위해서는 CSS 파일 이름이 .module.css로 끝나야 합니다. )
2) 아래와 같이 CSS를 작성합니다.
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
border: 1px solid red;
}3) CSS를 적용하고자 하는 파일 상단에 CSS 모듈을 import 해옵니다.
import layoutStyle from "../../styles/layout.module.css";4) components/layout.js에서 CSS를 적용 할 요소에 아래와 같이 className으로 CSS 모듈을 적용합니다.
export default function Layout({ children }) {
return <div className={layoutStyle.container}>{children}</div>;
}
4. 고유한 클래스 이름을 자동으로 생성
이제 브라우저의 devtools에서 HTML을 살펴보면 div 구성요소에 의해
렌더링된 Layout의 클래스 이름이 다음과 같은 것을 볼 수 있습니다.
이것이 CSS 모듈이 하는 일입니다. 고유한 클래스 이름을 자동으로 생성합니다.
CSS 모듈을 사용하는 한 클래스 이름 충돌에 대해서는 걱정할 필요가 없어집니다.
또한 Next.js의 코드 분할 기능은 CSS 모듈에서도 작동합니다.
각 페이지에 대해 최소한의 CSS 로드를 보장합니다. 이로 인해 번들 크기가 더 작아집니다.
CSS 모듈은 빌드 시 JavaScript 번들에서 추출되어 Next.js에 의해 자동으로 로드되는 파일을 생성합니다.
Learn | Next.js
Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more.
nextjs.org
'프레임워크 > Next.js' 카테고리의 다른 글
| [Next.js] Assets(자산), Meta Data 및 CSS (0) | 2022.02.17 |
|---|---|
| [Next.js] 전역 CSS (0) | 2022.02.17 |
| [Next.js] 외부 자바스크립트 (0) | 2022.02.17 |
| [Next.js] Meta Data (0) | 2022.02.17 |
| [Next.js] Image (0) | 2022.02.17 |
댓글