Building with Next.js
Transform your React skills into production-grade full-stack web applications. Learn how Next.js handles routing, server rendering, streaming, and data mutations without complex backend setups.
Like Duolingo, but for Building with Next.js. Tomo turns the whole topic into a game you play five minutes a day, until it actually sticks.
A short one: 12 levels across 2 sections, about 24 minutes end to end, roughly 5 days at five minutes a day. It moves through Constructing Pages and Navigation and Streaming Data and Managing State. It starts from scratch.
Free forever · No credit card · iPhone & Android
Key ideas in Building with Next.js
- In Next.js, creating a folder inside app sets up the URL segment
- A page.js file inside a folder is required to make that route publicly visitable
- Folders without a page.js file do not render a page
- A layout.js wraps around page.js views inside its directory
- When switching between sibling pages, Next.js keeps the layout mounted instead of re-rendering it
- Wrapping a folder name in square brackets like [id] turns it into a dynamic segment in Next.js
- The value in the URL matches the bracketed name and gets passed directly to the page component
- The root layout wraps all pages across the entire Next.js application
- Subdirectory layouts nest inside parent layouts as the folder path goes deeper
- The specific page.js renders as the innermost child
- The Next.js Link component automatically downloads the target page code in the background when the link appears on screen
- Client-side navigation swaps the UI in place without triggering a full browser refresh
- Next.js renders components on the server by default
- The browser only receives pre-rendered HTML instead of component JavaScript
- Keeping default components on the server makes the client bundle smaller and faster
- Server Components can be declared with async and use await directly in the component body
You've tried the other tabs
Thirty open tabs. Four facts you actually kept.
You watched. You nodded. By Sunday it was gone.
One answer, then back to scrolling.
Eight weeks. You meant to finish. You didn't.
Tomo gives Building with Next.js the Duolingo treatment: levels, streaks, and quick quizzes that test what you just learned. That game loop is what the tabs above never had, so it's the one you actually finish.
Here's what playing it feels like
A real question from this course. Take your best guess.
What file must you put inside a folder to make its route publicly visitable?
Get it right to open this lesson and 11 more in the app.
Where Building with Next.js takes you
- 1
Constructing Pages and Navigation
- Routing with the File System
- Splitting Server and Client Work
- 2
Streaming Data and Managing State
- Streaming Content and Catching Errors
- Mutating Data with Server Actions
2 sections · 4 units · 12 levels. Built to play, not to enroll.
Tomo is in ChatGPT
Tomo is also a ChatGPT plugin: the same playable courses, built and played inside your chat.
Add Tomo to ChatGPT- What to ask
- “Make me a Tomo course on black holes.” “Turn this chat into a Tomo course.”
- What you get
- Quick questions with instant feedback, hearts and stars, ready to play in about a minute.
- Where it goes
- No sign-up to start. Connect your Tomo account and your streak carries on in the app.
You pick the voice
Building with Next.js is taught in the Bestie style: your friend who just gets it. Want a different feel? In the app you can spin up the same topic in any of Tomo's teaching styles. Same facts, totally different vibe.
More Technology on Tomo
Building Web Apps with Angular
Construct dynamic, modern web interfaces using Google's Angular framework. Learn to bind data, craft reusable components, and fetch live network content with confidence.
Designing Microservice Architectures
Move beyond the basics of monolithic code to build scalable, decoupled distributed systems. Master service boundaries, distributed data management, and resilience patterns required to run reliable microservices in production.
Jetpack Compose: Beyond the Basics
Master the art of building high-performance, scalable Android UIs. Move past simple layouts to handle complex state, custom graphics, and seamless architecture.
JavaScript Logic for Web and Mobile
Bridge the gap between basic syntax and professional application architecture. Master the logic patterns required to build responsive, high-performance apps that work seamlessly across every device.
Excel for Everyday Work
Build confidence in Excel by learning how spreadsheets actually think and operate. From basic data entry and rock-solid formulas to lookups and pivot tables, you'll gain the practical skills needed to organize, calculate, and present data with clarity.
Everyday Artificial Intelligence
Learn how modern AI models actually work and how to steer them effectively. Discover how to get reliable results, spot hallucinations, and pick the right tool for any task.
Start Building with Next.js today.
Download Tomo, search Building with Next.js, and play your first lesson in under a minute.