Next.js là framework phổ biến nhất để xây dựng ứng dụng web hiện đại, được tạo ra bởi Vercel và dựa trên React — thư viện giao diện do Meta (Facebook) phát triển. Next.js được dùng bởi Netflix, TikTok, Twitch, Nike và hàng triệu ứng dụng khác trên thế giới. Bài viết này nói về Next.js 16 — phiên bản mới nhất, dùng App Router (cách tổ chức trang hiện đại nhất của Next.js). Next.js vẫn còn một cách tổ chức trang cũ tên là Pages Router, nhưng đó là công nghệ cũ dành cho dự án có từ trước — dự án mới không dùng đến, nên tài liệu này không đề cập.
Dành cho ai? Bài viết này giải thích Next.js bằng ngôn ngữ thông thường — không cần kiến thức lập trình. Nếu bạn đang dùng Claude Code để xây ứng dụng web, đây là tất cả những gì bạn cần hiểu về Next.js. Nếu bạn là developer muốn xem code thật, xem bản chuyên sâu tại Next.js cho Developer.

​
Next.js là gì? Hãy hình dung như thế này

Khi bạn truy cập một trang web, trình duyệt cần nhận về mã HTML, CSS và JavaScript để hiển thị giao diện. Câu hỏi là: ai tạo ra những file đó, và tạo ra ở đâu? Đây là vấn đề mà Next.js giải quyết một cách thông minh:
  • Tự tạo URL theo thư mục — thêm một thư mục là có ngay một trang mới, không cần cấu hình
  • Tạo sẵn giao diện trên server — trang tải nhanh hơn, không phải chờ máy người dùng tự dựng từ đầu
  • Hiển thị dần từng phần — phần nào xong trước hiện trước, không bắt người dùng nhìn màn hình trắng chờ tất cả
  • Tự cân bằng giữa tốc độ và độ mới của dữ liệu — phần ít đổi thì ưu tiên tải nhanh, phần cần luôn mới thì tự cập nhật
  • Viết được cả phần xử lý dữ liệu (backend) ngay trong cùng dự án — không cần dựng thêm một server riêng
Phép so sánh đời thực: Hãy nghĩ Next.js như một nhà hàng thông minh — có thể phục vụ món ăn đã nấu sẵn (tải nhanh), nấu theo yêu cầu (cá nhân hóa), hoặc kết hợp cả hai tùy từng món — trong khi các framework cũ chỉ làm được một trong hai.

​
Tại sao không dùng HTML thuần túy?

Bạn hoàn toàn có thể viết một trang web bằng HTML thuần. Nhưng khi ứng dụng phức tạp hơn:

​
Các khái niệm cốt lõi

​
App Router — Mỗi thư mục = Một URL

App Router là cách Next.js 16 tổ chức trang: mỗi trang giao diện tương ứng với một URL, được tạo ra từ cấu trúc thư mục trong thư mục app/. Ví dụ: Next.js tự động tạo URL dựa theo cấu trúc thư mục — bạn không cần cấu hình gì thêm. Muốn thêm trang mới? Chỉ cần yêu cầu Claude Code tạo trang ở URL bạn muốn.
Trang động (Dynamic Page): Trang chi tiết task dùng cùng một giao diện cho mọi task — chỉ thay đổi nội dung dựa vào mã số (ID) trong URL. Bạn không cần tạo riêng một trang cho mỗi task.

​
Components — Khối xây dựng giao diện

Component là mảnh ghép giao diện có thể tái sử dụng. Giống như các khối LEGO — bạn tạo ra một lần, ghép lại theo nhiều cách khác nhau. Ví dụ trong ứng dụng quản lý công việc: Lợi ích: Khi cần thay đổi giao diện TaskCard, bạn chỉ sửa ở một chỗ duy nhất — tất cả task card trong toàn bộ ứng dụng đều cập nhật theo.

​
Server vs Client Components

Đây là khái niệm quan trọng nhất trong Next.js hiện đại.

Server Components

Chạy trên server của Vercel
  • Tạo HTML trước khi gửi về trình duyệt
  • Truy cập database, API keys an toàn
  • Tải trang nhanh hơn, SEO tốt hơn
  • Không xử lý được tương tác người dùng

Client Components

Chạy trong trình duyệt người dùng
  • Xử lý click, nhập liệu, hover
  • Cập nhật giao diện realtime
  • Kết nối Firebase Realtime
  • Cần khi có tương tác người dùng
