Next.js Quest

Tracks

1. 01▲Next.js가 맡는 기초

   0/8 lessons

   React가 맡지 않는 책임과 Next.js의 관례

   Next.js가 어느 문제를 맡고, 어떤 기본값으로 프로젝트를 세우는지 배워.

   Lesson list (8)

   • 01
     React는 라이브러리일 뿐, 프레임워크는 아니야~22 min · React, Next.js, framework
   • 02
     Next.js가 대신 맡아주는 일~22 min · conventions, Turbopack, App Router
   • 03
     렌더링은 하나의 스펙트럼이야~24 min · SSG, ISR, SSR, CSR
   • 04
     App Router와 Pages Router~22 min · App Router, Pages Router, migration
   • 05
     App Router가 강한 이유~22 min · RSC, streaming, Suspense
   • 06
     Vercel과 Next.js 생태계~18 min · Vercel, ecosystem, deployment
   • 07
     Next.js와 다른 선택지~18 min · Remix, Astro, SvelteKit, Nuxt
   • 08
     첫 프로젝트 세우기~20 min · create-next-app, project structure, Turbopack

   ✓퀴즈 · 4 문제→

2. 02🗺️App Router와 라우팅

   0/10 lessons

   파일 시스템 라우팅, 레이아웃, 동적·병렬 경로

   폴더를 URL로 연결하고 레이아웃 수명, 로딩·오류, 병렬 슬롯을 설계해.

   Lesson list (10)

   • 01
     폴더가 주소가 되는 규칙~20 min · routing, file system, page.tsx
   • 02
     page.tsx가 받는 값~22 min · page, params, Promise
   • 03
     layout.tsx로 공유 UI 유지하기~20 min · layout, persistence, root layout
   • 04
     중첩 레이아웃의 수명 이해하기~20 min · layout, nesting, template
   • 05
     동적 라우트의 세 가지 모양~22 min · dynamic segment, catch-all, optional
   • 06
     주소를 바꾸지 않는 라우트 그룹~18 min · route group, layout split, URL
   • 07
     병렬 라우트로 여러 슬롯 그리기~24 min · parallel routes, @slot, dashboard
   • 08
     가로채기 라우트로 모달과 전체 화면 함께 쓰기~22 min · intercepting routes, modal, overlay
   • 09
     로딩·오류·404 경계~22 min · loading, error, not-found, Suspense
   • 10
     앱 안에서 자연스럽게 이동하기~20 min · Link, useRouter, redirect, prefetch

   ✓퀴즈 · 4 문제→

3. 03⚡서버와 클라이언트 컴포넌트

   0/8 lessons

   서버에서 시작해 필요한 상호작용만 브라우저로

   컴포넌트 실행 위치와 직렬화 경계를 나누고 작은 클라이언트 섬으로 조합해.

   Lesson list (8)

   • 01
     서버 컴포넌트가 기본값이야~22 min · RSC, default, server
   • 02
     서버 컴포넌트가 줄여 주는 비용~20 min · bundle, perf, security
   • 03
     브라우저가 필요할 때만 클라이언트 컴포넌트~20 min · use client, interactivity, hooks
   • 04
     서버와 클라이언트를 고르는 기준~18 min · server vs client, decision, tree
   • 05
     서버 컴포넌트에서 데이터 읽기~20 min · fetch, async, Promise.all
   • 06
     서버와 클라이언트 사이의 직렬화 경계~22 min · serialization, props, boundary
   • 07
     서버와 클라이언트를 조합하는 세 가지 방식~20 min · composition, providers, children
   • 08
     컴포넌트 경계에서 자주 하는 실수~20 min · pitfalls, anti-patterns

   ✓퀴즈 · 4 문제→

4. 04🔄데이터 읽기와 캐시

   0/9 lessons

   필요한 곳에서 읽고 신선도를 의도적으로 선택해

   서버 데이터 읽기, Next.js 15 캐시 변화, ISR, 요청형 재검증, 스트리밍, use cache를 다뤄.

   Lesson list (9)

   • 01
     서버 컴포넌트에서 바로 데이터 가져오기~20 min · fetch, Server Component, dedupe
   • 02
     Next.js 15부터 fetch()는 기본 캐시가 아니야~22 min · caching, v15, breaking change
   • 03
     시간 기반 재검증과 ISR~20 min · ISR, revalidate, stale-while-revalidate
   • 04
     변경 직후 캐시 무효화하기~22 min · revalidatePath, revalidateTag, Server Actions
   • 05
     정적·동적 렌더링은 코드가 결정해~20 min · dynamic functions, force-static, force-dynamic
   • 06
     병렬 요청과 순차 요청 구분하기~20 min · Promise.all, waterfall, perf
   • 07
     스트리밍과 Suspense로 먼저 보여 주기~22 min · streaming, Suspense, loading
   • 08
     generateStaticParams로 동적 주소 미리 만들기~18 min · SSG, dynamic routes, build time
   • 09
     Next.js 16의 'use cache'~24 min · use cache, cacheLife, cacheTag

   ✓퀴즈 · 4 문제→

