Từ JavaScript đến ứng dụng Next.js hoàn chỉnh

From JavaScript basics to production-ready Next.js, TypeScript and Tailwind CSS

Chỉ với một trang, bạn đi từ let và const đến Server Component, hydration và Tailwind v4, vừa đọc vừa bấm thử.

Bắt đầu khám phá Start exploringChơi quiz Play the quiz

JavaScript TypeScript Next.js Tailwind CSS Server Client

Cơ bản Basics ●○○ Beginner · Cơ bản

Sáu ý tưởng nền tảng. Nắm chắc chúng, phần còn lại chỉ là ghép chúng lại với nhau.

Biến và kiểu dữ liệu

Variables & Types

Biến là cái hộp có nhãn. Dùng const cho giá trị không gán lại, let khi cần gán lại. Kiểu cơ bản: chuỗi, số, boolean, mảng, object, null, undefined.

Hàm và hàm mũi tên

Functions & Arrow functions

Hàm gói một việc để gọi lại nhiều lần. Dạng ngắn: const add = (a, b) => a + b. Bạn sẽ viết rất nhiều hàm mũi tên trong React.

Kiểu tĩnh

Static Types (TypeScript)

TypeScript là JavaScript cộng thêm kiểu: let age: number. Editor báo lỗi ngay khi bạn gán chuỗi cho biến số, trước khi chạy code.

Component và JSX

Components & JSX

Component là hàm trả về giao diện: function Hello() { return <h1>Xin chào</h1>; }. UI là cây các component lồng nhau.

App Router

File-system routing

Trong Next.js, thư mục là đường dẫn. app/notes/page.tsx thành trang /notes. Không cần cấu hình router thủ công.

Utility-first

Utility classes (Tailwind CSS)

Thay vì viết file CSS riêng, bạn ghép class nhỏ ngay trong JSX: p-4 rounded-xl bg-teal-600. Mỗi class làm đúng một việc.

Mẹo nhớ Memory tips

TypeScript = biên tập viên chính tả. Nó gạch chân lỗi trước khi sách được in (trước khi code chạy). TS is a spell-checker for your JS.
Next.js = nhà hàng. Bếp (Server) nấu sẵn món, phòng ăn (Client) chỉ lo phần tương tác với khách. Kitchen = server, dining room = client.
Tailwind = hộp LEGO. Ghép viên nhỏ có sẵn thay vì đúc khuôn mới cho từng món.
Quy tắc vàng: “Server mặc định, Client khi cần”. Server by default, Client by need.

So sánh nhanh Quick comparison

Tiêu chí / Criterion	JavaScript	TypeScript
Kiểm tra kiểu / Type checking	Khi chạy (runtime), linh hoạt	Khi biên dịch và trong editor
Phát hiện lỗi / Catching bugs	Thường đến khi người dùng gặp lỗi	Nhiều lỗi bị chặn từ lúc viết code
Chạy ở đâu / Where it runs	Trình duyệt, Node.js	Biên dịch ra JS rồi mới chạy, kiểu bị xoá
Gợi ý code / Autocomplete	Hạn chế	Rất tốt vì editor biết cấu trúc dữ liệu
Độ khó học / Learning curve	Dễ bắt đầu	Học JS trước, thêm kiểu dần dần

Hiểu lầm thường gặp Common misconceptions

“TypeScript bảo vệ dữ liệu khi chạy.” Sai: kiểu bị xoá lúc biên dịch, dữ liệu từ API vẫn cần được kiểm tra riêng.
“Tailwind chỉ là inline style.” Sai: Tailwind có hover:, md:, chế độ tối và hệ thống design token mà inline style không có.
“'use client' nghĩa là không render trên server.” Sai: Client Component vẫn được prerender thành HTML, rồi mới hydrate.
“Next.js thay thế React.” Sai: Next.js là framework xây trên React.

Tương tác Hands-on ●○○ Beginner · Cơ bản

