10 câu hỏi phỏng vấn Next.js thường gặp

​

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

• React là một thư viện UI, chỉ lo phần render component phía client.
• Next.js là một framework xây trên React, bổ sung những thứ React thuần không có sẵn: file-based routing, Server-Side Rendering (SSR), Static Site Generation (SSG), tối ưu hình ảnh, API Routes, và gần đây nhất là React Server Components.

​

2. Phân biệt CSR, SSR, SSG và ISR

​

3. Server Components và Client Components khác nhau ở đâu?

• Server Component (mặc định): chạy trên server, không gửi JS xuống client → bundle nhỏ hơn, fetch data trực tiếp được, không dùng được hook (useState, useEffect).
• Client Component: phải khai báo 'use client' ở đầu file. Chạy trên browser, dùng được hook, event handler, browser API.

// ❌ Sai: client hoá cả Header chỉ vì cần usePathname trong NavLink
'use client';
export default function Header() { /* ... */ }

// ✅ Đúng: tách NavLink ra component riêng
// header.js (Server Component)
import NavLink from './nav-link';

// nav-link.js (Client Component)
'use client';
import { usePathname } from 'next/navigation';

​

4. File-based routing hoạt động thế nào? Khác gì Pages Router?

• Mỗi thư mục = một segment URL.
• File page.js (hoặc page.tsx) định nghĩa nội dung trang.
• File layout.js định nghĩa khung bao quanh, hỗ trợ nested layouts.
• Các “reserved files” khác: loading.js, error.js, not-found.js, route.js.

​

5. Dynamic Routes là gì? Làm sao truyền params vào trang?

/app/blog/[slug]/page.js   → /blog/hello-world
/app/shop/[...all]/page.js → catch-all: /shop/a/b/c
/app/shop/[[...all]]/page.js → optional catch-all

export default async function BlogDetail({ params }) {
  const { slug } = await params; // Next.js 15+: params là Promise
  const post = await getPost(slug);
  return <article>{post.title}</article>;
}

​

6. Khi nào dùng <Link>, khi nào dùng useRouter?

• **<Link>**: dùng cho navigation khai báo (declarative) — khi user click vào một link. Hỗ trợ prefetch tự động và chuyển sang CSR khi đang ở trong app.
• **useRouter()** (từ next/navigation): dùng cho navigation lập trình (programmatic) — sau khi submit form, sau khi đăng nhập thành công, v.v.

'use client';
import { useRouter } from 'next/navigation';

const router = useRouter();
router.push('/dashboard');
router.replace('/login');
router.refresh(); // refetch Server Component

​

7. Data fetching trong App Router hoạt động ra sao?

export default async function PostsPage() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 }, // ISR: cache 60 giây
  });
  const posts = await res.json();
  return <PostList posts={posts} />;
}

• cache: 'force-cache' (mặc định) → tương đương SSG
• cache: 'no-store' → tương đương SSR
• next: { revalidate: N } → tương đương ISR

​

8. API Routes / Route Handlers dùng để làm gì?

// app/api/posts/route.js
export async function GET() {
  const posts = await db.post.findMany();
  return Response.json(posts);
}

export async function POST(request) {
  const body = await request.json();
  const post = await db.post.create({ data: body });
  return Response.json(post, { status: 201 });
}

• Webhook handler
• Proxy che giấu API key
• BFF (Backend for Frontend) đơn giản
• Xử lý form submit, upload file

​

9. Tối ưu performance trong Next.js — bạn làm những gì?

• <Image> từ next/image — lazy loading, sinh srcset, dùng AVIF/WebP tự động.
• <Link> với prefetch — tải sẵn route khi link xuất hiện trong viewport.
• next/font — tự host font, tránh layout shift.
• Server Components — giảm JS bundle gửi xuống client.
• Streaming với loading.js và <Suspense> — hiển thị UI từng phần thay vì chờ toàn bộ data.
• Dynamic import (next/dynamic) — code-splitting cho component nặng (chart, editor).
• Tránh 'use client' ở root — chỉ client hoá những gì thực sự cần.
• Caching đúng cách với fetch options và revalidateTag / revalidatePath.

​

10. Bạn deploy Next.js ở đâu? Vì sao?

• Vercel: đơn giản nhất, hỗ trợ đầy đủ mọi tính năng Next.js (ISR, Image Optimization, Edge Functions). Nhược: giá cao khi scale.
• Self-host (Docker + Node.js): linh hoạt, kiểm soát chi phí, nhưng phải tự lo Image Optimization, caching, CDN.
• Cloudflare Pages / Netlify / AWS Amplify: tốt cho dự án nhỏ, nhưng một vài tính năng (ISR, middleware) có thể giới hạn.

​

Một vài golden rules khi trả lời phỏng vấn Next.js

• Đừng trả lời chung chung. “Next.js có SSR” là chưa đủ — hãy nói khi nào dùng SSR và vì sao.
• Luôn so sánh với Pages Router. Người phỏng vấn thường muốn biết bạn có hiểu sự thay đổi từ Next.js 12 → 13+ không.
• Nhắc đến caching. App Router có hệ thống cache 4 tầng (Request Memoization, Data Cache, Full Route Cache, Router Cache) — nắm sơ là điểm cộng lớn.
• Đừng “phun” buzzword. Nếu nói “React Server Components” thì phải giải thích được nó là gì, khác Client Component ra sao.
• Sẵn sàng cho câu hỏi sâu hơn. Sau câu “SSR là gì?” thường sẽ là “Streaming SSR khác gì SSR truyền thống?”.

​

Tổng kết

1. Next.js vs React
2. CSR / SSR / SSG / ISR
3. Server vs Client Components
4. File-based routing & App vs Pages Router
5. Dynamic Routes
6. <Link> vs useRouter
7. Data fetching trong App Router
8. API Routes / Route Handlers
9. Tối ưu performance
10. Deployment

• Server Actions và useFormState, useFormStatus
• Middleware và Edge Runtime
• Caching strategies: revalidateTag, revalidatePath, unstable_cache
• Parallel Routes và Intercepting Routes
• Internationalization (i18n) trong App Router