Introduction to Next.js

## 1. Learning Objectives By the end of this lesson, you will be able to: - Explain what Next.js adds to a React application. - Identify the major building blocks: routes, layouts, Server Components, Client Components, and Route Handlers. - Choose Next.js when a product needs SEO, fast first load, server rendering, or full-stack features. - Create a minimal App Router project structure. Difficulty: Beginner. ## 2. Prerequisites - React component basics. - JSX and props. - Basic HTTP request and response flow. - Familiarity with folders and file paths in a JavaScript project. ## 3. Overview Next.js is a React framework for building production web applications. It provides file-based routing, server rendering, static generation, API endpoints, image optimization, metadata tools, and deployment conventions so teams do not need to assemble those pieces manually. ## 4. Why This Topic Matters Plain React is excellent for building interfaces, but real products also need routing, fast first-page loads, SEO, data fetching, caching, forms, and deployment. Next.js gives these capabilities a standard structure, which reduces setup work and makes React apps easier to scale. Without this foundation, teams often reinvent routing, metadata, build optimization, and server APIs in inconsistent ways. ## 5. Real-World Analogy React is like the set of reusable parts for building rooms: buttons, forms, tables, and dashboards. Next.js is the building plan and infrastructure: hallways, addresses, shared walls, power lines, and entrances that make those rooms work as a complete building. ## 6. Core Concepts | Concept | Meaning | |---|---| | App Router | Modern routing system based on the `app` directory. | | Route Segment | A folder that maps to part of the URL. | | Server Component | A component rendered on the server by default in the App Router. | | Client Component | A component marked with `"use client"` for browser interactivity. | | Route Handler | A server endpoint created with `route.ts`. | | Metadata API | Built-in way to define page titles, descriptions, Open Graph data, and canonical URLs. | ## 7. Syntax & API Reference Minimal App Router structure:

Create a project:

## 8. Visual Diagram

## 9. Live Example - Full Working Code

What just happened? The file `app/page.tsx` automatically became the `/` route. No route configuration file is required. ## 10. Interactive Playground Use a local Next.js project or StackBlitz. Try these changes: - Rename `app/page.tsx` to `app/about/page.tsx` and visit `/about`. - Add a `console.log` inside the page component and observe where it runs. - Add a small interactive counter as a child Client Component. ## 11. Common Mistakes | Mistake | Why It Happens | Correct Approach | |---|---|---| | Treating Next.js as only React plus routing | Next.js includes rendering, caching, APIs, and metadata too. | Learn the framework model, not only route files. | | Adding `"use client"` everywhere | Developers expect all React components to run in the browser. | Keep components server-first unless they need state, effects, or browser APIs. | | Fetching all data from the browser | Habit from SPA development. | Fetch server-side when the data is needed for first render or SEO. | ## 12. Best Practices - Start with the App Router for new projects. - Keep pages and layouts as Server Components by default. - Move interactivity into small Client Components. - Use `metadata` or `generateMetadata` for SEO. - Keep route folders named by URL intent, not implementation details. ## 13. Browser Compatibility | Feature | Browser Impact | Notes | |---|---|---| | Server rendering | Browser receives HTML | Works broadly because rendering happens on the server. | | Client Components | Requires JavaScript | Same browser considerations as React. | | Image optimization | Served by Next.js | Browser receives optimized image formats where supported. | ## 14. Interview Questions **Easy:** What is Next.js? Answer: Next.js is a React framework that adds routing, server rendering, static generation, APIs, optimization, and deployment conventions. **Medium:** Why not use plain React for every app? Answer: Plain React does not include production routing, SSR, SSG, metadata management, server APIs, or built-in optimization. Next.js standardizes those needs. **Hard:** When should a component become a Client Component? Answer: When it needs browser-only behavior such as event handlers, `useState`, `useEffect`, local storage, window APIs, or interactive third-party widgets. ## 15. Debugging Exercise Broken snippet:

Solution This page is a Server Component by default and cannot use browser event handlers. Move the button into a Client Component and use state there. ## 16. Practice Exercises - Easy: Create `/about` and `/contact` pages. - Medium: Add a shared layout with a navigation bar. - Hard: Build a product listing page that fetches data on the server and passes it to a small interactive filter component. ## 17. Scenario-Based Challenge Your team has a React dashboard that loads slowly and has poor SEO for public pages. How would you migrate it? Walkthrough Move public pages into App Router routes, fetch critical data on the server, add metadata, keep dashboard-only interactivity in Client Components, and deploy incrementally route by route. ## 18. Quick Quiz 1. Which folder powers the modern router? Answer: `app`. 2. Are App Router components server-rendered by default? Answer: Yes. 3. What marks a Client Component? Answer: `"use client"`. 4. Which file creates an API-style endpoint? Answer: `route.ts`. 5. Which feature helps SEO metadata? Answer: Metadata API. ## 19. Summary & Key Takeaways - Next.js is a production React framework. - The App Router maps folders and files to URLs. - Server Components are the default in the App Router. - Client Components should be used only where interactivity requires them. - Next.js supports pages, APIs, metadata, rendering strategies, and deployment workflows. ## 20. Cheat Sheet | File or Concept | Purpose | Example | |---|---|---| | `app/page.tsx` | Home route | `/` | | `app/about/page.tsx` | Nested route | `/about` | | `layout.tsx` | Shared shell | Navigation and providers | | `"use client"` | Browser component boundary | Counter, modal, tabs | | `route.ts` | Server endpoint | `/api/health` | ## 21. Further Reading - Next.js Docs: App Router. - React Docs: Components and Hooks. - Vercel Docs: Deploying Next.js. ## 22. Next Lesson Preview Next, you will learn the App Router in detail: how folders become routes, how nested layouts compose, and why Server Components change how React applications are structured.