[이제와서 시작하는 Next.js 마스터하기 #1] 처음 시작하는 Next.js - 왜 모두가 Next.js를 선택할까?

게시 2025/11/22

By YonYonWare

35 분읽는 시간

“이제와서 시작해도 괜찮을까요?” - 괜찮습니다! Next.js는 React를 조금이라도 안다면 누구나 시작할 수 있습니다. 이 시리즈는 처음 시작하는 분들을 위해 만들어졌습니다.

🎯 이 글에서 배울 내용

Next.js가 무엇인지, 왜 배워야 하는지 (쉬운 말로!)
React와 Next.js의 차이점
Next.js 16의 새로운 기능들
첫 Next.js 프로젝트 만들기
실제로 동작하는 웹사이트 구축하기

예상 소요 시간: 30분 사전 지식: React 기초 (컴포넌트, JSX 정도만 알면 됩니다)

📋 시작하기 전에

Next.js를 사용하려면 먼저 Node.js가 설치되어 있어야 합니다.

Node.js가 뭔가요?

Node.js는 자바스크립트를 브라우저 밖에서도 실행할 수 있게 해주는 프로그램입니다.

브라우저 없이도:
자바스크립트로 서버를 만들고 ✅
파일을 읽고 쓰고 ✅
데이터베이스에 접근할 수 있어요! ✅

Next.js는 Node.js 위에서 동작하기 때문에 반드시 먼저 설치해야 합니다.

Node.js 설치하기

1️⃣ 현재 설치 여부 확인

터미널(명령 프롬프트)을 열고 다음 명령어를 입력해보세요:

node --version

결과가 나온다면?

v20.10.0  # 이런 식으로 버전이 나오면 이미 설치됨! ✅

→ Node.js가 이미 설치되어 있습니다! 다음 섹션으로 넘어가세요.

에러가 난다면?

  
'node'은(는) 내부 또는 외부 명령... # Windows
command not found: node              # Mac/Linux

→ 아직 설치되지 않았습니다. 아래 단계를 따라하세요!

2️⃣ Node.js 다운로드 및 설치

공식 웹사이트 방문: https://nodejs.org

LTS 버전 다운로드 (왼쪽 버튼, 추천):

LTS = Long Term Support (장기 지원 버전)
안정적이고 안정함
대부분의 개발자가 사용하는 버전

설치 방법 (OS별):

Windows 사용자

다운로드한 .msi 파일 실행
“Next” 버튼 계속 클릭 (기본 설정으로 충분)
설치 완료 후 컴퓨터 재시작
명령 프롬프트(cmd) 열기
node --version 입력해서 확인

💡 Tip: 설치 중 “Automatically install necessary tools” 체크박스가 나오면 체크하세요!

macOS 사용자

방법 1: 설치 파일 사용 (초보자 추천)

다운로드한 .pkg 파일 실행
지시에 따라 설치
터미널 열기
node --version 입력해서 확인

방법 2: Homebrew 사용 (개발자 추천)

  
# Homebrew가 설치되어 있다면
brew install node

# 설치 확인
node --version

Linux 사용자

Ubuntu/Debian:

  
# 최신 LTS 버전 설치
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

# 설치 확인
node --version
npm --version

다른 배포판은 공식 가이드 참조

3️⃣ npm 확인하기

Node.js를 설치하면 npm도 자동으로 설치됩니다.

npm이란?: Node Package Manager - 다른 개발자들이 만든 도구들을 쉽게 설치할 수 있게 해주는 프로그램

npm --version

버전이 나오면 성공! (예: 10.2.3)

4️⃣ npx 이해하기

이 튜토리얼에서 자주 사용할 npx 명령어:

npx create-next-app@latest my-first-nextjs

npx가 뭔가요?

npm 패키지를 설치하지 않고 바로 실행할 수 있게 해주는 도구
Node.js와 함께 자동 설치됨
항상 최신 버전을 사용할 수 있어서 편리함

비유:

npm install: 도구를 집에 사서 보관 (설치)
npx: 필요할 때만 빌려 쓰기 (일회성 실행)

✅ 준비 완료!

Node.js와 npm이 설치되었다면 이제 Next.js를 시작할 준비가 끝났습니다! 🎉

🤔 Next.js가 뭔가요? (진짜 쉽게 설명)

Next.js는 React를 더 쉽고 강력하게 만들어주는 도구 모음입니다.

🍕 피자로 이해하는 Next.js

React를 “피자 도우”라고 생각해보세요. 좋은 재료이지만, 맛있는 피자를 만들려면 여러 토핑과 도구가 필요합니다:

React만 사용: 🍕 도우만 있는 상태
- 직접 토핑을 준비하고 (라우팅 라이브러리)
- 직접 오븐을 설정하고 (빌드 도구)
- 직접 배달 시스템을 만들어야 함 (배포 설정)
Next.js 사용: 🍕 프리미엄 피자 세트
- 토핑이 이미 준비되어 있고 (라우팅 내장)
- 오븐이 자동으로 설정되고 (최적화 자동)
- 배달까지 한 번에! (배포 간편)

🎁 Next.js가 제공하는 것들

React (기본 재료)
    +
Next.js가 추가로 주는 것들:
✅ 페이지 자동 라우팅 (파일 만들면 바로 URL 생성!)
✅ 서버에서 HTML 미리 만들기 (빠른 첫 화면)
✅ 이미지 자동 최적화 (사진이 자동으로 가볍게)
✅ API 만들기 (백엔드도 같이!)
✅ 초고속 빌드 도구 (Next.js 16의 Turbopack!)
    =
완성된 웹 애플리케이션 🎉

💡 왜 Next.js를 배워야 할까요?

1. 빠른 웹사이트를 쉽게 만들 수 있어요

문제: React로만 만든 웹사이트는 첫 화면이 늦게 뜹니다.

사용자가 웹사이트 방문
    ↓
빈 HTML 다운로드 (1초)
    ↓
자바스크립트 다운로드 (2초)
    ↓
자바스크립트 실행 (1초)
    ↓
드디어 화면 표시! (총 4초 😓)

해결: Next.js는 서버에서 HTML을 미리 만들어 줍니다.

사용자가 웹사이트 방문
    ↓
완성된 HTML 다운로드
    ↓
바로 화면 표시! (1초 이내 😊)

2. 구글 검색에 잘 걸려요 (SEO)

왜 중요한가요?

React만 쓰면: 구글 봇이 빈 화면만 봄 → 검색 순위 ↓
Next.js 쓰면: 구글 봇이 완성된 화면을 봄 → 검색 순위 ↑

3. 개발이 정말 편해요

파일 기반 라우팅이라는 마법 같은 기능:

프로젝트 폴더 구조가 곧 웹사이트 주소!

app/
├── page.tsx              →  yoursite.com/
├── about/
│   └── page.tsx          →  yoursite.com/about
└── blog/
    ├── page.tsx          →  yoursite.com/blog
    └── [slug]/
        └── page.tsx      →  yoursite.com/blog/아무거나

라우팅 라이브러리를 따로 설치하거나 복잡한 설정이 필요 없습니다!

4. Next.js 16은 더욱 빨라졌어요! ⚡

Turbopack (새로 나온 초고속 빌드 도구)

개발 서버 시작: 10배 빠름 ⚡⚡⚡
코드 변경 시 화면 업데이트: 5배 빠름
프로덕션 빌드: 2-5배 빠름

  
# Next.js 15 이전
npm run dev
→ Starting... (3초 대기 😴)

# Next.js 16 (Turbopack)
npm run dev
→ Ready! (0.3초 😍)

🆚 React vs Next.js - 뭐가 다른가요?

📊 한눈에 비교하기

항목	React (Create React App)	Next.js 16
학습 난이도	보통	조금 더 많음 (하지만 가치있음!)
첫 화면 속도	느림 (3-4초)	빠름 (1초 이내)
SEO (검색 노출)	어려움 😰	쉬움 😊
페이지 이동	라이브러리 설치 필요	파일 만들면 끝
이미지 최적화	직접 해야 함	자동!
빌드 속도	느림	매우 빠름 (Turbopack)
API 만들기	서버 따로 필요	Next.js 안에서 가능
배포	설정 복잡	클릭 몇 번으로 끝

🎯 언제 뭘 써야 할까요?

React (CRA)를 쓰세요:

간단한 대시보드 (검색 노출 필요 없음)
회사 내부 도구
SEO가 필요 없는 앱

Next.js를 쓰세요:

블로그, 쇼핑몰, 포트폴리오 (검색 노출 중요!)
빠른 첫 화면이 중요한 서비스
프론트엔드 + 백엔드를 한 번에 만들고 싶을 때
요즘 추세: 대부분의 새 프로젝트는 Next.js!

🎁 Next.js 16의 새로운 기능들

1. ⚡ Turbopack (안정화!)

기존 Webpack을 대체하는 초고속 빌드 도구가 안정 버전으로 출시되었습니다.

체감 속도 차이:

  
# 큰 프로젝트 빌드 시간
Webpack: 60초
Turbopack: 12초 (5배 빨라짐! 🚀)

2. 🎨 React Compiler (자동 최적화)

이전에는 이렇게 했어요:

  
// 성능 최적화를 위해 직접 useMemo, useCallback 작성
const ExpensiveComponent = () => {
  const computedValue = useMemo(() => {
    return heavyCalculation(data);
  }, [data]);

  const handleClick = useCallback(() => {
    // ...
  }, []);

  // ...
}

Next.js 16에서는:

  
// 그냥 일반 코드만 작성하면
// React Compiler가 자동으로 최적화해줘요!
const ExpensiveComponent = () => {
  const computedValue = heavyCalculation(data);

  const handleClick = () => {
    // ...
  };

  // 자동으로 최적화됨! ✨
}

3. 💾 Cache Components (명시적 캐싱)

캐싱이란?: 한 번 만든 것을 저장해뒀다가 재사용하는 것 (커피를 매번 새로 내리지 않고 보온병에 저장하는 것과 같음)

  
// "use cache"를 쓰면 이 컴포넌트는 한 번만 실행되고
// 결과를 저장해뒀다가 재사용합니다
'use cache';

async function ProductList() {
  // 데이터베이스에서 상품 목록 가져오기 (시간이 오래 걸림)
  const products = await db.products.findMany();

  return <div>{/* 상품 목록 표시 */}</div>;
}

장점:

서버 부하 감소
사용자에게 더 빠른 응답
데이터베이스 쿼리 절약

4. 🌐 proxy.ts (네트워크 제어)

기존 middleware.ts보다 더 명확하고 강력한 기능:

  
// proxy.ts - 웹사이트의 "문지기" 역할
export default function proxy(request) {
  // 로그인 안 한 사용자는 로그인 페이지로
  if (!request.cookies.get('auth')) {
    return redirect('/login');
  }

  // 특정 국가 사용자는 해당 언어 페이지로
  if (request.geo.country === 'KR') {
    return rewrite('/ko' + request.url);
  }
}

🚀 첫 Next.js 프로젝트 만들기 (따라하기)

1단계: 프로젝트 생성

터미널을 열고 다음 명령어를 입력하세요:

npx create-next-app@latest my-first-nextjs

2단계: 설정 선택하기

질문이 나오면 이렇게 선택하세요 (초보자 권장):

  
✔ Would you like to use TypeScript? → No (처음엔 JavaScript 추천)
✔ Would you like to use ESLint? → Yes (코드 오류 찾아줌)
✔ Would you like to use Tailwind CSS? → Yes (스타일링 쉬워짐)
✔ Would you like to use `src/` directory? → No (단순하게!)
✔ Would you like to use App Router? → Yes (최신 방식!)
✔ Would you like to use Turbopack? → Yes (빠른 개발!)
✔ Would you like to customize import alias? → No

💡 Tip: TypeScript를 모르면 No를 선택하세요. JavaScript로도 충분합니다!

3단계: 프로젝트 시작하기

cd my-first-nextjs
npm run dev

브라우저에서 http://localhost:3000을 열어보세요!

축하합니다! 🎉 첫 Next.js 앱이 실행되고 있습니다!

📁 프로젝트 구조 이해하기 (쉽게 설명)

my-first-nextjs/
│
├── app/                    # 📱 여기가 웹사이트의 심장!
│   ├── layout.js          # 🖼️ 모든 페이지의 "틀" (헤더, 푸터 등)
│   ├── page.js            # 🏠 홈페이지 (첫 화면)
│   └── globals.css        # 🎨 전체 디자인 스타일
│
├── public/                # 📸 이미지, 아이콘 등 파일 보관함
│   ├── logo.png
│   └── favicon.ico
│
├── package.json           # 📦 프로젝트 정보 & 필요한 도구 목록
└── next.config.js         # ⚙️ Next.js 설정 파일

📝 각 파일의 역할 (더 자세히)

1. app/layout.js - 웹사이트의 “틀”

모든 페이지에 공통으로 들어가는 것들 (예: 헤더, 푸터)

  
// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="ko">
      <body>
        <header>
          <nav>내비게이션 메뉴</nav>
        </header>

        <main>
          {children} {/* 각 페이지 내용이 여기 들어감 */}
        </main>

        <footer>
          푸터 정보
        </footer>
      </body>
    </html>
  );
}

