📘 Next.js 기초 강좌

1. Next.js 스타일링 방법

Next.js에서는 대표적으로 3가지 방식으로 스타일을 적용할 수 있습니다.

전역 스타일 (globals.css / SCSS 가능)

→ 모든 페이지에 공통 적용
CSS Module / SCSS Module (.module.scss)

→ 컴포넌트 단위로 스타일 캡슐화
CSS-in-JS (styled-components, emotion 등)

→ 이번 과정에서는 다루지 않음 (심화 과정에서 가능)

👉 우리는 전역 SCSS + 모듈 SCSS를 조합해서 사용합니다.

2. 글로벌 스타일 (전역 SCSS)

(1) `styles/globals.scss` 생성

/* 글로벌 스타일 */
body {
  margin: 0;
  padding: 0;
  background: #fafafa;
  color: #222;
  font-family: "Noto Sans KR", sans-serif;
  line-height: 1.6;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

(2) `app/layout.tsx` 수정

import { Noto_Sans_KR } from "next/font/google";
import Link from "next/link";
import '@/styles/globals.scss'; // 글로벌 SCSS 적용

// .. 이하 생략

3. 레이아웃용 SCSS 모듈

(1) `styles/layout.module.scss`

.header {
  background: white;
  border-bottom: 1px solid #ddd;
  padding: 1rem;

  nav {
    display: flex;
    gap: 1rem;
  }
}

.container {
  max-width: 960px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.footer {
  text-align: center;
  padding: 2rem 0;
  font-size: 0.9rem;
  color: #777;
  border-top: 1px solid #ddd;
}

(2) `app/layout.tsx`에 연결

import { Noto_Sans_KR } from "next/font/google";
import Link from "next/link";
import '@/styles/globals.scss';
import styles from "@/styles/layout.module.scss";

const notoSansKR = Noto_Sans_KR({
  subsets: ["latin"],
  weight: ["400", "500", "700"],
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ko">
      <body className={notoSansKR.className}>
        <header className={styles.header}>
          <nav>
            <Link href="/">홈</Link>
            <Link href="/about">소개</Link>
            <Link href="/posts">Posts</Link>
          </nav>
        </header>
        <main className={styles.container}>{children}</main>
        <footer className={styles.footer}>© 2025 My Next.js App</footer>
      </body>
    </html>
  );
}

4. 페이지 스타일링 개선

(1) `styles/home.module.scss` 개선

.title {
  font-size: 2.5rem;
  color: #0070f3;
  text-align: center;
  margin-top: 2rem;
}

.description {
  color: #555;
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

(2) `app/page.tsx` 적용

import styles from "@/styles/home.module.scss";

export default function Home() {
  return (
    <main>
      <h1 className={styles.title}>Hello Next.js 🚀</h1>
      <p className={styles.description}>
        SCSS와 글로벌 레이아웃을 적용한 Next.js 기본 페이지입니다.
      </p>
    </main>
  );
}

5. 오늘의 정리

글로벌 SCSS(globals.scss) 적용 → 폰트/기본 스타일 관리
레이아웃 SCSS 모듈(layout.module.scss) 적용 → Header/Footer/Container 스타일 관리
페이지 SCSS 모듈(home.module.scss)로 개별 스타일 적용
공통 레이아웃(헤더/푸터) 구조 완성

📚 저장소

GitHub - heroyooi/next-tutorial at ch1_4

1단계. Next.js 입문 (개념 & 활용 기초)

1-4. 스타일링과 레이아웃

1. Next.js 스타일링 방법

2. 글로벌 스타일 (전역 SCSS)

(1) `styles/globals.scss` 생성

(2) `app/layout.tsx` 수정

3. 레이아웃용 SCSS 모듈

(1) `styles/layout.module.scss`

(2) `app/layout.tsx`에 연결

4. 페이지 스타일링 개선

(1) `styles/home.module.scss` 개선

(2) `app/page.tsx` 적용

5. 오늘의 정리

📚 저장소

💬 댓글

📘 Next.js 기초 강좌

1단계. Next.js 입문 (개념 & 활용 기초)

1-4. 스타일링과 레이아웃

1. Next.js 스타일링 방법

2. 글로벌 스타일 (전역 SCSS)

(1) styles/globals.scss 생성

(2) app/layout.tsx 수정

3. 레이아웃용 SCSS 모듈

(1) styles/layout.module.scss

(2) app/layout.tsx에 연결

4. 페이지 스타일링 개선

(1) styles/home.module.scss 개선

(2) app/page.tsx 적용

5. 오늘의 정리

📚 저장소

💬 댓글

(1) `styles/globals.scss` 생성

(2) `app/layout.tsx` 수정

(1) `styles/layout.module.scss`

(2) `app/layout.tsx`에 연결

(1) `styles/home.module.scss` 개선

(2) `app/page.tsx` 적용