[Next.js] Styles 사용 방법

Next.js에서 스타일 적용하는 방법에 대해 알아보겠습니다.

1. CSS-in-JS

가장 간단한 방법은 인라인 스타일입니다.

1
2
3
4
5
6
7
export default function Home() {
return (
<div>
<div style={{ color: 'red' }}>Hello</div>
</div>
);
}

2. CSS Modules

Next.js는 [name].module.css 파일 명명 규칙을 사용하여 CSS Module을 지원합니다.

Common.module.css파일을 생성하고 스타일을 다음과 같이 작성합니다. 중요한 것은 .module.css 패턴을 사용하는 것입니다.

1
2
3
4
5
6
7
8
9
.nav {
display: flex;
justify-content: space-between;
background-color: red;
}

.text {
color: blue;
}

생성된 module을 import 해서 사용합니다.

1
2
3
4
5
6
7
8
9
10
import styles from './Common.module.css';

export default function Home() {
return (
<div>
<nav className={styles.nav}></nav>
<h1>Hello</h1>
</div>
);
}

여러 개의 스타일을 적용할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
import styles from './Common.module.css';

export default function Home() {
return (
<div>
<nav className={`${styles.nav} ${styles.text}`}></nav>
<h1>Hello</h1>
</div>
);
}

또는 join() 함수를 사용해 적용합니다.

1
2
3
4
5
6
7
8
9
10
import styles from './Common.module.css';

export default function Home() {
return (
<div>
<nav className={[styles.nav, styles.text].join(' ')}></nav>
<h1>Hello</h1>
</div>
);
}

3. Styled JSX

격리된 범위 CSS 에 대한 지원을 제공하기 위해 styled-jsx를 번들로 제공합니다.

styled-jsx를 사용하는 컴포넌트는 다음과 같습니다. style에 jsx prop 을 넣고 중괄호({})와 백틱(`)을 사용하여 작성합니다.

1
2
3
<style jsx>{`
CSS 스타일..
`}</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export default function Home() {
return (
<div>
<nav></nav>
<h1>Hello</h1>
<style jsx>{`
nav {
background-color: red;
}
h1 {
color: blud;
}
`}</style>
</div>
);
}

Global Styles 설정하는 방법은 global Prop 을 추가하면 됩니다.

1
2
3
4
5
<style jsx global>{`
body {
background: black;
}
`}</style>

VSCode 익스텐션

Styled JSX 사용 시 추천 VSCode 익스텐션입니다.

  • styled-jsx : 하이라이팅, 코드 가독성에 도움이 됨
  • styled-jsx Language Server : 자동완성

참고

Share