Next.js Course: Server-Rendered React Applications
Next.js (Server Rendering) is an advanced-level course of 5 lessons (about 1 h 49 min), with 16 exercises and 15 quiz questions. Prerequisites: React. The course needs a full project environment, planned for a later phase of the platform.
- Front-end
- Advanced
- 5 lessons
- 1 h 49 min
- 16 exercises
- Full project environment (phase 2)
The course in brief
This course teaches you how to build complete React applications with Next.js and its App Router. You will choose the right rendering mode for each page, organize routes and layouts, load and cache data on the server, write APIs with Route Handlers and forms with Server Actions, then deploy the application. The server logic is tested automatically in JavaScript, and the guided tasks are carried out in a real Next.js project.
What you will be able to do
- Choose between static rendering, partial prerendering, and incremental regeneration for each page
- Separate Server Components from Client Components while limiting the JavaScript sent to the browser
- Organize an application with the App Router: layouts, dynamic segments, loading, errors, and metadata
- Load data on the server, cache it, and invalidate it after a change
- Write validated and secure Route Handlers and Server Actions
- Build and deploy a Next.js application in a container or as a static export without exposing any secret
Syllabus: 5 lessons
- Distinguish client-side rendering, static rendering, partial prerendering, and incremental regeneration
- Explain the difference between a Server Component and a Client Component in the App Router
- Place the "use client" directive in the right spot to limit the JavaScript sent to the browser
Server-side rendering (SSR)Static rendering and ISRServer and Client Components
- 02
Routing with the App Router
- Create routes, nested layouts, and dynamic segments with folders
- Handle loading, errors, and missing pages with special files
- Prerender dynamic pages with generateStaticParams and define their metadata
- 03
Loading Data and Mastering the Cache
- Load data in Server Components, in parallel and with progressive display
- Cache data or components with "use cache", cacheLife, and cacheTag
- Invalidate the cache after a change with updateTag, revalidateTag, and revalidatePath
- 04
Built-in APIs: Route Handlers and Server Actions
- Expose an HTTP API with Route Handlers (route.ts)
- Process a form with a Server Action, validate it, and revalidate the affected pages
- Secure Route Handlers and Server Actions as genuine public entry points
- 05
Building and Deploying a Next.js Application
- Produce a production build and choose a hosting mode (Node server, container, static export)
- Manage environment variables without exposing secrets
- Prepare for SEO and performance: images, sitemap, robots
Production buildEnvironment variablesDeploymentTechnical SEO
Final project
Next.js Store with Cached Catalog and Admin Area
Build a store with Next.js (App Router): static home page, prerendered and cached catalog and product pages ("use cache", cacheLife, cacheTag), a product page with metadata and 404, a cart as a Client Component, a protected admin area where validated Server Actions modify products and invalidate the cache, a paginated /api/v1/produits API for a future mobile app, and a standalone container deployment.
Deliverables
- The Next.js project source code (app/, lib/, next.config.ts)
- The next build report showing each route's rendering mode, with commentary
- The admin Server Actions with validation, permission checks, and revalidation
- The paginated Route Handler and its unit tests
- The standalone Dockerfile, the .dockerignore, and a .env.example
- A README explaining the rendering and caching choices page by page
Assessment criteria
- Each page's rendering mode is justified and consistent with the build report
- "use client" directive limited to interactive components
- Data loaded on the server, in parallel when possible, and invalidated after each write
- Server Actions and Route Handlers validated, authenticated, and authorized
- No secret exposed on the client side; variables documented
- Working Docker image and pages that can be properly indexed (metadata, sitemap, robots)
Frequently asked questions
Do I need to know React before taking this course?
Yes. The React course is the prerequisite: components, props, state, effects, and forms must be mastered. Next.js adds server rendering, routing, and back-end code to the same project.
Does the course use the App Router or the Pages Router?
The App Router (app/ folder), the recommended router for new projects. The rendering principles remain useful if you maintain an older project on the Pages Router.
Which version of Next.js is covered?
The course follows Next.js 16.4 as created by create-next-app, with Cache Components enabled: partial prerendering, "use cache", cacheLife, updateTag, async params, and proxy.ts. Options from older projects (export const revalidate, fetch cache) are flagged.
Do I need a particular host to deploy Next.js?
No. A Next.js application can be deployed on a Node.js server, in a Docker container in standalone mode, or as a static export for a site with no server features. Managed platforms also exist.
This course, told for your job
Say what you want to be able to do: “Next.js (Server Rendering)” takes its place in your path, with examples from your field. The concepts stay those of the course.