2. app/page.js - 홈페이지

사용자가 yoursite.com/에 접속했을 때 보는 화면

  
// app/page.js
export default function Home() {
  return (
    <div>
      <h1>환영합니다! 👋</h1>
      <p>이것이 첫 Next.js 페이지입니다!</p>
    </div>
  );
}

🎨 첫 페이지 만들어보기 (실습)

목표: 간단한 자기소개 페이지 만들기

1단계: app/page.js 파일을 열고 전부 지운 다음, 이렇게 작성해보세요:

  
// app/page.js
export default function Home() {
  return (
    <main className="min-h-screen p-8 bg-gradient-to-br from-blue-50 to-purple-50">
      <div className="max-w-2xl mx-auto">
        {/* 인사말 */}
        <h1 className="text-4xl font-bold text-gray-800 mb-4">
          안녕하세요! 👋
        </h1>

        <p className="text-xl text-gray-600 mb-8">
          저는 Next.js를 배우는 개발자입니다.
        </p>

        {/* 기술 스택 */}
        <div className="bg-white p-6 rounded-lg shadow-md mb-8">
          <h2 className="text-2xl font-semibold mb-4">기술 스택</h2>
          <div className="flex gap-3">
            <SkillBadge name="React" />
            <SkillBadge name="Next.js 16" />
            <SkillBadge name="JavaScript" />
          </div>
        </div>

        {/* 프로젝트 */}
        <div className="bg-white p-6 rounded-lg shadow-md">
          <h2 className="text-2xl font-semibold mb-4">프로젝트</h2>
          <ProjectCard
            title="첫 Next.js 프로젝트"
            description="Next.js를 배우면서 만든 첫 프로젝트입니다!"
          />
        </div>
      </div>
    </main>
  );
}

