Giới thiệu Next.js và thiết lập môi trường

Trong bài học này, học viên sẽ được làm quen với Next.js – một framework mạnh mẽ xây dựng trên nền tảng React, giúp phát triển web hiện đại một cách tối ưu hơn. Học viên sẽ hiểu lý do tại sao nên sử dụng Next.js thay vì Create React App, đồng thời cài đặt đầy đủ môi trường làm việc và khởi tạo dự án đầu tiên.

Next.js và môi trường cài đặt

1. Next.js là gì? Vì sao nên dùng?

• Next.js là một framework React giúp xây dựng các ứng dụng web hiện đại, hỗ trợ cả client-side và server-side rendering.
• Ưu điểm nổi bật:
  • Tối ưu SEO với khả năng SSR và SSG
  • Tích hợp routing tự động
  • Hỗ trợ API route – viết backend trong cùng dự án
  • Image optimization, code splitting, lazy loading
  • Triển khai dễ dàng với Vercel

2. So sánh với Create React App (CRA)

Kết luận: Nếu bạn cần làm một ứng dụng cần SEO tốt, tốc độ tải nhanh, khả năng mở rộng cao thì nên chọn Next.js.

3. Chuẩn bị môi trường phát triển

Yêu cầu:

• Node.js: nên dùng bản LTS (>= 18.x)
• VS Code: trình soạn thảo code phổ biến
• Git: quản lý phiên bản mã nguồn

Cài đặt:

• Tải Node.js: https://nodejs.org/
• Tải VS Code: https://code.visualstudio.com/
• Tải Git: https://git-scm.com/

Sau khi cài đặt, kiểm tra bằng terminal:

node -v
npm -v
git --version

4. Tạo project Next.js đầu tiên

Chạy lệnh sau trong terminal:

npx create-next-app@latest my-next-app

Quá trình sẽ hỏi:

• Typescript? → tùy chọn
• Tailwind? → tùy chọn
• App Router (recommended)? → nên chọn
• ESLint? → nên chọn
• Import alias? → nên chọn

Sau đó:

cd my-next-app
npm run dev

Mở trình duyệt: http://localhost:3000 → thấy trang chào mừng Next.js

5. Giới thiệu cấu trúc thư mục cơ bản

Ví dụ với App Router:

my-next-app/
├── app/                  → quản lý route và layout
│   └── page.tsx         → trang gốc
├── public/              → chứa hình ảnh, favicon
├── styles/              → các file CSS, globals.css
├── next.config.js       → cấu hình Next.js
├── package.json         → thông tin và dependencies

Giải thích nhanh:

• app/: định nghĩa các route theo thư mục (Next 13+)
• page.tsx: trang chính tương ứng với URL
• layout.tsx: layout dùng chung cho các trang

Kết luận

Bài học đầu tiên giúp học viên làm quen với Next.js và biết cách thiết lập đầy đủ môi trường làm việc. Học viên đã tạo được một project Next.js đầu tiên và hiểu cấu trúc cơ bản của dự án. Đây là nền tảng quan trọng để học tiếp các phần về routing, rendering và xây dựng giao diện trong các bài tiếp theo.