Từ JavaScript đến ứng dụng Next.js hoàn chỉnh (Learn JS & TS with Next.js and Tailwind CSS)

Chỉ với một trang, bạn đi từ let, const của JavaScript đến Server Component, hydration và Tailwind v4. Đây là bản tóm tắt dành cho người mới bắt đầu học full-stack với React/Next.js — nắm sáu ý tưởng nền tảng, hiểu ranh giới Server/Client, và biết đôi điều về chiến lược render cùng hiệu năng.

Key points

• Sáu ý tưởng nền tảng: biến & kiểu dữ liệu, hàm (hàm mũi tên), kiểu tĩnh TypeScript, component & JSX, App Router, và utility-first của Tailwind.
• TypeScript là JavaScript cộng thêm kiểu. Editor báo lỗi gán sai kiểu trước khi chạy code, nhưng kiểu bị xoá lúc biên dịch nên dữ liệu lúc chạy vẫn cần validate riêng.
• Trong Next.js, thư mục là đường dẫn: app/notes/page.tsx trở thành trang /notes — không cấu hình router thủ công.
• Server Component là mặc định, Client khi cần. Chỉ thêm 'use client' cho phần cần state/sự kiện (useState, onClick).
• Đẩy 'use client' xuống các “lá” nhỏ (nút, form, dropdown) để giữ phần lớn cây là Server và giảm JS gửi xuống trình duyệt.
• page.tsx tạo route truy cập được, route.ts là API (Route Handler), layout.tsx chỉ là khung bọc, loading.tsx là fallback khi route đang tải.
• Tailwind là utility-first: ghép class nhỏ ngay trong JSX (p-4 rounded-xl bg-teal-600), mỗi class làm đúng một việc.
• Năm chiến lược render: SSG (lúc build), ISR (build rồi tái tạo), SSR (mỗi yêu cầu), Streaming (gửi từng phần với Suspense), CSR (trong trình duyệt).

Tips & tricks

Quy tắc vàng: “Server mặc định, Client khi cần”. Giữ Server Component làm mặc định và chỉ đánh dấu 'use client' ở lá nhỏ nhất có thể — đây là điều khiến Next.js nhanh và gọn.

• TypeScript = biên tập viên chính tả cho JS — gạch chân lỗi trước khi “sách được in”.
• Next.js = nhà hàng: bếp (Server) nấu sẵn, phòng ăn (Client) lo tương tác với khách.
• Tailwind = hộp LEGO: ghép viên có sẵn thay vì đúc khuôn mới cho từng món.
• Đừng nối chuỗi class động kiểu "bg-" + color — Tailwind quét chuỗi tĩnh, hãy ghi đủ tên class.
• Đừng đặt 'use client' ở layout gốc — nó kéo cả cây con vào bundle gửi xuống trình duyệt.
• Server Action là endpoint công khai — luôn kiểm tra quyền và validate dữ liệu đầu vào bên trong.
• Rút các cụm class Tailwind lặp lại thành component; đặt loading.tsx và error.tsx cho route chậm/dễ lỗi.

Quick reference

Server vs. Client Component

Tiêu chí	Server Component	Client Component
Mặc định trong app/?	Có	Cần 'use client'
useState, onClick	Không	Có
async/await dữ liệu trực tiếp	Có	Không trực tiếp
JS gửi xuống trình duyệt	Không	Có
Bí mật (API key, DB)	An toàn	Không bao giờ đặt

Vài con số và cú pháp đáng nhớ

• p-4 = 4 × 0,25rem = 1rem = 16px (khi 1rem = 16px).
• Breakpoint mặc định: sm 640, md 768, lg 1024, xl 1280, 2xl 1536 px. Tiền tố là min-width (mobile-first).
• Đường dẫn động: [id] là đoạn động; trong Next.js 15, params là Promise nên cần await.
• route.ts xuất các hàm GET/POST… để trả JSON.
• Utility type: Partial<T> (mọi field tuỳ chọn), Pick<T, "id"> (chọn vài field).
• Tailwind v4 cấu hình CSS-first: @import "tailwindcss"; rồi khai báo token trong @theme { }.
• Ngưỡng Core Web Vitals (phân vị 75): LCP tốt ≤ 2,5 s / kém > 4 s; INP tốt ≤ 200 ms / kém > 500 ms; CLS tốt ≤ 0,1 / kém > 0,25.

Thực hành tốt nhất (rút gọn)

• Bật strict trong tsconfig.json, tránh any, dùng unknown rồi thu hẹp kiểu.
• Dùng next/image và next/font để tối ưu ảnh và font.
• Đo bằng Lighthouse hoặc dữ liệu thực địa trước khi tối ưu.

Go deeper

Phiên bản tương tác để bạn vừa đọc vừa bấm thử: cây thư mục dự án DevNotes bấm được, sơ đồ 5 bước luồng request có nút “Bước tiếp”/“Tự chạy”, sân chơi Tailwind sinh class và kết quả thực, máy tính dung lượng bundle, thanh trượt breakpoint responsive, biểu đồ chiến lược render và Core Web Vitals, bảng từ vựng Anh–Việt, cùng mini game 20 câu có chấm điểm và thưởng chuỗi (tối đa 136 điểm).

Mở phiên bản đầy đủ →