Next.js에서 스타일링: CSS, Sass, Styled Components 사용

Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)이 가능하며, 클라이언트 사이드 네비게이션을 지원합니다. 이 글에서는 Next.js 애플리케이션에서 사용할 수 있는 주요 스타일링 방법인 CSS, Sass, 그리고 Styled Components에 대해 살펴보고, 각각을 프로젝트에 적용하는 방법을 설명합니다.

CSS

CSS(Cascading Style Sheets)는 가장 기본적인 스타일링 방법 중 하나입니다. Next.js에서 CSS를 사용하는 방법은 매우 간단합니다. Next.js는 CSS 파일을 직접 불러오는 것을 지원하기 때문에, 아래와 같은 단계를 통해 CSS를 사용할 수 있습니다.

1. CSS 파일 생성

프로젝트 root 경로에서 styles 폴더를 생성하고, global.css 파일을 만듭니다.

css
/* styles/global.css */
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

2. CSS 파일을 글로벌하게 적용

Next.js는 커스텀 _app.js 파일을 통해 전역 설정을 관리할 수 있습니다. 글로벌 CSS 파일을 _app.js에서 불러오도록 설정합니다.

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

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

이제 global.css에 정의된 스타일이 애플리케이션의 모든 페이지에 적용됩니다.

Sass

Sass(Syntactically Awesome Style Sheets)는 CSS 전처리기로, 변수를 사용하거나 네스팅 기능을 제공하여 CSS 작성의 효율성을 높입니다. Next.js는 기본적으로 Sass를 지원하므로, 추가적인 설정 없이 바로 사용할 수 있습니다.

1. Sass 설치

먼저 프로젝트에 Sass를 설치합니다.

bash
npm install sass

2. Sass 파일 생성

styles 폴더에 global.scss 파일을 생성합니다.

scss
/* styles/global.scss */
$primary-color: #4CAF50;

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  background-color: $primary-color;
}

3. Sass 파일을 글로벌하게 적용

_app.js 파일에서 CSS 파일 대신 Sass 파일을 불러옵니다.

javascript
// pages/_app.js
import '../styles/global.scss';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

이제 global.scss에 정의된 스타일이 애플리케이션의 모든 페이지에 적용됩니다.

Styled Components

Styled Components는 CSS-in-JS 라이브러리로, 컴포넌트 단위로 스타일을 작성할 수 있게 해줍니다. 이 방법은 리액트 컴포넌트와 CSS를 동일한 파일에서 관리할 수 있는 큰 장점을 제공하며, 스타일의 적용 범위를 컴포넌트 내로 제한할 수 있습니다.

1. Styled Components 설치

먼저 프로젝트에 Styled Components를 설치합니다.

bash
npm install styled-components
npm install @types/styled-components

2. Styled Components 사용

이제 Styled Components를 사용하여 스타일링을 할 수 있습니다. 예를 들어, Button 컴포넌트를 만들어보겠습니다.

javascript
// components/Button.js
import styled from 'styled-components';

const Button = styled.button`
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
`;

export default Button;

3. 컴포넌트 사용하기

Button 컴포넌트를 페이지에서 사용합니다.

javascript
// pages/index.js
import Button from '../components/Button';

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <Button>Click me</Button>
    </div>
  );
}

이와 같이 styled-components를 사용하면, 컴포넌트 단위로 스타일을 관리할 수 있으며 이는 코드의 유지보수성을 크게 향상시킵니다.

결론

Next.js에서 스타일링 방법은 여러 가지가 있습니다. 기본적인 CSS부터 Sass, 그리고 컴포넌트 기반의 스타일링을 가능하게 하는 Styled Components까지, 각각의 방법은 장단점이 있습니다. 프로젝트의 요구 사항과 팀의 선호도에 따라 적절한 스타일링 방법을 선택할 수 있습니다. 이 글에서 소개한 방법들을 통해 Next.js 애플리케이션에 효과적으로 스타일을 적용해보시기 바랍니다.