2026년 최신 업데이트 반영
Next.js 기초, 처음 마주했을 때 막막했던 그 기분
- Next.js 기초, 처음 마주했을 때 막막했던 그 기분
- 1. Next.js가 뭔지부터 정리하고 갈게요
- 2. AI 앱 만들 때 Next.js를 왜 고를까요?
- 3. 다른 프레임워크와 어떻게 다를까요?
- 4. 첫 프로젝트 시작하는 법
- FAQ
- 마무리하며
관련 글: 더 많은 글 보러가기
공식 자료: 관련 검색
React로 간단한 ChatGPT 클론을 만들어보겠다고 마음먹었던 적 있죠? 저도 그랬어요. 그런데 막상 OpenAI API 키를 어디에 숨겨야 하나, 라우팅은 어떻게 해야 하나 고민하다가 결국 Next.js라는 단어를 마주하게 됐습니다. 솔직히 처음엔 “그냥 React면 충분하지 않나?” 싶었거든요. 그런데 며칠 써보니 왜 다들 이 프레임워크를 쓰는지 알겠더라고요. 오늘은 그때 제가 알았더라면 좋았을 Next.js 기초 내용을 정리해 보려고 합니다.
1. Next.js가 뭔지부터 정리하고 갈게요
한 줄로 말하면 React 기반 풀스택 프레임워크예요. 2016년 Vercel(당시 Zeit)이 공개한 뒤 지금은 npm 주간 다운로드 약 850만 건을 찍는 거대한 생태계가 됐습니다. 2026년 4월 현재 안정 버전은 15.x 라인이고, GitHub 별 12만 개를 넘어섰어요. 단순 SPA가 아니라 서버 렌더링·정적 생성·API 라우트·이미지 최적화까지 한 묶음으로 제공한다는 게 핵심이고요.
Q. App Router 와 Pages Router, 헷갈리는 두 갈래
13 버전부터 도입된 App Router는 React Server Components를 기본으로 씁니다. app/ 폴더 안에 page.tsx를 두면 그 경로가 자동으로 생기는 구조죠. 예전부터 쓰던 Pages Router는 pages/ 폴더 기반이고 여전히 유효하지만, 신규 작업이라면 새 방식을 권장하는 분위기입니다. 처음 입문하는 분이라면 둘 중 하나만 골라서 끝까지 밀고 나가세요. 섞으면 정말 혼란스러워져요.
2. AI 앱 만들 때 Next.js를 왜 고를까요?
ChatGPT API나 Claude API를 호출하는 챗봇을 한번이라도 만들어본 분이라면 공감하실 거예요. 클라이언트에서 직접 API 키를 들고 있을 수는 없잖아요. 백엔드가 따로 필요한데, 그러자고 Express 서버를 또 띄우는 건 번거롭고요. 이 프레임워크는 app/api/ 안에 함수 하나만 두면 그게 그대로 서버리스 엔드포인트가 됩니다. Vercel에 올리면 별도 인프라 세팅 없이 배포되는 게 큰 장점이에요.
실제로 Vercel AI SDK가 이 환경에 최적화돼 있어서, 스트리밍 응답을 처리하는 코드가 10줄 안쪽으로 끝나기도 합니다. Claude API 연동하는 흐름을 잡아두면 다른 LLM으로 갈아끼우기도 쉽고요.
3. 다른 프레임워크와 어떻게 다를까요?
“그냥 Vite로 만들면 안 되나?”라는 질문 정말 많이 받아요. 결론부터 말하면 목적이 다릅니다. 아래 표로 정리해 드릴게요.
| 항목 | Next.js 15 | Vite + React | Remix |
|---|---|---|---|
| SSR/SSG 기본 지원 | O (내장) | X (수동 설정) | O |
| API 라우트 | 파일 기반 | 별도 서버 필요 | loader/action |
| 학습 난이도 | 중간 | 쉬움 | 중상 |
| 대표 호스팅 | Vercel(원클릭) | Netlify/Cloudflare | Fly.io 등 |
가벼운 대시보드만 만들 거라면 Vite가 시작이 빠르고요. 검색 노출이 중요하거나 LLM 백엔드를 함께 묶을 거라면 Next.js 쪽이 손이 덜 갑니다. 저는 사이드 프로젝트 중 80% 정도를 이 도구로 굴리고 있어요.
4. 첫 프로젝트 시작하는 법
설치부터 첫 화면까지 5분
터미널에 npx create-next-app@latest my-ai-app 한 줄이면 끝입니다. TypeScript 쓸지, ESLint 쓸지, Tailwind를 켤지 묻는데 처음이면 전부 Yes 권장이에요. 설치 끝나면 npm run dev로 3000번 포트가 열립니다. 핫 리로드가 평균 200ms 안쪽이라 코드 고치는 재미가 쏠쏠해요.
API 라우트 만들어 보기
app/api/chat/route.ts 파일을 만들고 그 안에 POST 함수를 export 하면 그게 곧 /api/chat 엔드포인트가 됩니다. 환경변수 .env.local에 키를 넣고 process.env로 읽어 쓰면 클라이언트 번들엔 새지 않아요. 이 부분만 익혀도 프롬프트 엔지니어링 실험을 웹 UI로 돌려볼 수 있게 됩니다.
FAQ
Q1. React만 알아도 시작할 수 있나요?
A. 컴포넌트 개념과 useState 정도만 잡혀 있으면 충분해요. 라우팅·서버 코드 부분은 공식 튜토리얼 6시간 분량으로 따라잡힙니다.
Q2. 무료로 배포할 수 있나요?
A. Vercel Hobby 플랜이 무료고 월 100GB 대역폭, 100시간 빌드 타임을 줍니다. 개인 프로젝트는 거의 다 이 안에서 해결돼요.
Q3. 백엔드 따로 만들어야 하나요?
A. 트래픽이 크지 않다면 Route Handler만으로 충분합니다. DB 작업이 무거워지면 그때 Supabase나 Neon 같은 외부 서비스를 붙이는 흐름을 추천드려요.
마무리하며
처음에는 폴더 구조도 낯설고 서버 컴포넌트라는 개념도 머릿속이 복잡해질 수 있어요. 그래도 작은 LLM 챗봇 하나만 처음부터 끝까지 만들어 보시면 감이 확 잡힙니다. 오늘 정리한 다섯 가지 — 정의, 두 가지 라우터, AI 앱과의 궁합, 비교표, 첫 프로젝트 흐름 — 이걸 손에 익히는 게 출발점이에요.
여러분은 어떤 사이드 프로젝트를 만들어보고 싶으신가요? 댓글로 아이디어 남겨 주시면 다음 글에서 그 주제로 실제 구현 흐름을 풀어드릴게요. 글이 도움이 됐다면 SNS에 공유해 주시면 큰 힘이 됩니다.