Nextjs React Framework - Client Side
A 15-session course on the client side of Next.js, from React basics and TypeScript to routing, media optimization and front-end testing, with deployment on Vercel from the first weeks.
- Type
- Course
- Duration
- 45h - 15 blocs/sittings
- Materials
- 9 slide decks (PDF)
- Language
- French
What the course covers
The course starts with why a framework saves time and where a client-side framework sits in a web architecture. Students then install their tools and deploy early on Vercel, with development, preview and production environments, public environment variables and the GitHub integration.
From there it builds React and Next.js skills: the difference between the DOM and React’s Virtual DOM, the structure of a TSX file, the useState and useEffect hooks, a JavaScript and TypeScript refresher, Tailwind CSS, function components, folder-based routing and its special files, dynamic segments such as [slug] with usePathname and useSearchParams, image optimization with next/image and WebP, externally hosted videos, and unit tests with Jest (render tests and snapshot tests).
Structure
- Session 1: introduction to client-side frameworks
- Session 2: project setup
- Session 3: deployment
- Session 4: introduction to React
- Session 5: programming and styles (CSS)
- Session 6: exam 1
- Session 7: React components
- Session 8: routing
- Session 9: dynamic pages
- Session 10: exam 2
- Session 11: media (images and videos)
- Session 12: unit tests
- Session 13: work period
- Sessions 14–15: presentations
Technologies
Next.js, React, TypeScript, Tailwind CSS, Node.js, Vercel, GitHub and Jest.