728x90

Next.js 14에서의 스타일링 방법을 알아보겠습니다.
특히, Next.js 공식 팀이 권장하는 테일윈드 CSS를 중심으로 설명드리겠습니다.

 

테일윈드(Tailwind CSS)

테일윈드는 Next.js 공식 팀이 권장하는 스타일링 방법 중 하나입니다. 설치 과정에서 테일윈드 설치 여부를 물어보며, 이를 통해 손쉽게 스타일링을 시작할 수 있습니다.

Next.js 보일러 플레이트 생성 과정에서 테일윈드 사용 여부를 Yes로 선택하면, 별다른 설정 없이 자동으로 포함됩니다. 테일윈드는 처음부터 도입해서 사용하는 것을 권장합니다. 중간에 설치를 원한다면, 공식 문서를 참고해서 그대로 설치하면 됩니다.

테일윈드 공식 문서 - Next.js 가이드

 

Install Tailwind CSS with Next.js - Tailwind CSS

Setting up Tailwind CSS in a Next.js v10+ project.

tailwindcss.com

 

글로벌 스타일

글로벌 스타일은 모든 컴포넌트에 전역적으로 영향을 미치는 방법입니다. Next.js에서는 주로 루트 레이아웃(layout.tsx) 파일에 import를 사용해서 전역 스타일을 불러오고 적용합니다.

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";  // 전역스타일로 불러옴

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

 

모듈 CSS

리액트에서 사용하던 모듈 CSS를 Next.js에서도 그대로 적용할 수 있습니다. 모듈 CSS는 Next.js 팀이 권장하는 스타일링 방식 중 하나입니다.

/* home.module.css */
.title {
  color: red;
}
/* page.tsx */
import styles from "./home.module.css";

export default function Page() {
  return (
    <>
      <h1 className={styles.title}>Page</h1>
    </>
  );
}

 

Next.js는 테일윈드와 모듈 CSS 방식을 권장하지만, 상황에 따라 CSS-In-JS 라이브러리도 사용할 수 있습니다. 개인적으로는 테일윈드를 적극적으로 사용하는 것을 추천합니다.

728x90

'웹개발 > Next.js' 카테고리의 다른 글

Next.js로 웹사이트 라우팅 완벽 가이드  (0) 2024.07.29
Next.js 이미지 삽입  (0) 2024.07.29
Next.js 폰트 적용 방법  (0) 2024.07.29
Next.js 설치하기  (0) 2024.07.29
Next.js 요즘 대세라던데? 그게 뭐죠  (0) 2024.07.29

티스토리툴바