[Next.js] Next 공식 튜토리얼 진행하기

728x90

이번 글은 Next.js 공식 튜토리얼을 번역한 글입니다.

공식 튜토리얼을 따라하면 Next.js 의 동작원리와 개발 방식에 대해 학습하기 쉽고 잘 쓰여진 튜토리얼이라고 생각되어 번역하게 되었습니다.

오타 또는 오역된 부분이 있다면 댓글 부탁드립니다.

Learn Next.js: CSS Styling | Next.js

Style your Next.js application with Tailwind and CSS modules.

nextjs.org

다음은 Next.js 애플리케이션 스타일링 방법에 대한 설명입니다.

이번 챕터에서는...

다음 주제를 다룹니다.

애플리케이션에 전역 CSS 파일을 추가하는 방법
두 가지 스타일링 방법: Tailwind와 CSS 모듈
clsx 유틸리티 패키지를 사용해 조건부로 클래스 이름을 추가하는 방법

전역 스타일(Global Styles)

/app/ui 폴더에 global.css 파일이 있는 것을 볼 수 있습니다. 이 파일을 사용하여 모든 경로에 CSS 규칙을 적용할 수 있으며, CSS 리셋 규칙, HTML 요소(예: 링크 등)에 대한 사이트 전역 스타일 등을 추가할 수 있습니다.

global.css 파일은 애플리케이션 내의 어느 컴포넌트에서도 가져올 수 있지만, 일반적으로 최상위 컴포넌트에 추가하는 것이 좋습니다. Next.js에서는 이를 root layout에 추가하는 것이 보통입니다.

전역 스타일을 애플리케이션에 추가하려면 /app/layout.tsx 파일로 이동하여 global.css 파일을 가져옵니다.

// /app/layout.tsx

import '@/app/ui/global.css';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

개발 서버가 실행 중이라면, 변경 사항을 저장하고 브라우저에서 미리보기를 확인합니다. 이제 홈 페이지가 스타일링된 것을 볼 수 있을 것입니다.

질문: 아무 CSS 규칙도 추가하지 않았는데, 스타일은 어디에서 왔나요?

global.css 파일을 보면 몇 가지 @tailwind 디렉티브가 있는 것을 볼 수 있습니다.

// /app/ui/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind

Tailwind는 유틸리티 클래스를 직접 TSX 마크업에 작성하여 빠르게 스타일을 적용할 수 있는 CSS 프레임워크입니다.

Tailwind에서는 클래스 이름을 추가하여 요소를 스타일링합니다. 예를 들어, "text-blue-500" 클래스를 추가하면 <h1> 텍스트가 파란색으로 변경됩니다.

<h1 className="text-blue-500">I'm blue!</h1>

CSS 스타일이 전역적으로 공유되지만, 각 클래스는 개별적으로 요소에만 적용됩니다. 따라서 요소를 추가하거나 삭제해도 별도의 스타일시트를 유지하거나 스타일 충돌을 걱정할 필요가 없고, 애플리케이션이 확장되어도 CSS 번들의 크기가 커지지 않습니다.

create-next-app으로 새로운 프로젝트를 시작할 때, Next.js는 Tailwind 사용 여부를 묻습니다. '예'를 선택하면 Next.js가 필요한 패키지를 자동으로 설치하고 Tailwind 설정을 완료합니다.

/app/page.tsx 파일을 보면 예제에서 Tailwind 클래스를 사용하고 있는 것을 확인할 수 있습니다.

// /app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
        // ...
      </div>
    </main>
  );
}

Tailwind가 처음이라면 걱정하지 마세요. 이 과정에서 필요한 모든 컴포넌트 스타일을 미리 설정해 두었습니다.

Tailwind와 함께 실습해봅시다! 아래 코드를 복사하여 /app/page.tsx의 <p> 요소 위에 붙여넣으세요.

// /app/page.tsx

<div
  className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black"
/>

퀴즈: 방금 배운 내용을 테스트해봅시다.

위 코드 스니펫을 사용했을 때 어떤 모양이 보이나요?

A: 노란색 별
B: 파란색 삼각형
C: 검은색 삼각형
D: 빨간색 원

정답: C

CSS 모듈(CSS Modules)

CSS 규칙을 JSX와 분리하거나 전통적인 CSS 규칙 작성을 선호한다면, CSS 모듈을 사용하는 것도 좋은 방법입니다.

