📘 Next.js 기초 강좌

1. Next.js란 무엇인가?

React: UI 라이브러리 (CSR 중심)
Next.js: React 기반 풀스택 프레임워크

→ SSR/SSG 지원, 파일 기반 라우팅, API, SEO 최적화, Vercel 배포

2. 개발 환경 준비

(1) Node.js 설치 확인

node -v
npm -v

→ Node.js 18 이상 권장

(2) Next.js 프로젝트 생성

npx create-next-app@latest next-tutorial
cd next-tutorial
npm run dev

→ 브라우저 http://localhost:3000 접속 → Next.js 기본 화면 확인

3. SCSS 설치

npm install sass

→ 이제 *.module.scss 파일을 만들 수 있음

4. 글로벌 폰트(Noto Sans KR) 적용

Next.js 13 이상에서는 next/font를 사용하는 것이 가장 깔끔합니다.

Google Fonts에서 직접 불러올 수 있어요.

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

import './globals.css';
import { Noto_Sans_KR } from 'next/font/google';

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

export const metadata = {
  title: 'My Next.js App',
  description: 'Next.js 기초 강좌 프로젝트',
};

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

👉 이렇게 하면 전체 프로젝트의 기본 폰트가 Noto Sans KR로 지정됩니다.

5. SCSS 모듈 적용

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

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

.description {
  color: #555;
  text-align: center;
  font-size: 1.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}>
        이것이 나의 첫 번째 Next.js + SCSS + Noto Sans KR 페이지입니다.
      </p>
    </main>
  );
}

6. 오늘의 정리

Next.js 프로젝트 생성 (create-next-app)
SCSS 설치 및 모듈 스타일 적용
글로벌 폰트(Noto Sans KR) 적용 → layout.tsx에 전역 세팅
기본 페이지 스타일 완성 🎉

📚 저장소

GitHub - heroyooi/next-tutorial at ch1_1

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

1-1. Next.js 시작하기 + SCSS + 글로벌 폰트 세팅

1. Next.js란 무엇인가?

2. 개발 환경 준비

(1) Node.js 설치 확인

(2) Next.js 프로젝트 생성

3. SCSS 설치

4. 글로벌 폰트(Noto Sans KR) 적용

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

5. SCSS 모듈 적용

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

(2) `app/page.tsx`

6. 오늘의 정리

📚 저장소

💬 댓글

📘 Next.js 기초 강좌

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

1-1. Next.js 시작하기 + SCSS + 글로벌 폰트 세팅

1. Next.js란 무엇인가?

2. 개발 환경 준비

(1) Node.js 설치 확인

(2) Next.js 프로젝트 생성

3. SCSS 설치

4. 글로벌 폰트(Noto Sans KR) 적용

(1) app/layout.tsx 수정

5. SCSS 모듈 적용

(1) styles/home.module.scss

(2) app/page.tsx

6. 오늘의 정리

📚 저장소

💬 댓글

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

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

(2) `app/page.tsx`