🚀 Learning Next.js

Introduction

This repository documents my journey learning Next.js, focusing on understanding how it differs from traditional React single-page applications (SPAs).

---

🚦 React vs Next.js: Request Flow Comparison

Understanding the fundamental difference in how requests are handled is crucial to mastering Next.js.

🔵 React (SPA) Request Flow

User visits website
        |
        v
Browser loads index.html
        |
        v
Browser downloads BIG JS bundle:
  - home page code
  - login page code
  - dashboard page code
  - profile page code
  - all components
        |
        v
React initializes & hydrates
        |
        v
User clicks "Dashboard"
        |
        v
React Router changes route (no server request)
        |
        v
Dashboard component loads from pre-downloaded bundle
        |
        v
useEffect() runs → fetch('/api/dashboard')
        |
        v
Browser receives JSON data → updates UI

✔ Summary:

• One large bundle contains all routes
• Navigation happens entirely in the browser
• Data is fetched after rendering using useEffect
• SEO and performance depend heavily on client JS
• Initial load time is slower (large bundle)
• Subsequent navigation is instant (no server roundtrips)

---

🟢 Next.js (App Router) Request Flow

User visits website
        |
        v
Next.js server pre-renders Home page (Server Component)
        |
        v
Browser downloads ONLY required code:
  - home.js
  - layout.js
  - small runtime
(Not dashboard.js, not profile.js)
        |
        v
User clicks "Dashboard"
        |
        v
Browser requests GET /dashboard (server round trip)
        |
        v
Next.js server:
  - reads cookies/session
  - authenticates user
  - fetches dashboard data (DB/API)
  - server-renders dashboard HTML
        |
        v
Browser receives ready-made HTML + small JS chunk:
  - dashboard.js
        |
        v
Hydration occurs only where needed

✔ Summary:

• Only current page's bundle is sent (automatic code splitting)
• Dashboard/profile code loads when the user navigates
• Data is fetched on the server before rendering (SSR)
• Much faster first load + great SEO
• Client Components used only for interactivity, not for whole pages
• Each navigation may involve a server roundtrip

---

🎯 When to Use What

Choose React (SPA) when:

• Building a highly interactive dashboard or app
• SEO is not a priority
• You want instant client-side navigation
• Your app is behind authentication (no public pages)
• You need complete offline capabilities

Choose Next.js when:

• SEO matters (blogs, marketing sites, e-commerce)
• Initial load performance is critical
• You have public content that needs to be indexed
• You want to reduce client-side JavaScript
• You need server-side authentication/authorization
• You want better performance on low-end devices

---

🚀 Getting Started

Prerequisites

• Node.js 18.17 or later
• Basic understanding of React

Installation

# Create a new Next.js app
npx create-next-app@latest my-nextjs-app

# Navigate to the project
cd my-nextjs-app

# Start the development server
npm run dev

---

🤝 Contributing

This is a personal learning repository, but suggestions and corrections are welcome! Feel free to open an issue or submit a pull request.

---

📄 License

MIT License - Feel free to use this for your own learning!

---

Happy Learning! 🎉