복붙 퍼블리싱 졸업, AI 시대 진짜 경쟁력
Next.js 16 기초
Next.jsApp RouterReactClaude Code
초급총 30회4시간
Next.js 16 기초60,000원
수강 신청이런 경험, 있지 않나요?
AI가 만든 코드를 그대로 쓰는데 에러 나면 막막하다
원리를 모르니까 같은 질문을 AI한테 반복하고 있다
채용공고에 Next.js 필수인데 뭐부터 해야 할지 모르겠다
딸깍 코딩만 하다 보니 실력이 늘지 않는 느낌이다
같은 AI를 써도, 결과가 달라집니다
AI가 준 코드를 복붙 → 에러 나면 또 AI한테 질문
핵심 원리를 알고 직접 판단 → AI는 속도를 높이는 도구
프레임워크 원리를 모르니 AI 지시가 부정확
구조를 이해하고 AI에게 정확히 지시 → 결과 품질 상승
딸깍 코딩 → 누구나 할 수 있는 수준에 머무름
원리 + AI 활용 → 다른 작업자와 차별화된 경쟁력
이런 것을 배웁니다
AI한테 시키기만 하면, 에러가 나도 못 고칩니다
AI가 만든 코드에 에러가 나면 어디를 고쳐야 할까요? App Router의 핵심 로직을 이해하면, AI가 준 코드를 판단하고 수정할 수 있습니다.
최소한의 필수 로직만 배우고, 나머진 AI가 돕습니다
코드를 전부 외울 필요 없습니다. 라우팅, 레이아웃, 서버/클라이언트 구분 — 이 핵심 원리만 알면 AI에게 정확히 지시하고 결과를 제어할 수 있습니다.
딸깍 개발자와 차별화되는 경쟁력
AI한테 전부 맡기는 사람은 많습니다. 하지만 원리를 알고 AI를 도구로 쓰는 사람은 에러 대응, 구조 설계, 코드 리뷰에서 확연히 다릅니다.
커리큘럼
총 6개 파트 · 30강
00. Next.js 시작하기
1Next.js가 뭔가요? — React와의 관계 정리
무료05:00
2왜 Next.js인가 — HTML 복붙 시대의 끝
무료04:00
3Claude Code로 프로젝트 생성하기
무료05:00
4프로젝트 폴더 둘러보기 — 어떤 파일이 뭘 하나
무료06:00
5개발 서버 실행 — localhost에서 결과 확인
무료04:00
01. App Router 기초
6page.tsx — 폴더가 곧 URL이 되는 라우팅
06:00
7여러 페이지 만들기 — about, contact 추가
05:00
8layout.tsx — 공통 레이아웃 한 번만 작성
06:00
9중첩 레이아웃 — 섹션별 다른 구조 적용
06:00
10Link 컴포넌트 — 새로고침 없는 페이지 전환
05:00
02. App Router 심화
11동적 라우트 — [id] 파라미터 활용하기
06:00
12loading.tsx — 페이지 로딩 UI 자동 표시
05:00
13error.tsx — 에러 발생 시 사용자에게 안내
05:00
14not-found.tsx — 404 페이지 만들기
04:00
15라우트 그룹 — (pages) 폴더로 구조 정리
05:00
03. 서버 & 클라이언트 컴포넌트
16서버 컴포넌트란? — JS를 안 보내는 마법
06:00
17클라이언트 컴포넌트 — 'use client'는 언제 쓰나
06:00
18서버/클라이언트 경계 — 어디에 선을 그을까
05:00
19next/image — 이미지 자동 최적화
05:00
20next/font — 폰트 최적화와 적용
04:00
04. 프로젝트 만들기
21멀티페이지 웹사이트 구조 설계
05:00
22홈페이지 구현 — 히어로 + 소개 섹션
07:00
23소개 페이지 + 포트폴리오 페이지
07:00
24연락처 페이지 + 전체 네비게이션 연결
06:00
25generateMetadata — 페이지별 SEO 설정
05:00
05. 반응형 & 배포
26반응형 적용 — 모바일/태블릿 대응
07:00
27최종 점검 — 브라우저별 테스트
05:00
28Vercel 가입 & 프로젝트 연결
05:00
29배포 완료 — 도메인 연결까지
05:00
30정리 — 다음 학습 경로 안내
04:00