Bấm từng file trong dự án DevNotes để xem nó trở thành URL nào, chạy ở đâu, và code ra sao.

Luồng một yêu cầu (request) How one request flows

Bấm Bước tiếp hoặc Tự chạy để đi qua từng giai đoạn. Mặc định đang tạm dừng.

Sơ đồ khái niệm, không theo tỉ lệ thời gian. Conceptual diagram, not to scale.

Sân chơi Tailwind Tailwind playground

Chỉnh các lựa chọn, xem class sinh ra và kết quả thực.

Màu nền Background Padding: p-6 Bo góc Rounded Cỡ chữ Text size shadow-lg hover:scale-105 (rê chuột vào thẻ)

Xin chào Tailwind!

Dự án mẫu: DevNotes Sample project ●○○ Beginner · Cơ bản

Ứng dụng ghi chú nhỏ, làm từng bước. Bạn cần Node.js bản mới (xem yêu cầu phiên bản trên trang tài liệu Next.js, vì con số này thay đổi theo từng bản).

Trung cấp Intermediate ●●○ Intermediate · Trung cấp

Server Component và Client Component

Tiêu chí / Criterion	Server Component	Client Component
Mặc định? / Default?	Có, trong thư mục `app/`	Phải khai báo `'use client'` ở đầu file
Dùng `useState`, `onClick`	Không	Có
`async/await` lấy dữ liệu trực tiếp	Có	Không trực tiếp, thường dùng thư viện hoặc Server Action
Code gửi xuống trình duyệt / Shipped JS	Không	Có, vào bundle
Truy cập bí mật (API key, DB)	An toàn	Không bao giờ đặt ở đây

Cách làm tốt: giữ 'use client' ở các “lá” nhỏ (nút, form, dropdown), để cây phía trên là Server.

Máy tính dung lượng bundle Bundle-size calculator

Giả sử trang của bạn có tổng lượng JS (đã nén gzip). Chuyển bao nhiêu phần sang Server Component thì tiết kiệm được bao nhiêu giây?

Tổng JS: 300 KB Phần còn ở Client: 100% Mạng Network

JS gửi xuống: → thời gian tải:

Công thức: giây = KB × 8 ÷ (Mbps × 1000). Chỉ tính thời gian truyền, chưa tính độ trễ mạng (RTT), giải nén, parse và chạy JS. Tốc độ mạng là số làm tròn tiêu biểu.

Tailwind responsive: thanh trượt breakpoint Breakpoint slider

Tailwind mobile-first: class không tiền tố áp dụng cho mọi cỡ, md: áp dụng từ 768px trở lên. Kéo để thử với grid-cols-1 sm:grid-cols-2 lg:grid-cols-4.

Độ rộng viewport: 800 px

Thang đo đúng tỉ lệ. Giá trị mặc định của Tailwind v4: 40, 48, 64, 80, 96 rem (tương ứng 640 → 1536px).

TypeScript thiết yếu TS essentials

Thu hẹp kiểu Narrowing: TS hiểu kiểu sau mỗi lần kiểm tra.

Generic và utility type: viết một lần, dùng cho nhiều kiểu.

Ứng dụng thực tế Real-world uses

Blog, trang tài liệu

Trang tĩnh, nhanh, tốt cho SEO nhờ HTML dựng sẵn trên server.

Dashboard

Server Component lấy dữ liệu, Client Component lo biểu đồ tương tác.

Cửa hàng online

Trang sản phẩm tái tạo định kỳ (ISR), giỏ hàng là Client Component.

Nâng cao Advanced ●●● Advanced · Nâng cao

Chiến lược render Rendering strategies