// 재사용 가능한 컴포넌트 (레고 블록처럼!)
function SkillBadge({ name }) {
  return (
    <span className="px-4 py-2 bg-blue-100 text-blue-700 rounded-full text-sm font-medium">
      {name}
    </span>
  );
}

function ProjectCard({ title, description }) {
  return (
    <div className="border-l-4 border-blue-500 pl-4">
      <h3 className="font-semibold text-lg">{title}</h3>
      <p className="text-gray-600">{description}</p>
    </div>
  );
}

2단계: 파일을 저장하고 브라우저를 확인해보세요!

🎉 변경사항이 즉시 반영됩니다! (Fast Refresh 덕분)

📖 코드 설명 (초보자를 위한)

  
<SkillBadge name="React" />

SkillBadge: 우리가 만든 컴포넌트 (함수)
name="React": “React”라는 텍스트를 전달
레고 블록을 조립하듯이 컴포넌트를 재사용!

  
className="px-4 py-2 bg-blue-100"

Tailwind CSS 클래스 (미리 만들어진 스타일)
px-4: 좌우 여백
py-2: 상하 여백
bg-blue-100: 연한 파란색 배경

🎯 새 페이지 추가하기 (라우팅 마법!)

실습: “소개” 페이지 만들기

1단계: app 폴더 안에 about 폴더를 만드세요

