Next.js là gì? Kiến thức cơ bản về Next.js cho người mới

Những điểm chính

 

• Quan điểm: Next.js không chỉ là công cụ bổ trợ React mà gần như đã trở thành tiêu chuẩn cho web hiện đại

 

• Khái niệm: Framework React full-stack, hỗ trợ SEO và hiệu năng

 

• Tính năng: Routing tự động, API routes, tối ưu ảnh, code splitting

 

• Rendering: SSR, SSG, ISR, CSR

 

• Ứng dụng: E-commerce, blog, SaaS, landing page

 

• Thực hành: Có thể tạo project chỉ trong vài phút

 

Next.js là gì?

 

Next.js là framework mã nguồn mở do Vercel phát triển (ra mắt năm 2016), giúp giải quyết các vấn đề lớn của React như:

 

• SEO kém (do CSR)

 

• Tốc độ load ban đầu chậm

 

• Cấu trúc project thiếu chuẩn hóa

 

 Điểm cốt lõi:

 

• Bạn vẫn code bằng React

 

• Nhưng Next.js lo toàn bộ phần “khó”: build, routing, tối ưu, server

 

 

Tính năng nổi bật của Next.js

 

1. Routing tự động theo file

 

• Không cần cài React Router

 

• Chỉ cần tạo file là có route

 

Ví dụ:

2. Dynamic Routes (routing động)

 

• Tạo route linh hoạt bằng [param]

 

Ví dụ:

3. Tối ưu SEO & hiệu năng

 

• Render HTML sẵn → Google dễ crawl

 

• Tự động:
  • Code splitting
  • Lazy loading
  • Tối ưu ảnh (next/image)

 

4. Styling linh hoạt

 

Hỗ trợ nhiều cách viết CSS:

 

• CSS Modules

 

• SCSS

 

• CSS-in-JS

 

• Tailwind CSS

 

5. API Routes (backend ngay trong project)

 

Bạn có thể tạo API trực tiếp:

→ Không cần server riêng

 

6. Công cụ tối ưu sẵn

 

• Bundle Analyzer

 

• Tối ưu font, ảnh

 

• Tối ưu Core Web Vitals

 

 

Các cơ chế Rendering trong Next.js

 

Đây là phần quan trọng nhất khi học Next.js 

 

1. SSR (Server-Side Rendering)

 

• Render mỗi request trên server

 

• Luôn có dữ liệu mới nhất

 

 Dùng cho:

 

• Dashboard

 

• Trang user

 

• Dữ liệu realtime

 

2. SSG (Static Site Generation)

 

• Build sẵn HTML

 

• Tải cực nhanh

 

Dùng cho:

 

• Blog

 

• Landing page

 

• Website giới thiệu

 

3. CSR (Client-Side Rendering)

 

• Render ở trình duyệt

 

• Dùng cho phần tương tác

 

Ví dụ:

 

• Form

 

• Filter

 

• Table động

 

4. ISR (Incremental Static Regeneration)

 

• Kết hợp SSG + update nền

 

• Không cần build lại toàn bộ

 

 Dùng cho:

 

• Blog lớn

 

• E-commerce

 

• Trang sản phẩm

 

Khi nào nên dùng Next.js?

 

Bạn nên chọn Next.js khi:

 

✔ Cần SEO + tốc độ

 

• Website cần lên Google tốt

 

✔ Làm E-commerce

 

• Giá, tồn kho thay đổi liên tục

 

✔ Blog / website nội dung

 

• Nhiều bài viết

 

• Cần load nhanh

 

✔ Landing page / marketing

 

• Cần điểm Lighthouse cao

 

✔ SaaS / dashboard

 

• Kết hợp SSR + CSR

 

Khi nào KHÔNG nên dùng?

 

• App quá đơn giản → dùng React thuần là đủ

 

• Không cần SEO

 

• Team chưa quen React

 

Hướng dẫn bắt đầu với Next.js

 

Bước 1: Cài môi trường

 

• Cài Node.js

 

• IDE: VS Code

 

Bước 2: Tạo project

Bước 3: Chạy project

→ Mở: http://localhost:3000

 

Bước 4: Cấu trúc cơ bản

 

• pages/index.js → trang chủ

 

• pages/_app.js → layout chung

 

• pages/api/ → backend

 

Bước 5: Build & deploy

Deploy dễ nhất qua Vercel (native cho Next.js)