Ví dụ thực tế — Trang danh sách task:
Bạn không cần lo lắng về việc phân biệt cái nào là Server, cái nào là Client. Khi đưa yêu cầu cho Claude Code, nó sẽ tự động quyết định phù hợp. Nhưng hiểu khái niệm này giúp bạn giải thích yêu cầu chính xác hơn.

​
Layout — Khung chung cho nhiều trang

Layout là phần giao diện xuất hiện trên nhiều trang mà không cần viết lại — ví dụ header, sidebar, footer. Ví dụ thực tế:
Khi chuyển trang, chỉ phần “Nội dung trang” thay đổi — header và sidebar giữ nguyên, tạo trải nghiệm mượt mà.

​
Trạng thái tải & lỗi — không bao giờ để màn hình trắng

Next.js có sẵn cơ chế để mỗi trang tự hiện “đang tải…” trong lúc chờ dữ liệu, và tự hiện thông báo lỗi thân thiện thay vì màn hình trắng hoặc app bị đứng khi có sự cố. Về mặt kỹ thuật, đây là hai file quy ước của Next.js: loading.tsx (màn hình chờ) và error.tsx (màn hình lỗi), đặt cạnh mỗi trang. Ví dụ thực tế:
Bạn không cần tự viết loading.tsx/error.tsx cho từng trang. Chỉ cần yêu cầu: “Khi trang đang tải dữ liệu, hiện khung xám giữ chỗ. Nếu lỗi, hiện thông báo kèm nút thử lại.” — Claude Code sẽ tự tạo đúng file, đúng chỗ.

​
SEO, ảnh & font tự tối ưu

Next.js tự lo ba việc mà nếu tự viết HTML thuần, bạn (hoặc Claude Code) sẽ phải làm thủ công rất nhiều — mỗi việc gắn với một tính năng có tên riêng trong Next.js:
Đây đều là việc Claude Code tự làm khi tạo trang mới — bạn không cần yêu cầu riêng, chỉ cần biết tên các tính năng này khi cần kiểm tra vì sao ảnh trong app tải nhanh hoặc vì sao Google tìm thấy trang của bạn.

​
API Routes — Backend nhẹ trong cùng dự án

Next.js cho phép bạn viết backend API ngay trong cùng dự án, không cần server riêng. Phù hợp cho những tác vụ cần bảo mật hoặc tích hợp dịch vụ bên thứ 3. Khi nào dùng API Routes thay vì Firebase trực tiếp?

​
Server Actions — nút bấm nói chuyện thẳng với server

Bên cạnh API Route, Next.js có một cách khác để xử lý form và nút bấm: Server Action (đánh dấu bằng 'use server' trong code) — một đoạn xử lý chạy trên server, gắn thẳng vào nút “Lưu” hay “Gửi” mà không cần dựng riêng một API endpoint. Ví dụ thực tế: Khi bạn bấm nút “Thêm task” trên form, dữ liệu (tiêu đề, người phụ trách…) được gửi thẳng lên server để lưu vào Firestore — Claude Code có thể chọn viết theo kiểu Server Action thay vì API Route, kết quả với bạn là như nhau: bấm nút, dữ liệu được lưu, danh sách tự cập nhật.
Bạn không cần biết khi nào Claude Code chọn API Route hay Server Action — chỉ cần mô tả hành vi bạn muốn (“bấm Lưu thì task mới xuất hiện ngay trong danh sách”), Claude Code sẽ chọn cách phù hợp.

​
Cách Next.js 16 tạo ra nội dung trang

Next.js 16 thay đổi hoàn toàn cách nghĩ về việc “trang này nên nhanh hay nên mới nhất”: thay vì chọn một chế độ cố định cho cả trang, từng phần nhỏ trong cùng một trang có thể tự quyết định là tĩnh (nhanh) hay động (luôn mới), nhờ tính năng gọi là Cache Components.
Hoạt động: Nếu không yêu cầu gì thêm, mỗi lần người dùng truy cập, server sẽ chạy lại và tạo dữ liệu mới hoàn toàn — không tự động lưu cache.Phù hợp với:
  • Trang cần dữ liệu cá nhân hóa (dashboard, profile riêng từng người)
  • Trang cần dữ liệu luôn mới nhất, không được phép cũ (giỏ hàng, số dư tài khoản)
