← Courses
IND 517 · 3 credits
Course Outline
Next.js
Take your React skills to production with Next.js. You already know components, hooks, Express servers, and REST from the React and Backend with Node.js courses. Next.js fuses them into one framework: file-based routing, server components, data fetching with smart caching, server actions, and one-command deploys. You finish by shipping a complete mini-app.
What you will learn
- ✓Explain what Next.js adds on top of React (routing, server rendering, data fetching, deployment) and when a framework beats a plain React SPA
- ✓Build multi-page apps with the app directory: pages, nested layouts, dynamic [slug] routes, loading and error states, and Link-based navigation
- ✓Apply the server vs client component mental model to decide where code runs and where 'use client' belongs
- ✓Fetch data in async server components and reason about static, dynamic, and ISR rendering plus fetch caching
- ✓Handle mutations with forms, server actions, and API route handlers, connecting back to the REST patterns from Backend with Node.js
- ✓Ship a real app: metadata for SEO, optimized images and fonts, environment variables, and a production build deployed to a platform like Vercel
Course outline
Unit 1Why a framework: React for production
- 1-1What React alone doesn't give you3 checks · 10 min
- 1-2Meet Next.js2 checks · 8 min
- 1-3Rendering on the server: the big idea2 checks · 9 min
Unit 2Project anatomy and file-based routing
- 2-1Anatomy of a Next.js project2 checks · 10 min
- 2-2Folders become URLs3 checks · 12 min
- 2-3Layouts and navigating with Link2 checks · 10 min
Unit 3Server vs client components
- 3-1Two kinds of components2 checks · 9 min
- 3-2The 'use client' boundary3 checks · 11 min
- 3-3Composing the two worlds3 checks · 11 min
- 3-4Props across the boundary3 checks · 10 min
Unit 4Data fetching
- 4-1Async server components3 checks · 12 min
- 4-2The caching mental model2 checks · 10 min
- 4-3Loading and error states2 checks · 9 min
- 4-4Streaming parts of a page with Suspense2 checks · 9 min
Unit 5Dynamic routes and params
- 5-1[slug] routes and params3 checks · 10 min
- 5-2generateStaticParams: prebuild the pages3 checks · 11 min
- 5-3notFound and catch-all routes2 checks · 8 min
- 5-4searchParams: filters and pagination in the URL3 checks · 10 min
Unit 6Mutations: forms, server actions, route handlers
- 6-1Forms and server actions3 checks · 10 min
- 6-2After the write: revalidate and pending states3 checks · 11 min
- 6-3API route handlers2 checks · 9 min
Unit 7Rendering strategies and SEO
- 7-1Static, dynamic, and ISR in plain words3 checks · 11 min
- 7-2What makes a page dynamic2 checks · 8 min
- 7-3Metadata and SEO basics3 checks · 11 min
Unit 8Styling and assets
- 8-1CSS in Next.js2 checks · 8 min
- 8-2Images and fonts2 checks · 9 min
Unit 9Shipping: build, deploy, and the capstone tour
- 9-1Environment variables done right4 checks · 10 min
- 9-2Build and deploy2 checks · 9 min
- 9-3Capstone tour: a mini-app end to end3 checks · 12 min
Practice while you learn
Use Hack University's public online code editor when you want to run code online before committing to the full curriculum. The browser compilers are free for quick syntax checks, exercises, and interview practice in an isolated sandbox environment.