GuideBeginner
Nextjs App Router
Take a React app to production with the Next.js App Router: file-based routing, nested layouts, Server Components — the default: they render on the server and never ship their JavaScript to the client — versus Client Components, data fetching in `async` server components, dynamic routes with `params` and `searchParams`, loading and error UI with streaming, and Route Handlers alongside Server Actions to mutate data without writing a separate API. The core idea is the mental-model shift from a classic SPA: in the App Router the server is the default, and you deliberately decide which piece needs client interactivity — that changes where state lives, where data is fetched, and how much JavaScript reaches the browser. Each module runs the logic behind the framework in Node.js — route resolution, server/client classification, parallel versus waterfall fetching, revalidation after a mutation — to verify the reasoning. The throughline is Mercado's storefront ported to Next.js: its root layout, its home page with the catalog fetched on the server, its dynamic product route, and "add to cart" as a Server Action. It continues directly from the React Fundamentals Guide within NIEVA's Fullstack ecosystem.
- 64
- lessons
- 8
- modules
- English · Spanish
- available in
- Yes
- certificate
- Free
- access
Outcomes
What you'll be able to do
- Understand why React needs a framework in production (routing, SSR, data, bundling) and what the App Router solves
- Structure routes by files inside `app/` and compose shared nested layouts
- Distinguish Server Components (the default) from Client Components (`'use client'`) and decide where to draw the boundary
- Fetch data in `async` server components with no `useEffect` and no client-side loading state, avoiding waterfall fetches
- Work with dynamic routes (`[id]`, `params`), read `searchParams` on the server, and generate static routes with `generateStaticParams`
- Build `loading.tsx`, `error.tsx`, and `not-found.tsx` for a streaming loading UX
- Write Route Handlers for HTTP endpoints and Server Actions (`'use server'`) to mutate data with revalidation
- Build Mercado's full storefront in Next.js: routes, server-side data fetching, and "add to cart" as a Server Action
Before you start
What you need to bring
It's for you if...
- React developers who need to take an app to production with SSR, routing, and server-side data fetching
- Those targeting the framework with the most weight in today's fullstack job postings
- Devs coming from a classic client-only SPA who need the mental-model shift toward server-first
- Those who already completed React fundamentals and are ready for the next level: real production
Requirements and materials
- Basic React completed (components, `useState`, events, `useEffect`, lifting state), or having completed the React Fundamentals Guide
- Basic comfort with TypeScript: this guide's code uses `.tsx` and interfaces
- JavaScript ES6+ and Node.js installed
- Familiarity with the terminal and npm
Content
The syllabus, module by module
Open any of them to see its lessons.
- Module introduction: Route Handlers and Server Actions
- Route Handlers: the `route.ts` file
- `Request`, `Response`, and the status codes
- Server Actions and `'use server'`
- Mutating and revalidating
- Route Handler vs Server Action
- Progressive enhancement and validating the input
- Mini-project: Mercado's "add to cart" and a products API
- Module introduction: Mercado's storefront, layer by layer
- Layer 1: the route tree and the `RootLayout`
- Layer 2: the `async` home that fetches the catalog
- Layer 3: the server/client split of the pieces
- Layer 4: the dynamic route and the `searchParams`
- Layer 5: `loading.tsx` and `error.tsx` per route
- Layer 6: the cart's Server Action with `revalidate`
- Project: build Mercado's storefront in Next
Common questions
What people usually ask
No limit. It's a free guide: come in whenever you like, as often as you like.
No. Modules run from easier to harder, but you can jump to the one you need. Progress is saved per lesson.
Whatever is needed is listed under “What you need to bring”, above. If nothing is listed there, you can start from zero.
In the Club's WhatsApp group, and every two weeks there's a live with an instructor where questions get worked through.
Yes. It's issued automatically once you finish every lesson, with a verifiable code you can share on LinkedIn.
Start whenever you like
What students say
These reviews are from enrolled students who completed at least 50% of the course. We moderate reviews only on content grounds (spam, offensive language, personal data), never for being critical or negative.
No approved reviews yet.
Be the first to share your experience!