Next.js Quest

Tracks

1. 01▲Why Next.js? Foundations

   0/8 lessons

   React 은 library, Next.js 가 그 둘레 framework

   Next.js 가 어디 들어가는지, 뭘 주는지, default on 으로 project bootstrap 하는 법.

   Lesson list (8)

   • 01
     React은 Library, Framework이 아니야~22 min · React, Next.js, framework
   • 02
     Next.js 가 주는 것들~22 min · conventions, Turbopack, App Router
   • 03
     Rendering Spectrum~24 min · SSG, ISR, SSR, CSR
   • 04
     App Router vs Pages Router~22 min · App Router, Pages Router, migration
   • 05
     App Router 가 이기는 이유~22 min · RSC, streaming, Suspense
   • 06
     Vercel & Ecosystem~18 min · Vercel, ecosystem, deployment
   • 07
     Next.js vs 대안~18 min · Remix, Astro, SvelteKit, Nuxt
   • 08
     첫 Project~20 min · create-next-app, project structure, Turbopack

   ✓퀴즈 · 4 문제→

2. 02🗺️App Router & Routing

   0/10 lessons

   File-system routing, layout, dynamic, parallel route

   App Router 가 folder 를 URL 로 mapping 하고, layout 살리고, loading/error/parallel slot 으로 compose 하는 법.

   Lesson list (10)

   • 01
     File-Based Routing 기본~20 min · routing, file system, page.tsx
   • 02
     page.tsx — Route Component~22 min · page, params, Promise
   • 03
     layout.tsx — 공유 UI~20 min · layout, persistence, root layout
   • 04
     Nested Layout~20 min · layout, nesting, template
   • 05
     Dynamic Route~22 min · dynamic segment, catch-all, optional
   • 06
     Route Group~18 min · route group, layout split, URL
   • 07
     Parallel Route~24 min · parallel routes, @slot, dashboard
   • 08
     Intercepting Route~22 min · intercepting routes, modal, overlay
   • 09
     Loading, Error, Not Found~22 min · loading, error, not-found, Suspense
   • 10
     Navigation~20 min · Link, useRouter, redirect, prefetch

   ✓퀴즈 · 4 문제→

3. 03⚡Server & Client Components

   0/8 lessons

   Default 가 server-first, client 는 필요한 자리에만

   Component 가 server 에서 도는 때, browser 로 ship 되는 때, 그리고 data 또는 bundle 안 새게 둘 compose 하는 법.

   Lesson list (8)

   • 01
     Server Component 가 default~22 min · RSC, default, server
   • 02
     왜 Server Component?~20 min · bundle, perf, security
   • 03
     Client Component~20 min · use client, interactivity, hooks
   • 04
     판단 framework~18 min · server vs client, decision, tree
   • 05
     Server Component 안 data~20 min · fetch, async, Promise.all
   • 06
     Serialization Boundary~22 min · serialization, props, boundary
   • 07
     Composition Pattern~20 min · composition, providers, children
   • 08
     흔한 실수~20 min · pitfalls, anti-patterns

   ✓퀴즈 · 4 문제→

4. 04🔄Data Fetching & Caching

   0/9 lessons

   Component 안 fetch, 의도적 cache, on-demand invalidate

   Server Component fetching, v15 cache flip, ISR, on-demand revalidation, streaming, 새 `'use cache'` directive.

   Lesson list (9)

   • 01
     Server Component Fetching~20 min · fetch, Server Component, dedupe
   • 02
     fetch() 가 더 이상 cache 안 됨~22 min · caching, v15, breaking change
   • 03
     Time-Based Revalidation (ISR)~20 min · ISR, revalidate, stale-while-revalidate
   • 04
     On-Demand Revalidation~22 min · revalidatePath, revalidateTag, Server Actions
   • 05
     Static vs Dynamic Detection~20 min · dynamic functions, force-static, force-dynamic
   • 06
     Parallel & Sequential Fetching~20 min · Promise.all, waterfall, perf
   • 07
     Streaming & Suspense~22 min · streaming, Suspense, loading
   • 08
     generateStaticParams~18 min · SSG, dynamic routes, build time
   • 09
     'use cache' Directive~24 min · use cache, cacheLife, cacheTag

   ✓퀴즈 · 4 문제→

5. 05✏️Server Actions & Forms

   0/8 lessons

   Mutation 을 function 으로, form 을 platform primitive 로

   Mutation 을 inline 선언, JS 없이 작동하는 form render, Zod 로 validate, optimistic UI ship.

   Lesson list (8)

   • 01
     Server Action 이란?~20 min · Server Action, use server, mutations
   • 02
     Form Action~20 min · form, action, FormData
   • 03
     useActionState~22 min · useActionState, form state, errors
   • 04
     useFormStatus~18 min · useFormStatus, pending, submit button
   • 05
     Progressive Enhancement~20 min · progressive enhancement, no-JS, forms
   • 06
     Zod 로 Validation~22 min · validation, Zod, security
   • 07
     Optimistic Update~20 min · useOptimistic, instant UI
   • 08
     Security & Best Practice~22 min · security, CSRF, auth, closures

   ✓퀴즈 · 4 문제→

6. 06🔀Route Handlers, Auth & Middleware

   0/9 lessons

   API route, 새 proxy.ts, auth, env, i18n

   Public surface 위한 Route Handler, cross-cutting concern 위한 Proxy (옛 Middleware), Auth.js / Clerk / Supabase, env variable, internationalization, error handling.

   Lesson list (9)

   • 01
     Route Handler~20 min · route handler, API, REST
   • 02
     Proxy (옛 Middleware)~22 min · proxy, middleware, Node runtime
   • 03
     Proxy 사용 사례~20 min · auth gate, geo, A/B testing
   • 04
     Auth.js v5 (NextAuth)~22 min · Auth.js, OAuth, session
   • 05
     Clerk & Supabase Auth~18 min · Clerk, Supabase Auth, managed auth
   • 06
     Protected Route~20 min · defense in depth, auth
   • 07
     Environment Variable~18 min · env, NEXT_PUBLIC_, secrets
   • 08
     Internationalization~20 min · i18n, next-intl, locale
   • 09
     Error Handling Pattern~20 min · error.tsx, global-error.tsx, boundaries

   ✓퀴즈 · 4 문제→

7. 07🎨Styling, Images & Optimization

   0/8 lessons

   Tailwind, CSS Module, font, image, script, Web Vitals

   Framework default 와 안 싸우고 Next.js 에서 styling, image-optimize, ship-fast 하는 법.

   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
     Performance & Core Web Vitals~22 min · LCP, CLS, INP, Web Vitals

   ✓퀴즈 · 4 문제→

8. 08🚀Deployment & Production

   0/8 lessons

   Vercel, self-hosting, Docker, monitoring, launch checklist

   Next.js 를 Vercel, 본인 box, 또는 다른 어디든 ship — 그리고 live 가기 전에 뭐 verify 할지.

   Lesson list (8)

   • 01
     Vercel Deployment~18 min · Vercel, git push, preview
   • 02
     Self-Hosting~22 min · self-host, next start, PM2
   • 03
     Docker~22 min · Docker, standalone, multi-stage
   • 04
     Static Export~18 min · static export, out, no SSR
   • 05
     Production 의 Environment Variable~20 min · env, build vs runtime, Docker
   • 06
     Monitoring & Error Tracking~20 min · Sentry, Web Vitals, instrumentation
   • 07
     Vercel 대안~18 min · Netlify, Cloudflare Pages, AWS
   • 08
     Production Checklist~24 min · checklist, launch, audit

   ✓퀴즈 · 4 문제→