2단계: about 폴더 안에 page.js 파일을 만들고 이렇게 작성:

  
// app/about/page.js
export default function AboutPage() {
  return (
    <main className="min-h-screen p-8">
      <h1 className="text-4xl font-bold mb-4">소개 페이지</h1>
      <p className="text-xl text-gray-600">
        이것은 자동으로 생성된 /about 페이지입니다!
      </p>

      <div className="mt-8">
        <a
          href="/"
          className="text-blue-600 hover:underline"
        >
          ← 홈으로 돌아가기
        </a>
      </div>
    </main>
  );
}

3단계: 브라우저에서 http://localhost:3000/about으로 이동!

🎊 축하합니다!

폴더를 만들고 page.js 파일만 추가했는데 자동으로 URL이 생성되었습니다!

파일 구조:
app/
├── page.js              →  localhost:3000/
└── about/
    └── page.js          →  localhost:3000/about

라우팅 라이브러리 설치? 설정? 필요 없음! 🎉

🔗 페이지 연결하기 (Link 컴포넌트)

⚠️ 일반 `<a>` 태그의 문제점

  
// ❌ 이렇게 하면 안 됩니다!
<a href="/about">소개 페이지로</a>

// 문제점:
// - 페이지가 새로고침됨 (느림!)
// - React 상태가 모두 사라짐

