ReviseAlgo Logo

Fundamentals

Introduction to Next.js

Understand what Next.js adds on top of React, when to use it, and how its routing, rendering, and deployment model fit together.

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

    ConceptMeaning
    App RouterModern routing system based on the app directory.
    Route SegmentA folder that maps to part of the URL.
    Server ComponentA component rendered on the server by default in the App Router.
    Client ComponentA component marked with "use client" for browser interactivity.
    Route HandlerA server endpoint created with route.ts.
    Metadata APIBuilt-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

    MistakeWhy It HappensCorrect Approach
    Treating Next.js as only React plus routingNext.js includes rendering, caching, APIs, and metadata too.Learn the framework model, not only route files.
    Adding "use client" everywhereDevelopers 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 browserHabit 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

    FeatureBrowser ImpactNotes
    Server renderingBrowser receives HTMLWorks broadly because rendering happens on the server.
    Client ComponentsRequires JavaScriptSame browser considerations as React.
    Image optimizationServed by Next.jsBrowser 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 ConceptPurposeExample
    app/page.tsxHome route/
    app/about/page.tsxNested route/about
    layout.tsxShared shellNavigation and providers
    "use client"Browser component boundaryCounter, modal, tabs
    route.tsServer 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.