5. 05✏️서버 액션과 폼

   0/8 lessons

   변경은 서버 함수로, 폼은 HTML에서 출발해

   서버 액션, 점진적으로 향상되는 폼, Zod 검증, pending과 낙관적 UI를 익혀.

   Lesson list (8)

   • 01
     서버 액션은 함수로 표현한 변경 엔드포인트야~20 min · Server Action, use server, mutations
   • 02
     폼과 서버 액션 연결하기~20 min · form, action, FormData
   • 03
     React 19의 useActionState~22 min · useActionState, form state, errors
   • 04
     하위 컴포넌트에서 제출 상태 읽기~18 min · useFormStatus, pending, submit button
   • 05
     JavaScript가 없어도 작동하는 폼~20 min · progressive enhancement, no-JS, forms
   • 06
     Zod로 서버 입력 검증하기~22 min · validation, Zod, security
   • 07
     낙관적 업데이트로 기다림 감추기~20 min · useOptimistic, instant UI
   • 08
     서버 액션의 보안 경계~22 min · security, CSRF, auth, closures

   ✓퀴즈 · 4 문제→

6. 06🔀라우트 핸들러·인증·Proxy

   0/9 lessons

   외부 HTTP 계약과 인증·환경·국제화 경계

   공개 API와 webhook, Next.js 16 Proxy, 인증, 환경 변수, 국제화, 오류 경계를 다뤄.

   Lesson list (9)

   • 01
     외부 HTTP 계약은 라우트 핸들러가 맡아~20 min · route handler, API, REST
   • 02
     Next.js 16의 Proxy~22 min · proxy, middleware, Node runtime
   • 03
     Proxy가 잘 맡는 네 가지 일~20 min · auth gate, geo, A/B testing
   • 04
     Auth.js v5의 단일 auth() 모델~22 min · Auth.js, OAuth, session
   • 05
     Clerk·Supabase Auth·Auth.js 고르기~18 min · Clerk, Supabase Auth, managed auth
   • 06
     보호 라우트는 여러 겹으로 지켜~20 min · defense in depth, auth
   • 07
     환경 변수의 서버·클라이언트 경계~18 min · env, NEXT_PUBLIC_, secrets
   • 08
     국제화 라우팅 설계하기~20 min · i18n, next-intl, locale
   • 09
     오류 경계와 추적 ID 연결하기~20 min · error.tsx, global-error.tsx, boundaries

   ✓퀴즈 · 4 문제→

7. 07🎨스타일·이미지·최적화

   0/8 lessons

   정적 CSS, 이미지·글꼴·스크립트, Web Vitals

   서버 컴포넌트 경계와 어울리는 스타일, 자산 최적화, 실제 사용자 성능 측정을 익혀.

   Lesson list (8)

   • 01
     CSS Module로 컴포넌트 스타일 가두기~18 min · CSS Modules, scoping, no conflicts
   • 02
     Tailwind CSS를 기본 스타일 언어로 쓰기~20 min · Tailwind v4, PostCSS, @theme
   • 03
     서버 컴포넌트에서 CSS-in-JS가 어려운 이유~18 min · CSS-in-JS, styled-components, registry
   • 04
     next/image로 이미지 비용 관리하기~22 min · next/image, optimization, CLS
   • 05
     next/font로 글꼴을 빌드에 포함하기~18 min · next/font, self-hosted fonts, CLS
   • 06
     Metadata API로 검색·공유 정보를 만들기~20 min · metadata, OG image, SEO
   • 07
     next/script의 로딩 시점 고르기~18 min · next/script, loading strategy, third-party
   • 08
     Core Web Vitals를 실제 사용자 기준으로 보기~22 min · LCP, CLS, INP, Web Vitals

   ✓퀴즈 · 4 문제→

8. 08🚀배포와 운영

   0/8 lessons

   Vercel, 자체 호스팅, Docker, 관측, 출고 검증

   Next.js를 여러 환경에 배포하고 실제 production 런타임을 검증하는 법을 익혀.

   Lesson list (8)

   • 01
     Vercel에 Next.js 배포하기~18 min · Vercel, git push, preview
   • 02
     Next.js 자체 호스팅의 책임~22 min · self-host, next start, PM2
   • 03
     Standalone 출력으로 Docker 이미지 줄이기~22 min · Docker, standalone, multi-stage
   • 04
     정적 내보내기로 서버 없애기~18 min · static export, out, no SSR
   • 05
     프로덕션 환경 변수의 빌드·실행 시점~20 min · env, build vs runtime, Docker
   • 06
     오류·성능·로그를 한 관측 체계로 묶기~20 min · Sentry, Web Vitals, instrumentation
   • 07
     Vercel 밖에서 Next.js 운영하기~18 min · Netlify, Cloudflare Pages, AWS
   • 08
     프로덕션 출고 체크리스트~24 min · checklist, launch, audit

   ✓퀴즈 · 4 문제→