✅ Next.js의 `Link` 컴포넌트 사용

  
// ✅ 이렇게 하세요!
import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>홈페이지</h1>
      <Link href="/about">
        소개 페이지로 →
      </Link>
    </div>
  );
}

// 장점:
// ✅ 페이지 새로고침 없음 (빠름!)
// ✅ 부드러운 전환
// ✅ 페이지를 미리 불러옴 (prefetch)

📚 실습: 홈페이지에 내비게이션 추가하기

app/page.js 파일 맨 위에 추가:

  
import Link from 'next/link';

export default function Home() {
  return (
    <main className="min-h-screen p-8">
      {/* 내비게이션 메뉴 */}
      <nav className="mb-8 flex gap-4">
        <Link
          href="/"
          className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
        >
          홈
        </Link>
        <Link
          href="/about"
          className="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300"
        >
          소개
        </Link>
      </nav>

      {/* 기존 내용... */}
      <h1 className="text-4xl font-bold">환영합니다! 👋</h1>
    </main>
  );
}

이제 클릭해보세요! 페이지가 새로고침 없이 부드럽게 전환됩니다! ✨

🎓 개념 정리: Server Components vs Client Components

🤔 왜 두 종류가 있나요?

목표: 웹사이트를 최대한 빠르게 만들기!

🖥️ Server Components (기본값)

서버에서 실행되는 컴포넌트 (사용자 컴퓨터에 안 보냄!)

  
// app/products/page.js
// 기본적으로 모든 컴포넌트는 Server Component!

async function ProductsPage() {
  // 서버에서 데이터베이스 접근 (빠름!)
  const products = await db.products.findMany();

  return (
    <div>
      <h1>상품 목록</h1>
      {products.map(product => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <p>{product.price}원</p>
        </div>
      ))}
    </div>
  );
}

장점:

✅ 번들 크기가 작음 (사용자에게 보내는 JavaScript 적음)
✅ 데이터베이스에 직접 접근 가능
✅ 보안에 유리 (API 키 등을 서버에만 둠)

단점:

❌ 사용자와 상호작용 불가 (onClick, useState 등 안 됨)

💻 Client Components (필요할 때만)

