React vs Next.js#
React는 UI 라이브러리, Next.js는 React 기반 풀스택 프레임워크입니다.
Diagram · Mermaid
렌더링 방식#
| 방식 | 언제 생성 | 사용 사례 |
|---|---|---|
| CSR | 브라우저에서 | 대시보드, 인증 후 페이지 |
| SSR | 요청마다 서버에서 | 사용자별 피드, 실시간 데이터 |
| SSG | 빌드 시 1번 | 블로그, 문서, 마케팅 |
| ISR | 빌드 후 주기적 재생성 | 제품 목록, 뉴스 |
프로젝트 생성#
Bash
npx create-next-app@latest my-app --typescript --tailwind --eslint --app
cd my-app
npm run dev
# http://localhost:3000App Router 폴더 구조#
Text
app/
├── layout.tsx ← 루트 레이아웃 (항상 유지)
├── page.tsx ← / 경로
├── loading.tsx ← 로딩 UI
├── error.tsx ← 에러 UI
├── not-found.tsx ← 404
├── about/
│ └── page.tsx ← /about
├── users/
│ ├── page.tsx ← /users
│ └── [id]/
│ └── page.tsx ← /users/123
└── api/
└── users/
└── route.ts ← API 엔드포인트
서버 컴포넌트 vs 클라이언트 컴포넌트#
TSX
// 서버 컴포넌트 (기본값)
// - 서버에서만 실행
// - useState, useEffect 사용 불가
// - DB, 파일 직접 접근 가능
// - 번들 크기에 포함 안 됨
async function ProductPage({ params }: { params: { id: string } }) {
// 직접 DB 쿼리 가능 (서버에서만 실행)
const product = await db.products.findById(params.id);
return <div>{product.name}</div>;
}
// 클라이언트 컴포넌트
// "use client" 지시어 필요
"use client";
import { useState } from "react";
function AddToCart({ productId }: { productId: string }) {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(c => c + 1)}>
장바구니 ({count})
</button>
);
}루트 레이아웃#
TSX
// app/layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "My App",
description: "Next.js 앱",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ko">
<body className={inter.className}>
<header>헤더</header>
<main>{children}</main>
<footer>푸터</footer>
</body>
</html>
);
}첫 페이지#
TSX
// app/page.tsx
export default function HomePage() {
return (
<div>
<h1>Next.js 앱에 오신 것을 환영합니다!</h1>
<p>App Router를 사용하고 있습니다.</p>
</div>
);
}정리#
| 개념 | 설명 |
|---|---|
| App Router | app/ 폴더 기반 파일 라우팅 |
| 서버 컴포넌트 | 기본값, 서버에서만 실행 |
| 클라이언트 컴포넌트 | "use client", 브라우저에서 실행 |
| SSR | 요청마다 서버 렌더링 |
| SSG | 빌드 시 정적 생성 |
다음 편에서는 페이지와 라우팅 — 동적 라우트, 중첩 레이아웃, 라우트 그룹을 배웁니다.
