Next.js에서는 CSS Modules, Tailwind CSS, CSS-in-JS, Sass와 같은 스타일링 방식을 지원한다.
CSS Modules
CSS Modules는 CSS 클래스의 이름 중복 문제를 피할 수 있는 지역 스코프의 스타일링 방식이다.
.module.css 확장자로 이름을 붙여 스타일을 정의하고 컴포넌트에서 가져와 사용할 수 있다.
styles.module.css
.dashboard {
padding: 24px;
}// layout.tsx
import styles from './styles.module.css'
export default function DashboardLayout({
children,
}) {
return <section **className={styles.dashboard}**>{children}</section>
}전역 스타일링
전역 스타일은 app 디렉토리 안에 있는 어떤 layout, page, component 파일에도 선언할 수 있다.
// app.global.css
body {
padding: 20px 20px 60px;
max-width: 680px;
margin: 0 auto;
}// app/layout.tsx
// 이렇게 적용된 스타일은 어플리케이션의 모든 경로에 적용된다.
**import './global.css'**
export default function RootLayout({
children,
}) {
return (
<html>
<body>{children}</body>
</html>
)
}
⏰ Good things take time