[Next.js + TS] 1. 왜 Next.js + TypeScript인가

[Next.js + TS] 1. 왜 Next.js + TypeScript인가

React는 써 봤고, 이제 Next.js와 TypeScript를 제대로 잡고 싶은 사람을 위한 시리즈입니다.
App Router 기준으로 작은 메모 앱을 만들며 개념과 실습을 같이 갑니다.

---

이 시리즈에서 하는 일

React만으로도 화면은 만들 수 있습니다.
다만 실제 서비스에 가까워질수록 이런 질문이 생깁니다.

• 페이지(라우팅)는 어떻게 나눌까?
• SEO / 초기 로딩은?
• 서버에서 데이터를 가져오는 게 나을까, 클라이언트에서 할까?
• props랑 API 응답 타입이 자꾸 틀어지는데?

Next.js는 React 위에 앱에 필요한 뼈대를 올려 준 프레임워크이고,
TypeScript는 그 뼈대와 데이터를 타입이 있는 계약으로 붙잡아 줍니다.

이 시리즈는 이론만 늘어놓지 않습니다.
매 편 왜 쓰는지 → 핵심 개념 → 따라 치는 코드 → 정리 순서로 갑니다.

---

React만 쓸 때 vs Next.js

	React (CRA/Vite 등)	Next.js (App Router)
역할	UI 라이브러리	React 기반 풀스택 프레임워크
라우팅	react-router 등을 직접 구성	폴더 구조로 페이지 생성
렌더링	기본적으로 클라이언트 중심	서버/클라이언트 컴포넌트를 나눔
데이터	useEffect + fetch가 흔함	서버에서 fetch, Server Actions 등
배포 관점	SPA로 시작하는 경우가 많음	페이지/레이아웃 단위로 최적화하기 쉬움

한 줄로 말하면:

React = 부품
Next.js = 그 부품으로 집을 짓는 설계도 + 공구

React를 안다면 JSX, props, state, hooks는 그대로 씁니다.
Next.js는 그 위에 파일 기반 라우팅, 서버 컴포넌트, 데이터/폼 처리 같은 규칙을 더합니다.

---

왜 TypeScript를 같이 쓰나

TypeScript는 “어려운 문법 모음”이 아니라, 실수 예방용 안전벨트에 가깝습니다.

예를 들어 메모 객체:

type Memo = {
  id: string;
  title: string;
  content: string;
  createdAt: string;
};

이렇게 정해 두면:

• memo.titlle 같은 오타를 에디터가 바로 잡아 줍니다
• 컴포넌트 props가 뭐가 필요한지 읽지 않아도 보입니다
• API 응답 형태가 바뀌면 쓰는 쪽이 깨져서 빨리 알아챕니다

React만 쓸 때도 TS는 유용하지만,
Next.js처럼 페이지 · 레이아웃 · 서버/클라이언트 경계가 늘어날수록 타입의 이득이 커집니다.

이 시리즈에서는 고급 타입 마법을 하지 않습니다.
props, 데이터 모델, 함수 인자/반환 정도만 확실하게 잡습니다.

---

App Router를 한눈에

Next.js 13 이후 기본은 App Router입니다.
핵심은 단순합니다.

app/
  layout.tsx   → 공통 레이아웃 (헤더, 폰트 등)
  page.tsx     → "/" 페이지
  memos/
    page.tsx   → "/memos" 목록
    [id]/
      page.tsx → "/memos/123" 상세

• 폴더 이름이 URL이 됩니다
• page.tsx가 있어야 그 경로가 페이지로 열립니다
• layout.tsx는 하위 페이지를 감싸는 공통 UI입니다

나중에 다룰 Server Component / Client Component도 이 구조 위에서 이해하면 됩니다.

지금은 이것만 기억하면 충분합니다.

URL = 폴더
화면 = page.tsx
공통 틀 = layout.tsx

---

실습 예고: 메모 앱

앞으로 만들 것은 거창한 SaaS가 아닙니다.

1. 메모 목록 보기
2. 메모 상세 보기
3. 메모 추가하기

이 작은 흐름 안에 라우팅, 타입, 서버/클라이언트, 데이터, 폼이 다 들어갑니다.

“예제용 코드 조각”보다 이어지는 앱 하나로 가면, 복습할 때 훨씬 편합니다.

---

이 편에서 가져갈 것

• Next.js는 React를 대체하는 게 아니라, React로 앱을 만들기 위한 프레임워크다
• TypeScript는 문법이 목적이 아니라, 데이터와 props의 계약을 고정한다
• App Router는 폴더 = URL, page = 화면, layout = 공통 틀이다

---

다음 편 예고

[Next.js + TS] 2. 프로젝트 만들고 폴더 구조 이해하기

• create-next-app으로 프로젝트 생성
• app/, page.tsx, layout.tsx 직접 열어보기
• 첫 화면 문구를 바꿔 보며 “여기가 홈이다”를 몸으로 익히기

---

시리즈 목차

1. 왜 Next.js + TypeScript인가 ← 지금
2. 프로젝트 만들고 폴더 구조 이해하기
3. TypeScript로 컴포넌트 타입 잡기
4. 라우팅과 레이아웃
5. Server Component vs Client Component
6. 데이터 가져오기
7. 폼과 서버 액션 입문
8. 정리 + 다음 학습 로드맵

질문이나 “이 부분 더 풀어서” 싶은 구간 있으면 댓글로 남겨 주세요.
다음 편에서 실제로 프로젝트를 띄웁니다.