Bài 1. Next.js là gì? Cài đặt và dự án đầu tiên

Next.js là framework React full-stack: vừa dựng giao diện, vừa chạy mã phía máy chủ, có định tuyến theo thư mục, tối ưu ảnh, SEO và triển khai dễ dàng. Bài này giới thiệu Next.js, cài đặt dự án với TypeScript và Tailwind CSS, và tìm hiểu cấu trúc thư mục.

40 phútTrung cấp
Bạn sẽ học được
  • Hiểu Next.js giải quyết vấn đề gì so với React thuần
  • Tạo dự án bằng create-next-app
  • Nắm cấu trúc thư mục App Router
  • Chạy dev, build và start

Một số khái niệm

  • React: thư viện xây giao diện bằng component; tự nó không có định tuyến, không chạy máy chủ.
  • Next.js: framework trên React, thêm App Router (định tuyến theo thư mục), Server Components, Server Actions, API route, tối ưu ảnh/phông chữ, metadata SEO.
  • Render phía máy chủ: HTML được tạo sẵn trên máy chủ nên tải nhanh và tốt cho SEO, sau đó React "tiếp quản" để trang tương tác được.
  • Turbopack: công cụ build mặc định, rất nhanh khi phát triển.

Tạo dự án

# Cần Node.js LTS (xem loạt Node.js Bài 1)
npx create-next-app@latest qlsv-web
# Chọn: TypeScript - Yes, ESLint - Yes, Tailwind CSS - Yes,
#       src/ directory - Yes, App Router - Yes, import alias @/* - Yes
cd qlsv-web
npm run dev        # mở http://localhost:3000

Cấu trúc thư mục

qlsv-web/
├── public/              # tệp tĩnh: ảnh, favicon (truy cập /logo.png)
├── src/app/
│   ├── layout.tsx       # khung chung cho mọi trang (html, body)
│   ├── page.tsx         # trang chủ "/"
│   ├── globals.css      # CSS toàn cục (@import "tailwindcss")
│   └── favicon.ico
├── next.config.ts       # cấu hình Next.js
├── package.json
└── tsconfig.json
// src/app/page.tsx
export default function TrangChu() {
  return (
    <main className="mx-auto max-w-3xl p-8">
      <h1 className="text-3xl font-bold text-emerald-700">Quản lý sinh viên</h1>
      <p className="mt-2 text-slate-600">Ứng dụng đầu tiên với Next.js.</p>
    </main>
  );
}

Các lệnh

LệnhÝ nghĩa
npm run devChạy chế độ phát triển, tự tải lại khi sửa mã
npm run buildBuild tối ưu cho môi trường thật
npm startChạy bản đã build
npm run lintKiểm tra mã bằng ESLint
Mẹo hay

Nên học React cơ bản (component, props, state, hook useState/useEffect) trước; loạt TypeScript trên trang giúp bạn đọc hiểu kiểu dữ liệu trong dự án Next.js.

Lưu ý

Next.js thay đổi nhanh; khi đọc tài liệu cũ hãy chú ý phân biệt App Router (thư mục app/, hiện tại) với Pages Router (thư mục pages/, cách cũ).

Thực hành
  1. Tạo dự án qlsv-web và chạy thử.
  2. Sửa trang chủ hiển thị tên bạn và lớp.
  3. Đặt ảnh logo vào public/ và hiển thị.
  4. Chạy npm run build và xem kết quả trong Terminal.
Tóm tắt bài học
  • Next.js = React + máy chủ + định tuyến + tối ưu.
  • create-next-app tạo dự án với TypeScript, Tailwind.
  • app/layout.tsx là khung, app/page.tsx là trang.
  • dev để phát triển, build + start khi triển khai.