Next.js에서 스타일 적용하는 방법에 대해 알아보겠습니다.
1. CSS-in-JS
가장 간단한 방법은 인라인 스타일입니다.
1 | export default function Home() { |
2. CSS Modules
Next.js는 [name].module.css 파일 명명 규칙을 사용하여 CSS Module을 지원합니다.
Common.module.css
파일을 생성하고 스타일을 다음과 같이 작성합니다. 중요한 것은 .module.css 패턴을 사용하는 것입니다.
1 | .nav { |
생성된 module을 import 해서 사용합니다.
1 | import styles from './Common.module.css'; |
여러 개의 스타일을 적용할 수 있습니다.
1 | import styles from './Common.module.css'; |
또는 join()
함수를 사용해 적용합니다.
1 | import styles from './Common.module.css'; |
3. Styled JSX
격리된 범위 CSS 에 대한 지원을 제공하기 위해 styled-jsx를 번들로 제공합니다.
styled-jsx를 사용하는 컴포넌트는 다음과 같습니다. style에 jsx
prop 을 넣고 중괄호({})와 백틱(`)을 사용하여 작성합니다.
1 | <style jsx>{` |
1 | export default function Home() { |
Global Styles 설정하는 방법은 global
Prop 을 추가하면 됩니다.
1 | <style jsx global>{` |
VSCode 익스텐션
Styled JSX 사용 시 추천 VSCode 익스텐션입니다.
- styled-jsx : 하이라이팅, 코드 가독성에 도움이 됨
- styled-jsx Language Server : 자동완성