브라우저에서 실행되는 컴포넌트 (사용자와 상호작용 가능!)

  
// app/components/Counter.js
'use client';  // ← 이 줄이 핵심!

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button
        onClick={() => setCount(count + 1)}
        className="px-4 py-2 bg-blue-600 text-white rounded"
      >
        +1 증가
      </button>
    </div>
  );
}

언제 사용하나요?

✅ onClick, onChange 등 이벤트 핸들러 필요
✅ useState, useEffect 등 React Hooks 사용
✅ 브라우저 API 사용 (localStorage, window 등)

🎯 어떻게 선택하나요? (초보자용 가이드)

질문: 사용자가 클릭하거나 입력하나요?
  ├─ 예 → Client Component ('use client' 추가)
  └─ 아니오 → Server Component (기본값, 아무것도 안 써도 됨)

실전 예시:

  
// app/blog/page.js (Server Component - 기본값)
async function BlogPage() {
  // 블로그 글 목록 가져오기
  const posts = await getPosts();

  return (
    <div>
      <h1>블로그</h1>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>

          {/* Client Component를 Server Component 안에 넣을 수 있음! */}
          <LikeButton postId={post.id} />
        </article>
      ))}
    </div>
  );
}

// app/components/LikeButton.js (Client Component)
'use client';

import { useState } from 'react';

export default function LikeButton({ postId }) {
  const [likes, setLikes] = useState(0);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      ❤️ {likes}
    </button>
  );
}

🔍 자주 묻는 질문 (FAQ)

Q1: React를 잘 모르는데 Next.js를 배울 수 있나요?

답: React 기초만 알면 됩니다!

알아야 할 것:

✅ 컴포넌트가 뭔지 (함수처럼 UI를 반환)
✅ JSX 문법 (<div>, {변수} 이런 것들)
✅ props로 데이터 전달하기

몰라도 되는 것:

❌ Redux, Context API 같은 상태관리
❌ React Router
❌ 복잡한 최적화 기법

추천 학습 순서:

React 기초 (1-2주)
Next.js 시작 (이 시리즈!)
Next.js 하면서 React 더 배우기

Q2: TypeScript를 배워야 하나요?

답: 아니요, 처음엔 JavaScript로도 충분합니다!

JavaScript로 시작하세요 (추천):

  
// JavaScript - 간단하고 쉬움
export default function Hello({ name }) {
  return <h1>안녕, {name}!</h1>;
}

나중에 TypeScript도 배워보세요 (선택사항):

  
// TypeScript - 타입을 명시해서 오류 방지
export default function Hello({ name }: { name: string }) {
  return <h1>안녕, {name}!</h1>;
}

TypeScript는 “추가 안전장치”입니다. 없어도 잘 작동해요!

Q3: App Router vs Pages Router, 뭘 써야 하나요?

답: 무조건 App Router를 사용하세요!

App Router (Next.js 13+, 권장):

✅ 최신 기능 (Server Components, Server Actions)
✅ 더 빠른 성능
✅ Next.js의 미래
✅ 이 시리즈에서 다루는 방식

Pages Router (Next.js 12 이하):

⚠️ 옛날 방식
⚠️ 새 기능이 추가되지 않음
⚠️ 유지보수 목적으로만 사용

판단 기준:

새 프로젝트 → App Router
옛날 프로젝트 수정 → Pages Router 유지

Q4: Next.js 16과 15의 차이가 크나요?

답: 사용법은 거의 같고, 성능만 훨씬 좋아졌어요!

Next.js 15에서도 작동하는 코드:

✅ Server Components
✅ App Router
✅ Server Actions

Next.js 16의 개선사항:

⚡ Turbopack (5배 빠른 빌드)
🎨 React Compiler (자동 최적화)
💾 Cache Components (더 나은 캐싱)

걱정 마세요! Next.js 15 튜토리얼도 16에서 그대로 작동합니다!

Q5: 무료로 배포할 수 있나요?

답: 네! 무료 옵션이 많습니다!

Vercel (가장 쉬움, 추천):

