Giới thiệu loạt bài

Next.js là framework React full-stack được dùng rộng rãi nhất hiện nay. Loạt bài hướng dẫn App Router, Server Components, Server Actions, lấy dữ liệu và cache, API, Prisma với MySQL, xác thực Auth.js, tối ưu SEO và triển khai, kết thúc bằng một dự án quản lý sinh viên hoàn chỉnh.

10 bài, khoảng 14 giờTrung cấp đến nâng cao
Bạn sẽ học được
  • Xây dựng ứng dụng web full-stack bằng một ngôn ngữ (TypeScript)
  • Nắm App Router, Server/Client Components, Server Actions
  • Kết nối CSDL, xác thực, phân quyền
  • Tối ưu SEO và triển khai thực tế

Dành cho ai?

  • Người đã học HTML, CSS, JavaScript và React cơ bản.
  • Sinh viên làm đồ án Lập trình ứng dụng web muốn dùng công nghệ hiện đại.
  • Người đã học PHP hoặc Node.js muốn chuyển sang full-stack React.

Cần chuẩn bị gì?

  • Node.js LTS, VS Code (tiện ích ESLint, Tailwind CSS IntelliSense, Prisma).
  • Đã xem loạt TypeScript, Tailwind CSS; MySQL với CSDL qlsv.

Lộ trình gợi ý

Giai đoạnBàiKết quả
Nền tảng1–3Hiểu cấu trúc, định tuyến, Server/Client
Dữ liệu4–7Đọc/ghi CSDL, form, API
Hoàn thiện8–9Đăng nhập, phân quyền, SEO
Dự án10Ứng dụng chạy thật trên Internet

Nội dung loạt bài

Bài 1. Next.js là gì?Cài đặt, cấu trúc dự ánBài 2. Định tuyến, layoutRoute động, Link, loadingBài 3. Server và Client"use client", ranh giớiBài 4. Lấy dữ liệu, cacherevalidate, SuspenseBài 5. Form, Server ActionsZod, useActionStateBài 6. Route HandlerAPI cho Flutter, ứng dụng khácBài 7. Prisma và MySQLSchema, migration, CRUDBài 8. Xác thựcAuth.js, phân quyềnBài 9. Giao diện, SEOnext/image, metadata, sitemapBài 10. Dự án full-stackTriển khai Vercel, Docker

Cách học hiệu quả

  • Làm một dự án xuyên suốt (qlsv-web), mỗi bài thêm một phần.
  • Luôn tự hỏi: phần này chạy ở máy chủ hay trình duyệt?
  • Đọc tài liệu chính thức nextjs.org/docs khi gặp thay đổi phiên bản.
  • Chạy npm run build thường xuyên để phát hiện lỗi sớm.
Mẹo hay

Kết hợp với loạt Node.js (API riêng) và Flutter (ứng dụng di động) để có hệ sinh thái hoàn chỉnh dùng chung một CSDL.

Tóm tắt
  • 10 bài từ cài đặt đến dự án triển khai.
  • App Router, Server Actions, Prisma, Auth.js.
  • Phù hợp làm đồ án môn học.

Các bài khác …

  1. Bài 1. Next.js là gì? Cài đặt và dự án đầu tiên
  2. Bài 2. Định tuyến, layout và điều hướng
  3. Bài 3. Server Component và Client Component
  4. Bài 4. Lấy dữ liệu, cache và streaming