Next.js에서는 다양한 방법으로 스타일을 지정할 수 있습니다. 컴포넌트 스타일링부터 전역 스타일링까지 다양한 접근 방식을 지원하므로, 프로젝트의 필요에 따라 적절한 방식을 선택할 수 있습니다. 오늘은 Next.js에서 스타일을 적용하는 방법을 간단히 살펴보겠습니다.
1. CSS Modules
CSS Modules는 컴포넌트 수준의 스타일링을 위한 Next.js의 기본 옵션 중 하나입니다. 파일 이름을 .module.css로 지정하면, 해당 파일의 클래스가 컴포넌트에서만 적용되므로, 스타일의 충돌을 방지할 수 있습니다.
사용방법
1. styles 폴더에 Button.module.css 파일을 생성합니다.
/* styles/Button.module.css */
.button {
background-color: #0070f3;
color: white;
padding: 0.5rem 1rem;
border-radius: 5px;
border: none;
cursor: pointer;
}
2.컴포넌트에서 CSS 모듈을 import하고, 클래스 이름을 객체로 사용하여 스타일을 적용합니다.
import styles from './Button.module.css';
export default function Button() {
return <button className={styles.button}>Click me</button>;
}
2. Tailwind CSS
Next.js에서는 Tailwind CSS와 같은 유틸리티 기반 CSS 프레임워크도 쉽게 통합할 수 있습니다. Tailwind CSS는 클래스 이름만으로 다양한 스타일을 지정할 수 있어 빠른 개발이 가능합니다.
새 프로젝트를 시작할 때 create-next-appNext.js는 Tailwind를 사용할지 묻습니다. yes 를 선택하면 Next.js가 자동으로 필요한 패키지를 설치하고 애플리케이션에서 Tailwind를 구성합니다.
export default function App() {
return (
<button className="bg-blue-500 text-white p-2 rounded hover:bg-blue-700">
Click me
</button>
);
}Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.
tailwindcss.com
3. CSS-in-JS (예: Styled-components, Emotion)
Next.js는 CSS-in-JS 라이브러리를 쉽게 통합할 수 있습니다. styled-components나 @emotion/styled와 같은 라이브러리를 사용하여 JavaScript 파일에서 스타일을 작성할 수 있으며, 동적 스타일링이 필요한 컴포넌트에 특히 유용합니다.
import styled from 'styled-components';
const Button = styled.button`
background-color: #0070f3;
color: white;
padding: 0.5rem 1rem;
border-radius: 5px;
border: none;
cursor: pointer;
&:hover {
background-color: #005bb5;
}
`;
export default function App() {
return <Button>Click me</Button>;
}
4. 전역 스타일 (Global Styles)
Next.js에서는 프로젝트 전반에 걸쳐 적용되는 전역 스타일을 설정할 수 있습니다. 전역 스타일은 프로젝트의 모든 페이지와 컴포넌트에 공통으로 적용되는 스타일을 정의할 때 사용합니다. 예를 들어, 기본 폰트 스타일이나 기본 레이아웃 스타일과 같은 공통 스타일을 설정할 때 유용합니다. 전역 스타일을 적용하려면 app 디렉토리의 layout.tsx 파일에서 전역 CSS 파일을 import하면 됩니다.
1. global.css 파일 생성
@tailwind base;
@tailwind components;
@tailwind utilities;
input[type='number'] {
-moz-appearance: textfield;
appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
2. layout.tsx에서 전역 스타일 적용
import '@/app/ui/global.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
5. clsx 라이브러리
clsx는 여러 CSS 클래스를 조건에 따라 간편하게 조합할 수 있게 해주는 작은 유틸리티 라이브러리입니다. 컴포넌트의 조건부 스타일링을 할 때 특히 유용하며, 클래스 이름을 동적으로 설정하는 코드를 간단하고 읽기 쉽게 작성할 수 있습니다.
import clsx from 'clsx';
import styles from './Button.module.css';
export default function Button({ isPrimary, isDisabled }) {
return (
<button
className={clsx(styles.button, {
[styles.primary]: isPrimary,
[styles.disabled]: isDisabled,
})}
disabled={isDisabled}
>
Click me
</button>
);
}
위 코드에서 clsx는 isPrimary와 isDisabled 값에 따라 클래스 이름을 동적으로 추가합니다. 예를 들어, isPrimary가 true일 경우 styles.primary 클래스가 추가되고, isDisabled가 true일 경우 styles.disabled 클래스가 추가됩니다.
오늘은 이렇게 Next.js CSS 스타일링에 대해 공부해보았다 !
실제로 사용해본 것들이 많아서 큰 어려움은 없었지만 버전에 따라 바뀐 부분이 존재해서 (전역스타일 부분) 잘 찾아보고 공부해야겠다 !
'Next.js' 카테고리의 다른 글
| [Next.js] Next.js 공식문서 6장 데이터베이스 설정 에러 해결 (1) | 2024.11.26 |
|---|---|
| [Next.js] Next.js 페이지 이동 구현하기 (Link, usePathName 사용 ) (0) | 2024.11.25 |
| [Next.js] Next.js 레이아웃 및 페이지 만들기 (App Router) (0) | 2024.11.22 |
| [Next.js] Next.js 글꼴 및 이미지 적용하기 (0) | 2024.11.18 |
| [Next.js] Next.js 시작하기 ( ++ node 버전 이슈 해결 ) (4) | 2024.11.14 |
