Next.js App Router: What to Learn First (for Developers Coming from React)

If you already know React, Next.js App Router can still feel like a new framework—not just a router swap. The mental model changes because Next.js is not only rendering UI; it is also deciding where code runs (server vs browser) and how URLs map to files.

This article gives a learning order that works well in classrooms and self-study.

1. Start with file-based routing

In the app/ directory:

• app/page.tsx → /
• app/blog/page.tsx → /blog
• app/blog/[slug]/page.tsx → dynamic segments

Goal: You can predict a URL from the folder structure. That alone removes a lot of confusion.

2. Layouts vs pages

• A layout wraps nested routes and persists across navigation.
• A page is the leaf UI for a route.

Goal: Understand why headers/sidebars belong in layout.tsx and why page files should stay focused.

3. Server Components by default

React Server Components mean much of your UI can render on the server without shipping large client bundles. Client interactivity is added only where needed using "use client".

Goal: Know when you need a client component (state, effects, browser APIs) and when you do not.

4. Data fetching boundaries

In the App Router, data fetching patterns depend on whether you are in a Server Component or a Client Component. Mixing them without a plan creates “works on my machine” bugs.

Goal: Be able to explain in one sentence where your data is fetched for a page.

5. Metadata and SEO basics

Use the Metadata API (export const metadata) for titles and descriptions. This matters for portfolios, blogs, and any site that should be discoverable.

Common pitfalls

• Importing a client-only library into a server component by accident.
• Putting too much logic into layout.tsx so every navigation feels slow.
• Duplicating fetch logic across many pages instead of centralizing helpers.

A simple weekly plan

• Day 1–2: Routing + layouts
• Day 3–4: Server vs client components
• Day 5: Metadata + one dynamic route
• Day 6–7: Build a small feature end-to-end (list + detail page)

---

If you teach web development, have students ship a tiny App Router project early (two routes + a layout). The confidence from a working URL structure beats reading ten tutorials in isolation.