Next.js online course
The Next.js online course in CodeWorlds is 9 modules of short lessons with a code editor and 688 hands-on exercises, told as a story-driven adventure. You can read the lessons for free on this site.
Welcome to the Quantum Metropolis of 2150. Learn Next.js by building advanced full-stack applications in a futuristic city.
Your guide
AI Guide Nexus
Artificial Intelligence
What you'll learn
- Next.js 16 App Router and project structure
- Server-Side Rendering (SSR) and Static Site Generation (SSG)
- Incremental Static Regeneration (ISR)
- API Routes and Server Actions
- Database integration (Prisma, PostgreSQL)
- Authentication with NextAuth.js
- Image optimization and lazy loading
- Deployment on Vercel
Main projects
During the course you will build real projects that you can add to your portfolio
Quantum Dashboard
Admin dashboard with SSR, authentication, and database
Neural Network Blog
Blog platform with ISR, MDX, and comments
Mega City E-commerce
Online store with Stripe, shopping cart, and checkout
Course program
9 modules full of interactive exercises and practical projects
Entrance to the Metropolis
Next.js Configuration
Installing and starting a project, the app/ and pages/ structure, Client and Server Components, Turbopack, debugging and rendering
82 exercises
- Introduction to React and Next.js
- Installing and Configuring the Development Environment
- Project Initialization and Available Starters
- Directory and File Structure in Next.js (app/ vs pages/)
All lessons (11)
- Component System - Client and Server Components
- First "Hello World" Application - Step by Step - A Simple Page for a Space Company
- Instrumentation and Debugging Applications
- Next.js Developer Tools
- Turbopack and Compilation Optimization
- Development Environment - Tools and Practices
- Rendering in Next.js - Strategy Overview
City Hyperloop
Routing and Layouts
File-based routing, dynamic segments, Link and useRouter, layouts and loading UI, 404s and redirects, middleware and prefetching
80 exercises
Holographic Interfaces
Styling and Visual Optimization
CSS Modules, Tailwind CSS, shadcn/ui, the Image component and image loading, font optimization, favicons, animations and dark mode
79 exercises
- Global Styles and CSS Modules
- Tailwind CSS Integration and Configuration in Next.js 16
- Shadcn/UI - Components for Next.js 16
- Image Component and Image Optimization in Next.js 16
All lessons (11)
- Image Loading Strategies (lazy, eager, priority) in Next.js 16
- Font Optimization and the Font Component in Next.js 16
- Managing Static Assets in the public Directory in Next.js 16
- Icons, Favicon, and Visual Metadata in Next.js 16
- Animations and Transitions in the User Interface in Next.js 16
- Dark Mode and User Preferences in Next.js 16
- Performance Benchmarks in Next.js 16 - SSR vs SSG vs ISR
Central Mainframe
Databases and Data Fetching
Prisma ORM, models and migrations, data in Server and Client Components, Server Actions, search, pagination, filtering and N+1 queries
86 exercises
Quantum Processing
Rendering Strategies
SSR, SSG and ISR in the App Router, data revalidation, streaming with React Suspense, skeletons, Partial Prerendering, caching and Edge
65 exercises
Citizen Terminal
Forms and Server Actions
React Hook Form, Zod validation on the client and server, error handling and error.tsx, accessible and multi-step forms
69 exercises
Identification System
Authentication and Authorization
NextAuth.js and Auth.js, Google and GitHub sign-in, sessions and tokens, roles and permissions, route-protecting middleware, Clerk
76 exercises
The Spaceport
Deployment and Production
SEO and metadata, Open Graph, sitemaps and robots.txt, analytics, Vercel and Netlify deploys, environment variables, CI/CD, monitoring, PWAs
74 exercises
- Preparing Your Application for Production
- SEO and Dynamic Metadata
- Open Graph and Sharing on Social Platforms
- Generating Sitemaps and robots.txt
All lessons (12)
- Integration with Web Analytics
- Deploying to Vercel, Netlify, and Other Platforms
- Environment Variables and Production Configuration
- CI/CD and Deployment Automation
- Performance Monitoring and Error Analytics
- Progressive Web Apps and Service Workers
- Preview Deployments and Staging Environments
- Project: Full Next.js Application Production Deployment
Mega City Grid
Integrations and Advanced Features
Strapi, Stripe, Resend and React Email, Zustand, TanStack Table, next-intl, Docker, Turborepo, and after() and use cache in Next.js 15
77 exercises
- Introduction to Next.js and Strapi
- Next.js and Stripe - Complete Payment System
- Next.js with Resend and React Email - Modern Email System
- Next.js with Zustand - Modern State Management
All lessons (13)
- Server Actions - Advanced Patterns
- Next.js with TanStack Table - Advanced Data Tables
- Typed Routes - Type-Safe Links with TypeScript
- Internationalization with next-intl
- Next.js and Docker - Application Containerization
- Monorepo with Turborepo
- forbidden() and unauthorized() - New Next.js 15 Functions
- after() API - Executing Code After the Response
- use cache - A New Era of Caching in Next.js 16
Course theme
Quantum Metropolis and Advanced Technologies
Each module is set in a unique theme that makes learning an adventure.
Your guide
AI Guide Nexus
Artificial Intelligence
Will guide you through all challenges and help you gain new skills.
Next.js course FAQ
Is the Next.js course free?
Partly. You can read the Next.js lessons for free on this site. The course tasks in the app require a premium plan, while a free account lets you complete the HTML and CSS course in the app with 10 fuel units a day.
How long does the Next.js course take?
The estimated learning time for the Next.js course is 80-100 hours. The course has 9 modules and more than 688 tasks, and you set the pace.
Do I need previous experience for the Next.js course?
Before the Next.js course it helps to know: World 2 (React.js), JavaScript/TypeScript basics, REST API knowledge.
What will I learn in the Next.js course?
In the Next.js course you will learn, among other things: Next.js 16 App Router and project structure, Server-Side Rendering (SSR) and Static Site Generation (SSG), Incremental Static Regeneration (ISR), API Routes and Server Actions.
What is learning in CodeWorlds like?
In CodeWorlds, every module is a series of short lessons with a live code editor, check questions and hands-on tasks. Progress earns you XP and unlocks new locations in the Cyberpunk 2150 world.
Start learning Next.js 16 today
Join CodeWorlds and discover modern learning methods that make programming fascinating and accessible to everyone.