Next.js đang là một trong những framework phổ biến nhất để xây dựng web application hiện nay. Nhiều công ty sử dụng Next.js cho các dự án cần SEO tốt, hiệu năng cao và khả năng mở rộng.

Vì vậy khi phỏng vấn vị trí Frontend hoặc Fullstack Developer, nhà tuyển dụng thường đặt các câu hỏi liên quan đến Next.js để kiểm tra kiến thức nền tảng.

Trong bài viết này, chúng ta sẽ cùng xem 5 câu hỏi phỏng vấn Next.js thường gặp và cách trả lời hiệu quả.

1. Next.js là gì? Nó khác gì với React?

Câu hỏi

Next.js là gì và tại sao nhiều dự án sử dụng Next.js thay vì React thuần?

Trả lời

Next.js là framework dựa trên React giúp xây dựng web application với nhiều tính năng tích hợp sẵn.

Trong khi đó, React chỉ là library để xây dựng giao diện người dùng (UI).

Một số tính năng nổi bật của Next.js

• Server Side Rendering (SSR)

• Static Site Generation (SSG)

• Routing tự động theo file

• API routes (tạo backend trong project)

• Tối ưu SEO tốt hơn

Ví dụ

Một dự án React thông thường cần cài thêm nhiều thư viện:

• React Router

• cấu hình SEO

• cấu hình build

Trong khi Next.js đã tích hợp sẵn những tính năng này.

2. SSR, CSR và SSG trong Next.js khác nhau như thế nào?

Đây là câu hỏi rất phổ biến khi phỏng vấn Next.js.

CSR (Client Side Rendering)

Trang web được render trên trình duyệt của người dùng.

Quy trình:

Browser tải file JavaScript
↓
JavaScript render giao diện

Nhược điểm

• SEO kém

• thời gian load ban đầu chậm

SSR (Server Side Rendering)

Trang được render trên server mỗi khi có request.

Quy trình:

User request
↓
Server render HTML
↓
Browser nhận HTML

Ưu điểm

• SEO tốt

• dữ liệu luôn mới

SSG (Static Site Generation)

Trang được tạo sẵn khi build project.

Quy trình:

Build project
↓
Tạo HTML tĩnh
↓
Server hoặc CDN trả file HTML

Ưu điểm

• tốc độ cực nhanh

• SEO tốt

3. Routing trong Next.js hoạt động như thế nào?

Next.js sử dụng file-based routing, nghĩa là mỗi file trong thư mục pages hoặc app sẽ tương ứng với một route.

Ví dụ cấu trúc project

pages/
 ├ index.js
 ├ about.js
 └ blog.js

Các route tương ứng:

/        → index.js
/about   → about.js
/blog    → blog.js

Ví dụ tạo link

import Link from "next/link";

<Link href="/about">About</Link>

Điều này giúp việc quản lý route đơn giản và dễ hiểu hơn.

4. API Routes trong Next.js là gì?

Next.js cho phép tạo API backend trực tiếp trong project.

Ví dụ file:

pages/api/users.js

Code API:

export default function handler(req, res) {
  res.status(200).json({ name: "An" })
}

Endpoint API sẽ là:

/api/users

Nhờ vậy, Next.js có thể hoạt động như một framework fullstack.

5. Hydration trong Next.js là gì?

Hydration là quá trình React gắn JavaScript vào HTML được render từ server.

Quy trình:

Server render HTML
↓
Browser nhận HTML
↓
React attach event handlers

Nếu HTML trên server khác HTML trên client, lỗi sau có thể xảy ra:

Hydration failed because the initial UI does not match

Đây là một lỗi phổ biến khi phát triển ứng dụng Next.js.

Tổng Kết

Dưới đây là 5 câu hỏi phỏng vấn Next.js thường gặp:

1. Next.js là gì và khác gì với React?

2. SSR vs CSR vs SSG khác nhau như thế nào?

3. Routing trong Next.js hoạt động ra sao?

4. API Routes là gì?

5. Hydration trong Next.js là gì?

Nếu bạn đang chuẩn bị phỏng vấn vị trí Frontend Developer hoặc Fullstack Developer, việc nắm vững các kiến thức này sẽ giúp bạn tự tin hơn trong buổi phỏng vấn.

Câu Hỏi Thường Gặp (FAQ)

Next.js có tốt cho SEO không?

Có. Next.js hỗ trợ Server Side Rendering và Static Site Generation, giúp công cụ tìm kiếm dễ dàng index nội dung.

Next.js có thể làm backend không?

Có. Với API Routes, bạn có thể viết API trực tiếp trong project Next.js.

Khi nào nên dùng Next.js thay vì React?

Bạn nên dùng Next.js khi:

• cần SEO tốt

• muốn tối ưu hiệu năng

• cần routing và cấu trúc project rõ ràng

📢 Dịch vụ hỗ trợ lập trình & phần mềm

🚀 Bạn đang học CNTT hoặc cần phần mềm thực tế?

💻 TAT TEAM Chúng tôi hỗ trợ:

Blog được biên soạn bởi TAT TEAM, Hỗ trợ lập trình và xây dựng phần mềm!