Giới thiệu Next.js

Next.js là một framework React hiện đại, cung cấp hệ thống routing, tối ưu hiệu năng, hỗ trợ SEO và khả năng render đa chế độ. Đây là giải pháp tiêu chuẩn để xây dựng các ứng dụng web quy mô từ nhỏ đến enterprise.

---

1. Next.js là gì?

Next.js giúp bạn:

• Xây dựng ứng dụng React hoàn chỉnh: Frontend + Backend trong một project
• Tối ưu hiệu năng: Tự động code splitting, image optimization
• Hỗ trợ SEO hoàn hảo: Server-side rendering (SSR), Static generation (SSG)
• Developer experience tốt: Hot reload, TypeScript support, API routes
• Deployment dễ dàng: Vercel, Docker, các cloud platform

Ý nghĩa trọng tâm:
Nếu React là thư viện UI thì Next.js là framework hoàn chỉnh để xây dựng ứng dụng web production-ready.

---

2. Tại sao phải học Next.js?

Ba lý do đủ mạnh để học viên ghi nhớ:

1) Framework React hoàn chỉnh nhất

• App Router: Hệ thống routing hiện đại dựa trên cấu trúc thư mục
• API Routes: Xây dựng backend ngay trong project React
• Full-stack capabilities: Không cần setup phức tạp

2) Performance vượt trội

• Tự động optimization: Code splitting, image optimization
• Multiple rendering modes: SSR, SSG, ISR, CSR tuỳ nhu cầu
• Edge runtime: Chạy code gần user nhất có thể

3) Chuẩn công nghiệp

• Được dùng bởi: Netflix, TikTok, Nike, Starbucks
• Community lớn: Resources, tutorials, jobs nhiều
• Luôn updated: Cập nhật tính năng mới liên tục

---

3. Next.js hoạt động như thế nào?

3.1. App Router (mới nhất)

Cấu trúc thư mục = Route tự động:

app/
├── page.tsx          # /
├── about/
│   └── page.tsx      # /about
├── products/
│   ├── page.tsx      # /products
│   └── [id]/
│       └── page.tsx  # /products/1, /products/2
└── layout.tsx        # Shared layout

3.2. Các chế độ rendering

• Static Generation (SSG): Build-time → HTML static
• Server-side Rendering (SSR): Request-time → HTML dynamic
• Incremental Static Regeneration (ISR): Kết hợp SSG + dynamic
• Client-side Rendering (CSR): Traditional React rendering

---

4. Ví dụ đầu tiên: Trang chủ Next.js

// app/page.tsx – Trang cơ bản trong Next.js (App Router)

export default function Home() {
  return (
    <main>
      <h1>Welcome to Next.js</h1>
      <p>Đây là trang đầu tiên sử dụng App Router.</p>
      
      <div>
        <h2>Tính năng nổi bật:</h2>
        <ul>
          <li>✅ Server Components mặc định</li>
          <li>✅ Loading states</li>
          <li>✅ Error boundaries</li>
          <li>✅ Route handlers</li>
        </ul>
      </div>
    </main>
  );
}

💡 GHI NHỚ: Next.js tự động thêm routing, optimization và nhiều tính năng production-ready

---

5. Ba khái niệm đầu tiên cần ghi nhớ (rất quan trọng)

1) App Router

Cách Next.js quản lý routes dựa trên cấu trúc file. Mỗi thư mục = một route segment.

2) Server vs Client Components

• Server Components: Render ở server, gửi HTML về client
• Client Components: Chạy ở browser, có thể dùng hooks, event listeners

3) Data Fetching

Next.js cung cấp nhiều cách fetch data: async components, route handlers, server actions.

🔑 GHI NHỚ: Ba khái niệm này là nền tảng để học Next.js hiệu quả

6. Bài tập thực hành nhanh

Bài tập 1

Tạo project mới bằng lệnh:

npx create-next-app@latest my-app --typescript --tailwind --app

Bài tập 2

Khởi chạy development server:

cd my-app
npm run dev

Truy cập http://localhost:3000

Bài tập 3

Thay đổi nội dung trong app/page.tsx và xem hot reload hoạt động.

7. Kết luận bài học

• Next.js là framework React hoàn chỉnh nhất hiện nay
• Kết hợp frontend + backend trong một project duy nhất
• Mạnh vì performance, SEO, và developer experience
• Bắt đầu bằng những thao tác đơn giản: tạo project, chạy server, thay đổi component

🔑 GHI NHỚ QUAN TRỌNG:

• Next.js giúp xây dựng ứng dụng web nhanh hơn React thuần
• App Router là cách hiện đại để xây dựng routing
• Luôn ưu tiên Server Components khi có thể