✅ Next.js 만든 회사의 서비스
✅ GitHub 연결만 하면 자동 배포
✅ 무료 플랜으로 충분

Netlify:

✅ 사용하기 쉬움
✅ 무료 플랜 제공

Cloudflare Pages:

✅ 빠른 속도
✅ 무료 플랜 넉넉함

다음 시리즈에서 배포 방법을 자세히 다룰 예정입니다!

💡 초보자를 위한 팁

1. 천천히, 하나씩

❌ 나쁜 학습 방법:
한 번에 모든 기능을 배우려고 함

✅ 좋은 학습 방법:
1일차: 프로젝트 만들기, 페이지 추가
2일차: Link 컴포넌트, 이미지 추가
3일차: 스타일링
4일차: 데이터 페칭
...

2. 에러를 두려워하지 마세요

에러는 배움의 기회입니다!

  
// 이런 에러가 나왔다면?
Error: Objects are not valid as a React child

// 의미: 객체를 직접 화면에 표시하려고 했어요
// 해결: JSON.stringify()로 변환하거나 속성만 표시

❌ return <div>{user}</div>
✅ return <div>{user.name}</div>
✅ return <div>{JSON.stringify(user)}</div>

3. 공식 문서는 친구입니다

Next.js 공식 문서는 정말 잘 되어 있습니다!

검색 기능 활용
예제 코드 복사해서 실험
공식 튜토리얼도 추천

4. 작은 프로젝트로 시작

추천 첫 프로젝트:

✅ 개인 포트폴리오
✅ 블로그
✅ 할 일 목록 (Todo List)
✅ 날씨 앱

피해야 할 것:

❌ 복잡한 소셜 미디어
❌ 실시간 채팅 (나중에!)
❌ 이커머스 플랫폼 (너무 복잡)

🎯 오늘 배운 내용 정리

✅ 핵심 개념

Next.js는 React를 더 쉽고 강력하게 만드는 도구
- 라우팅 자동화
- 성능 최적화
- SEO 친화적
Next.js 16의 새 기능
- Turbopack (초고속!)
- React Compiler (자동 최적화)
- Cache Components (효율적 캐싱)
파일 기반 라우팅
- app/page.js → /
- app/about/page.js → /about
- 폴더 만들면 URL 자동 생성!
Server vs Client Components
- 기본: Server Component
- 상호작용 필요: 'use client' 추가

🚀 다음 단계

이제 기초를 다졌으니, 다음 포스트에서는:

동적 라우팅 ([id], [slug])
이미지 최적화
메타데이터 (SEO)
레이아웃 활용법

을 배워보겠습니다!

📚 다음 학습

[이제와서 시작하는 Next.js 마스터하기 #2] App Router와 라우팅 시스템 완전 정복 (다음 포스트에서 계속!)

🔗 유용한 자료

공식 문서

무료 학습 자료

Next.js Learn - 공식 튜토리얼
Next.js 예제 모음

커뮤니티

Next.js 튜토리얼 시리즈

[이제와서 시작하는 Next.js 마스터하기 #1] 처음 시작하는 Next.js (현재 포스트)
App Router와 라우팅 시스템 완전 정복 (다음 편)
Server Components와 데이터 페칭 전략 (예정)
캐싱과 성능 최적화 (예정)
Server Actions과 폼 처리 (예정)
이미지, 폰트, 메타데이터 최적화 (예정)
동적 라우팅과 고급 패턴 (예정)
Proxy.ts와 네트워크 제어 (예정)
인증과 권한 관리 (예정)
데이터베이스 연동 실전 (예정)
배포 전략과 CI/CD (예정)
테스팅으로 안정성 확보하기 (예정)
Turbopack으로 개발 속도 향상 (예정)
React Compiler와 성능 최적화 (예정)
실전 프로젝트: 풀스택 블로그 플랫폼 (예정)

“늦었다고 생각할 때가 가장 빠른 때입니다.” - Next.js는 지금 시작하기에 최적의 시기입니다! 🚀

Next.js, Tutorial