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.
You pick the voice
Building with Next.js is taught in the 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
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.
The Solo Developer's System Design
Master the architectural patterns and deployment strategies needed to build, ship, and maintain professional-grade web applications without a team.
The Digital Architect: From Pixels to Packets
Master the invisible systems that power our world. Move beyond basic usage to understand how data travels, how users think, and how complex software stays standing under pressure.
React: Beyond the Basics
Move past simple components and learn to build fluid, professional interfaces. Master the art of managing complex data flows and optimizing your app's performance for a seamless user experience.
Build Your Own Home Lab
Move beyond basic Wi-Fi and start building professional-grade networks on your laptop. Learn to architect virtual environments, secure traffic with firewalls, and master the protocols that power the global internet.
Start Building with Next.js today.
Download Tomo, search Building with Next.js, and play your first lesson in under a minute.