Ch.16 Next.js 입문 — 풀스택 React 프레임워크

React만으로는 부족한 이유

CSR(클라이언트 사이드 렌더링)의 한계를 이해한다Next.js가 제공하는 SSR/SSG의 장점을 설명할 수 있다App Router의 기본 구조(app/, page.tsx, layout.tsx)를 이해한다

React로 만든 앱이 구글에 안 뜬다?

열심히 React로 포트폴리오 사이트를 만들었습니다. 그런데 구글에서 검색해도 내 사이트가 나오지 않습니다.

React 앱이 검색엔진에 안 잡히는 이유는?

Next.js — React에 서버 렌더링, 라우팅, 최적화를 더한 풀스택 프레임워크입니다.

article

핵심 내용

React = CSR (Client Side Rendering) 브라우저에서 JavaScript로 화면을 그립니다

빈 HTML 전송: <div id='root'></div>만 있음

JS 다운로드: 큰 번들 파일 로딩 (느림)

JS 실행: React가 DOM을 생성

화면 표시: 드디어 콘텐츠가 보임!

검색 봇의 시선 구글 봇이 CSR 페이지를 방문하면: HTML에는 `<div id='root'></div>`만 보입니다. 콘텐츠가 없으니 검색 결과에 노출되지 않습니다.

Next.js = React + 서버 렌더링 서버에서 완성된 HTML을 보내줍니다

Next.js 13+의 App Router 폴더가 곧 URL입니다

my-app/
├── app/
│   ├── layout.tsx    → 전체 레이아웃
│   ├── page.tsx      → / (홈)
│   ├── about/
│   │   └── page.tsx  → /about
│   ├── blog/
│   │   ├── page.tsx  → /blog
│   │   └── [id]/
│   │       └── page.tsx → /blog/1, /blog/2
│   └── api/
│       └── hello/
│           └── route.ts → /api/hello
├── public/           → 정적 파일
└── package.json

// app/layout.tsx — 모든 페이지의 공통 레이아웃
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ko">
      <body>
        <nav>내비게이션</nav>
        {children}
        <footer>푸터</footer>
      </body>
    </html>
  );
}

// app/page.tsx — 홈페이지 (/)
export default function Home() {
  return (
    <main>
      <h1>안녕하세요!</h1>
      <p>Next.js로 만든 첫 페이지입니다.</p>
    </main>
  );
}

핵심 파일 규칙 page.tsx = 해당 경로의 페이지 컴포넌트 layout.tsx = 해당 경로 + 하위의 공통 레이아웃 route.ts = API 엔드포인트 (서버 전용)

React만 사용하면 검색엔진에 잘 노출된다.

Next.js의 App Router에서 `/about` 페이지를 만들려면?

layout.tsx의 역할은?

Next.js는 서버에서 완성된 HTML을 보내므로 SEO에 유리하다.

key

핵심 용어

🔍

SEO 불가

검색 봇이 빈 HTML만 보고 돌아감 — 검색 노출 안 됨

🐌

느린 초기 로딩

JS 전체를 다운로드해야 첫 화면이 보임

💬

소셜 미리보기 실패

카카오톡/슬랙에 URL 공유 시 미리보기 안 됨

🖥️

서버 사이드 렌더링

서버에서 HTML을 완성하여 전송 — SEO 해결

📁

파일 기반 라우팅

폴더 구조 = URL — react-router 불필요

⚡

자동 코드 분할

페이지별로 JS를 나눠서 빠른 로딩

🔌

API 라우트

같은 프로젝트에서 백엔드 API도 작성

edit_note

정리 노트

React만으로는 부족한 이유

핵심 개념

CSR의 한계: 빈 HTML → JS 다운 → 렌더링 순서로 초기 로딩 느림, SEO 불리
Next.js: React 기반 풀스택 프레임워크 — SSR + 파일 기반 라우팅
App Router: app/ 폴더 구조로 페이지와 레이아웃을 자동 관리
서버 렌더링: 서버에서 완성된 HTML을 보내 SEO와 초기 로딩 속도 향상

★

Next.js는 바이브 코더에게 가장 인기 있는 풀스택 프레임워크입니다.

image

시각 자료

다이어그램: wd-scene-nextjs

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작