Sau đây mình sẽ hướng dẫn các bạn các bước cài đặt chi tiết:
1. Cài đặt runtime Node.js:
Node.js là môi trường để chạy được các ngôn ngữ Javascript (js), TypeScript (ts).
sử dụng fnm (fast node manager) để cài đặt Node.js
# sh
# Download and install fnm:
winget install Schniz.fnm
# Download and install Node.js:
fnm install 22
# Verify the Node.js version:
node -v # Should print "v22.13.1".
# Verify npm version:
npm -v # Should print "10.9.2".
TypeScript là ngôn ngữ mở rộng từ Javascript được phát triển bởi Microsoft.
2. Cài đặt Next.js
Next.js là gì?
Next.js là một framework được phát triển kết hợp giữa Node.js và thư viện React.js giúp việc phát triển web được tối ưu hơn.
Tính năng nổi bật
SSR (Server-Side Rendering): Render trang trên server trước khi gửi đến client, giúp SEO tốt hơn.
SSG (Static Site Generation): Tạo trang tĩnh trước khi deploy, giúp tải nhanh hơn.
ISR (Incremental Static Regeneration): Kết hợp giữa SSR và SSG, cập nhật trang tĩnh mà không cần build lại toàn bộ.
API Routes: Viết backend API ngay trong dự án Next.js mà không cần server riêng.
Hỗ trợ TypeScript: Tích hợp tốt với TypeScript.
Cài đặt dự án
Chúng ta cần cài đặt trước: Node.js để chạy được Next.js
Bước 1: Tạo một thư mục để lưu trữ mã nguồn. vd: D:\WorkSpace\2025
Bước 2: Khởi tạo một template project (từ github repository) bằng command sau:
# sh
# thay đổi đường dẫn đến thư mục hiện tại.
cd /d D:\WorkSpace\2025
# khởi tạo project
npx create-next-app@latest
Sau khi chạy command trên chúng ta cần cấu hình một số thông tin cho project dưới dạng câu hỏi (bạn có thể tham khảo setup mà mình minh họa ở hình bên dưới).
Sau các bước cấu hình thì môi trường sẽ tự động tải xuống các package cần thiết bằng lệnh npm và hoàn tất quá trình khởi tạo project.
Bước 3: bước tiếp theo chúng ta sẽ xem chi tiết về cấu trúc project đã được khởi tạo
# sh
# thay đổi đường dẫn đến thư mục của project
cd my_nextjs_app
# xem cấu trúc thư mục
dir
Bên trên là cấu trúc thư mục của project nhưng nhìn có vẻ không được đẹp mắt cho lắm nhỉ 😅.
Chính vì thế chúng ta cần cài đặt thêm IDE để giúp việc quản lý mã nguồn của project trở nên dễ dàng và trực quan hơn!
3. Cài đặt IDE VS Code
Khái niệm
Visual Studio Code (VS Code) là một trình soạn thảo mã nguồn hỗ trợ đa ngôn ngữ được phát triển bởi Microsoft.
Sau khi hoàn tất cài đặt thì giao diện, bạn hãy mở project lên:
Quản lý và phát triển dự án
Sau khi hoàn tất cài đặt, chúng ta sẽ sử dụng Vs Code để quản lý mã nguồn, phát triển và chạy dự án trên môi trường development (máy tính cá nhân của bạn).
Mở một terminal mới trên Vs Code (Chọn View => Terminal)
Build và chạy project bằng lệnh:
#sh
# build project
npm run build
# chạy project
npm run start
Trong tích tắc thì project đã build và chạy thành công!
Chúng ta đã chạy được một website đơn giản trên môi trường development. Nhưng nếu bạn muốn mọi người có thể truy cập vào website của bạn thì cần phải public và host website lên các nền tảng cloud.
Trong bài viết này chúng ta sẽ sử dụng Vercel để host website.
4. Cài đặt Git, Github
Vercel được kết nối với github để việc deploy website trở nên tiện lợi hơn.
