[Next.js] CSS 스타일링 하기

Next.js로 CSS 스타일링 하기

 

1. styled-jsx 사용하기 ( Next.js 기본 내장 )

// style jsx는 컴포넌트 단위로 적용됩니다. ( 다른 컴포넌트로 넘어가면 적용안됨 )
// 기본 사용 방식
<style jsx>{`
  ...스타일 추가
`}</style>

// 자식 컴포넌트까지 모두 적용하기
<style global jsx>{`
  ...스타일 추가
`}

 

2. styled-components 사용하기

[React] styled-components란? / 사용법 (js/ts)

 

3. emotion 사용하기

 

4. css 파일 불러오기 ( 모듈, 전역 ) - Sass도 동일하게 사용

모듈에서 불러오기

module.css 파일로 스타일을 설정하고,
ja파일에 불러와서 적용해준다.

/* components/layout.module.css */

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}

// components/layout.js
import styles from "./layout.module.css";

export default function Layout({ children }) {
  return <div className={styles.container}>{children}</div>;
}

이미지 파일 최적화 방식과 마찬가지로,
화면(뷰포트)에 나타난 부분을 제외한, 나머지 CSS파일을 불러오지 않습니다. ( 페이지 마다 최적화된 번들 생성 )

빌드 시 .css파일을 JavaScript 번들에서 추출하고, Next.js에 의해 자동으로 로드되는 파일을 생성 합니다.

 

전역에서 불러오기

( create-next-app을 사용해서 프로젝트를 만들었다면, 기본적으로 설정되어 있습니다. )

styles/global.css 파일을 만들고,

pages/_app.js 파일에 css 파일을 불러와준다.

/* styles/global.css */

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  font-size: 18px;
}

* {
  box-sizing: border-box;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

// pages/_app.js
import '../styles/global.css'

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

 

5. css-in-js 사용하기

Next.js는 기본적으로 css-in-js를 지원한다.

HTML태그 내부에 style={{ 옵션 : 값 }} 형식으로 스타일을 지정할 수 있다!

import type { NextPage } from "next";

const Home: NextPage = () => {
  return (
    <div>
      <h1 style={{ color: "red" }}>Popol</h1>
    </div>
  );
};

export default Home;

 

5. scss, sass 사용하기

// nest.config.js
const path = require('path');

// sassOptions 지정해주기
module.exports = {
  reactStrictMode: true,
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
};