Ví dụ: Trang dashboard task management — hiển thị task của riêng từng user
Hoạt động: Bạn yêu cầu Claude Code đánh dấu một phần dữ liệu hoặc một trang là “lưu cache” (use cache). Next.js tạo sẵn kết quả một lần, tái sử dụng cho mọi người truy cập sau — cực nhanh, không phải chờ server xử lý lại.Phù hợp với:
  • Trang nội dung ít thay đổi (blog, landing page, docs)
  • Trang cần tốc độ tải tối đa, không cần cá nhân hóa
Ví dụ: Trang giới thiệu sản phẩm, trang FAQ
Hoạt động: Giống như lưu tĩnh, nhưng bạn quy định thêm “cứ sau X phút/giờ thì tạo lại”. Người dùng vẫn nhận trang đã lưu sẵn (nhanh), nhưng dữ liệu không bị cũ quá lâu.Phù hợp với:
  • Trang cần nhanh nhưng cần cập nhật định kỳ
  • Catalog sản phẩm (cập nhật mỗi 5 phút)
  • Bảng xếp hạng, thống kê
Ví dụ: Trang công khai hiển thị tổng số task, tỷ lệ hoàn thành
Hoạt động: Đây là điểm mạnh nhất của Next.js 16. Một trang có thể hiện phần khung (tĩnh, cực nhanh) ngay lập tức, trong khi phần dữ liệu riêng của người dùng (động) tải bổ sung ngay sau đó — không cần chờ toàn bộ trang xử lý xong mới hiện gì cả.Phù hợp với:
  • Trang có cả nội dung chung (menu, layout) lẫn nội dung riêng từng người (thông báo, giỏ hàng)
Ví dụ: Trang chủ có sẵn banner/danh mục (tĩnh) hiện ngay, trong khi số lượng thông báo của bạn (động) tải thêm vài trăm mili-giây sau
Thực tế: Bạn không cần tự quyết định phần nào tĩnh, phần nào động. Cứ mô tả rõ: “phần này cần luôn mới nhất” hay “phần này ít thay đổi, ưu tiên tốc độ” — Claude Code sẽ chọn đúng kỹ thuật và viết use cache khi cần.

​
Người gác cổng — kiểm tra trước khi vào trang

Nhiều app cần chặn một số trang lại: chưa đăng nhập thì không được vào /dashboard, ví dụ vậy. Next.js có một lớp kiểm tra chạy trước khi trang được mở ra, đặt trong một file tên proxy.ts (tên cũ trước Next.js 16 là middleware.ts) — giống như một người gác cổng đứng trước cửa, kiểm tra vé trước khi cho vào rạp. Ví dụ thực tế: Bạn gõ yourapp.com/dashboard nhưng chưa đăng nhập → người gác cổng (proxy.ts) phát hiện, tự động đưa bạn về trang /login thay vì cho vào thẳng dashboard.
Đây là phần Claude Code tự thiết lập khi bạn yêu cầu “chỉ cho người đã đăng nhập vào khu vực dashboard”. Bạn không cần tự viết proxy.ts — chỉ cần mô tả đúng quy tắc: trang nào cần đăng nhập, trang nào công khai.

​
Next.js + Claude Code = Xây app siêu nhanh

​
Cách mô tả yêu cầu hiệu quả

Claude Code hiểu yêu cầu bằng tiếng Việt thông thường. Bạn không cần biết khái niệm kỹ thuật — chỉ cần mô tả kết quả bạn muốn thấy. ❌ Mô tả mơ hồ:
✅ Mô tả rõ ràng:

​
Quy trình làm việc điển hình

1

Khởi tạo dự án

Yêu cầu Claude Code tạo dự án mới với đầy đủ tech stack:
2

Xây dựng layout và navigation

3

Xây dựng từng trang

Mô tả từng trang theo thứ tự ưu tiên:
4

Thêm tính năng tương tác

​
Kiến trúc tổng thể Next.js

Điểm quan trọng:
  • Người gác cổng kiểm tra quyền truy cập trước khi trang render — chặn người chưa đăng nhập khỏi khu vực riêng tư
  • Server Components giao tiếp với Firebase ở phía server — bảo mật, không lộ API key
  • Client Components dùng Firebase SDK trực tiếp — nhận cập nhật realtime
  • API Routes xử lý các tác vụ cần giữ bí mật (gọi dịch vụ bên thứ 3)