Chiến lược	Khi nào HTML được tạo	Dữ liệu tươi?	Hợp với
SSG Static	Lúc build	Cũ cho đến lần build kế	Blog, tài liệu
ISR Incremental	Build, rồi tái tạo theo chu kỳ	Tươi vừa phải	Trang sản phẩm, tin tức
SSR Dynamic	Mỗi yêu cầu	Luôn mới	Trang cá nhân hoá
Streaming	Mỗi yêu cầu, gửi từng phần	Luôn mới	Trang có phần chậm (dùng `Suspense`)
CSR Client	Trong trình duyệt	Luôn mới	Phần tương tác sau đăng nhập

Biểu đồ minh hoạ định tính, không theo tỉ lệ. Qualitative illustration, not to scale. Các chiến lược kết hợp (như Partial Prerendering, Cache Components) thay đổi nhanh giữa các bản Next.js, hãy kiểm tra tài liệu bản bạn dùng.

Streaming với Suspense

Phần nhanh hiện ngay, phần chậm được stream vào sau.

Server Action

Hàm chạy trên server, gọi trực tiếp từ form, không cần tự viết API.

Chú ý bảo mật Security Server Action thực chất là endpoint công khai. Luôn kiểm tra quyền và validate dữ liệu đầu vào ở bên trong.

TypeScript nâng cao Advanced TS

Tailwind v4: cấu hình trong CSS CSS-first config

Thang đo Core Web Vitals Scale chart

Ngưỡng theo hướng dẫn của Google (ở phân vị 75). Mỗi thanh có thang riêng, chỉ so sánh vị trí các ngưỡng trong cùng một thanh. Ngưỡng có thể được cập nhật.

Dòng thời gian Timeline

1995 Brendan Eich tạo JavaScript tại Netscape (thường được kể là trong khoảng 10 ngày).
2015 ES2015 (ES6) mang đến let, const, hàm mũi tên, module.
2012 Microsoft công bố TypeScript (Anders Hejlsberg dẫn dắt).
2016 Next.js ra mắt (nay do Vercel phát triển).
2017 Tailwind CSS ra đời (Adam Wathan và cộng sự).
2022 → 2023 App Router xuất hiện ở Next.js 13 và được coi là ổn định từ 13.4.
2025 Tailwind CSS v4 với cấu hình CSS-first.

Năm có thể lệch một chút tuỳ nguồn. Phiên bản mới nhất của Next.js, TypeScript, Tailwind thay đổi liên tục, hãy xem trang chính thức.

Thực hành tốt nhất Best practices

Giữ Server Component làm mặc định, đẩy 'use client' xuống các lá nhỏ.
Bật strict trong tsconfig.json và tránh any, dùng unknown rồi thu hẹp kiểu.
Validate dữ liệu ngoài (form, API) bằng một thư viện schema, vì kiểu TS biến mất lúc chạy.
Dùng next/image và next/font để tối ưu ảnh và font.
Không nối chuỗi class động kiểu "bg-" + color, hãy ghi đủ tên class để Tailwind quét được.
Rút các cụm class lặp lại thành component, không nhân bản chuỗi class dài.
Đặt loading.tsx và error.tsx cho các route chậm hoặc dễ lỗi.
Đo bằng Lighthouse hoặc dữ liệu thực địa trước khi tối ưu.

Câu hỏi còn mở Open questions

Chiến lược cache nào sẽ ổn định lâu dài? Mặc định cache của fetch đã đổi giữa các bản chính, nên hãy đọc ghi chú phát hành khi nâng cấp.
Ranh giới Server/Client nên đặt ở đâu trong ứng dụng rất tương tác?
Bộ biên dịch TypeScript viết lại bằng ngôn ngữ nhanh hơn đang được phát triển: khi nào và ảnh hưởng ra sao? (Chưa kiểm chứng tiến độ hiện tại.)

Từ vựng Vocabulary ●●○ Mọi cấp / All levels

English	Tiếng Việt	Example sentence

Mini game Review quiz ●●○ 20 câu / questions

5 điểm mỗi câu đúng, từ câu đúng thứ 3 liên tiếp được thêm 2 điểm thưởng chuỗi. Điểm tối đa là 136.