CSS 모듈은 자동으로 고유한 클래스 이름을 생성하여 CSS가 컴포넌트에 국한될 수 있도록 합니다. 따라서 스타일 충돌을 걱정하지 않아도 됩니다.

이 예제에서 동일한 결과를 CSS 모듈로 얻는 방법을 알아보겠습니다.

/app/ui 폴더에 home.module.css라는 새로운 파일을 만들고 다음 CSS 규칙을 추가합니다.

// /app/ui/home.module.css

.shape {
  height: 0;
  width: 0;
  border-bottom: 30px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

그런 다음 /app/page.tsx 파일에서 스타일을 가져와서, 추가한 <div>의 Tailwind 클래스 이름을 styles.shape로 변경합니다.

// /app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import styles from '@/app/ui/home.module.css';

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className={styles.shape} />
      // ...
    </main>
  );
}

변경 사항을 저장하고 브라우저에서 미리보기를 확인하면, 이전과 동일한 모양을 확인할 수 있습니다.

Tailwind와 CSS 모듈은 Next.js 애플리케이션을 스타일링하는 가장 일반적인 두 가지 방법입니다. 둘 중 하나를 사용하느냐는 선호도 문제입니다. 심지어 같은 애플리케이션에서 둘 다 사용할 수도 있습니다!

퀴즈: 방금 배운 내용을 테스트해봅시다.

CSS 모듈을 사용할 때의 장점은 무엇일까요?

A: CSS 클래스의 전역 범위를 늘려 여러 파일에 걸쳐 쉽게 관리할 수 있습니다.
B: CSS 클래스를 기본적으로 컴포넌트에 로컬 범위로 제한하여 스타일링 충돌 위험을 줄입니다.
C: CSS 파일을 자동으로 압축 및 최소화하여 페이지 로딩 속도를 높입니다.

정답: B

clsx 라이브러리를 사용한 클래스 이름 토글링

상태나 조건에 따라 요소의 스타일을 동적으로 변경해야 하는 경우도 있습니다.

clsx는 클래스를 쉽게 토글할 수 있는 라이브러리입니다. 더 자세한 내용을 알고 싶다면 clsx 문서를 참고해보세요. 기본 사용법은 다음과 같습니다:

예를 들어 status라는 속성을 받는 InvoiceStatus 컴포넌트를 만들고, 상태가 paid일 때는 색상을 초록색으로, pending일 때는 회색으로 표시하고 싶다고 가정합니다.

clsx를 사용하여 다음과 같이 조건부로 클래스를 적용할 수 있습니다.

// /app/ui/invoices/status.tsx

import clsx from 'clsx';

export default function InvoiceStatus({ status }: { status: string }) {
  return (
    <span
      className={clsx(
        'inline-flex items-center rounded-full px-2 py-1 text-sm',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        }
      )}
    >
      // ...
    </span>
  );
}

퀴즈: 방금 배운 내용을 테스트해봅시다.

코드 편집기에서 "clsx"를 검색하세요. 어떤 구성 요소가 이를 사용하여 클래스 이름을 조건부로 적용되나요?

A: `status.tsx`와 `pagination.tsx`
B: `table.tsx`와 `status.tsx`
C: `nav-links.tsx`와 `table.tsx`

정답: A

기타 스타일링 솔루션

위에서 다룬 방법 외에도 다음과 같은 방식으로 Next.js 애플리케이션에 스타일을 추가할 수 있습니다:

.css 및 .scss 파일을 가져올 수 있는 Sass
styled-jsx, styled-components, emotion과 같은 CSS-in-JS 라이브러리

자세한 내용은 CSS 문서를 확인해보세요.

728x90

'Frontend > Next.js' 카테고리의 다른 글

[Next.js] Next 공식 튜토리얼 진행하기 - Chapter 3 (4)	2024.11.11
[Next.js] Next 공식 튜토리얼 진행하기 - Chapter 1 (1)	2024.11.10
[Next.js] Next 공식 튜토리얼 진행하기 - Introduction (2)	2024.11.09

[Next.js] Next 공식 튜토리얼 진행하기 - Chapter 2

이번 챕터에서는...

전역 스타일(Global Styles)

Tailwind

퀴즈: 방금 배운 내용을 테스트해봅시다.

CSS 모듈(CSS Modules)

퀴즈: 방금 배운 내용을 테스트해봅시다.

clsx 라이브러리를 사용한 클래스 이름 토글링

퀴즈: 방금 배운 내용을 테스트해봅시다.

기타 스타일링 솔루션

'Frontend > Next.js' 카테고리의 다른 글

티스토리툴바