​
So sánh Next.js với các lựa chọn khác

​
Bắt đầu với Next.js — Chỉ 3 bước

1

Yêu cầu Claude Code khởi tạo

Thay vì tự cài, hãy yêu cầu Claude Code làm:
2

Cung cấp Firebase config

Đưa thông tin Firebase project để Claude Code kết nối:
3

Mô tả tính năng và để Claude Code xây

Từ đây, bạn chỉ cần mô tả — Claude Code sẽ tạo ra từng trang, component, và kết nối Firebase:

​
Câu hỏi thường gặp

React là thư viện để xây dựng giao diện — nó chỉ lo phần UI. React không có routing, không có backend, không có SSR sẵn.Next.js xây dựng trên React và bổ sung tất cả những gì còn thiếu: routing, render sẵn phía server, API Routes, tối ưu hình ảnh, font, và tích hợp deploy với Vercel.Phép so sánh: React như động cơ xe — Next.js như chiếc xe hoàn chỉnh với vô lăng, ghế ngồi, và điều hòa.
TypeScript là phiên bản JavaScript có thêm kiểm tra kiểu dữ liệu — giúp phát hiện lỗi sớm hơn và code dễ đọc hơn.Bạn không cần học TypeScript. Claude Code sẽ viết TypeScript cho bạn. Thực tế, Claude Code viết TypeScript tốt hơn JavaScript thuần vì ít lỗi runtime hơn.
Không cần — đặc biệt khi làm việc với Claude Code. Bạn mô tả giao diện và tính năng bằng ngôn ngữ tự nhiên, Claude Code sẽ viết React/Next.js code tương ứng.Càng mô tả chi tiết (màu sắc, layout, hành vi khi click, dữ liệu hiển thị gì), kết quả càng gần với ý muốn của bạn.
Khi bạn bấm nút (VD “Thêm task”), dữ liệu được gửi thẳng lên server để xử lý — có thể qua một API Route hoặc một Server Action, tùy Claude Code chọn cách nào phù hợp hơn. Với bạn, kết quả giống nhau: bấm nút, chờ một chút, thấy kết quả cập nhật trên màn hình.
Bản thân Next.js không hỗ trợ offline mặc định. Tuy nhiên:
  • Firebase Firestore có offline mode — dữ liệu được cache và đồng bộ lại khi có mạng
  • Có thể thêm PWA (Progressive Web App) để ứng dụng hoạt động offline và cài được như app trên điện thoại
Claude Code có thể thêm tính năng PWA nếu bạn yêu cầu.
Next.js xây dựng ứng dụng web — chạy tốt trên trình duyệt di động và có thể cài như PWA.Nếu cần app native (xuất hiện trên App Store/CH Play), cần dùng React Native hoặc Flutter — đây là công nghệ khác. Tuy nhiên, với hầu hết use case doanh nghiệp nội bộ, web app responsive hoặc PWA là đủ dùng và triển khai nhanh hơn nhiều.
Khi deploy lên Vercel, bạn nhận được một URL như my-task-app.vercel.app. Chia sẻ URL này là xong — người dùng không cần cài đặt gì.Nếu muốn domain riêng (ví dụ app.congty.com), cần mua domain (~$10-15/năm) và kết nối với Vercel trong vài bước cấu hình đơn giản.

​
Tóm tắt

App Router

Định tuyến thông minhMỗi trang = một URL. Tổ chức trang theo thư mục, không cần cấu hình route thủ công.

Server & Client Components

Linh hoạt renderServer cho tốc độ và SEO. Client cho tương tác và realtime. Claude Code tự quyết định phù hợp.

API Routes & Server Actions

Backend tích hợpViết API endpoint hoặc gắn xử lý thẳng vào nút bấm, ngay trong dự án. Gọi dịch vụ bí mật (AI, payment) an toàn phía server.

Vercel Deploy

Deploy siêu đơn giảnKết nối Git → mỗi lần push code tự động deploy. Preview tự động cho mọi thay đổi.
Điểm mấu chốt: Next.js là khung xương của ứng dụng web — nó lo phần định tuyến, render, và tích hợp với các dịch vụ khác. Kết hợp với Firebase (backend) và Vercel (deploy), bạn có một stack hoàn chỉnh để xây dựng bất kỳ ứng dụng web nào — chỉ cần mô tả yêu cầu cho Claude Code.