Chapter Goals

Vanilla web development is essential for understanding the browser, but as your project grows, managing the UI and data manually becomes overwhelming. This is where modern frameworks come in.

React changes how we think about the UI—shifting from manipulating the DOM directly to defining states. Next.js takes React and provides the infrastructure (routing, rendering, server-side capabilities) needed to build production-ready applications.

The goal of this chapter is to understand the "component" mindset and learn how to navigate modern development using the Next.js App Router.

---

Learning Resources

⚛️ React: The UI Library

The official React documentation was completely rewritten recently and is now widely considered one of the best technical guides on the internet.

• React Official Docs (react.dev) ⭐⭐⭐⭐⭐
  Why: This is the only resource you truly need for React. Start with "Describing the UI" to understand components, and then read "Adding Interactivity" to grasp how state works. The interactive sandbox examples are perfect for learning by doing.
• Thinking in React ⭐⭐⭐⭐⭐
  Why: Before writing complex code, read this specific page. It teaches you the essential mental model of breaking a design down into a logical component hierarchy.

▲ Next.js: The React Framework

While React handles the UI components, Next.js provides the architecture. We will focus entirely on the modern App Router, which is the current standard for building applications.

• Next.js Official Docs (App Router) ⭐⭐⭐⭐⭐
  Why: The official documentation is well-structured and practical. Focus heavily on the "Routing" and "Data Fetching" sections to understand how files become routes.
• Next.js Learn Course ⭐⭐⭐⭐⭐
  Why: A free, official, step-by-step tutorial that guides you through building a full-stack dashboard application. It covers everything from databases to styling and navigating between pages.

---

Learning Objectives

1. Component Thinking: Be able to break down a complex UI into small, reusable React components.
2. State Management: Understand how useState and useEffect control the data and lifecycle of your application.
3. Modern Routing: Grasp the file-system based routing of the Next.js App Router (using page.tsx and layout.tsx).
4. Rendering Environments: Understand the critical difference between Server Components (for performance and data) and Client Components (for interactivity).
5. Final Goal: Build a multi-page interactive application, such as a simple "Demo Gallery" to categorize and showcase your previous static projects, utilizing Next.js routing and React components.