Giới Thiệu
- Bạn có nhu cầu tạo một trang web đơn giản và muốn chia sẻ nó với bạn bè? Trong bài viết này, mình sẽ hướng dẫn bạn từng bước để tạo một website đơn giản bằng Next.js và cách để deploy website đó lên Vercel.
Cài Đặt Môi Trường Làm Việc
| Thông Tin Cài Đặt | Chi Tiết Cài Đặt |
|---|---|
| Ngôn Ngữ Lập Trình | JavaScript, TypeScript |
| Framework | Next.js |
| Thư Viện UI | React.js |
| Runtime | Node.js |
| IDE | Visual Studio Code |
| Công Cụ Hỗ Trợ | Git, GitHub |
| Môi Trường Deploy | Vercel |
| Hệ Điều Hành | Windows |
1. Cài Đặt Node.js
Node.js là môi trường cho phép chạy các ngôn ngữ JavaScript (JS) và TypeScript (TS). Để cài đặt Node.js, bạn có thể sử dụng fast node manager (fnm).
# sh
# Tải và cài đặt fnm:
winget install Schniz.fnm
# Tải và cài đặt Node.js:
fnm install 22
# Kiểm tra phiên bản Node.js:
node -v # Kết quả nên là "v22.13.1".
# Kiểm tra phiên bản npm:
npm -v # Kết quả nên là "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 mạnh mẽ kết hợp giữa Node.js và React.js, giúp tối ưu hóa việc phát triển web.
Tính Năng Nổi Bật
- SSR (Server-Side Rendering): Kết xuất trang trên server trước khi gửi đến client, cải thiện SEO.
- SSG (Static Site Generation): Tạo trang tĩnh trước khi deploy, giúp tải nhanh hơn.
- ISR (Incremental Static Regeneration): 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
- Tạo một thư mục để lưu trữ mã nguồn. Ví dụ:
D:\WorkSpace\2025. - Khởi tạo một template project từ GitHub repository bằng lệnh 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@latestSau khi chạy lệnh, bạn cần cung cấp thông tin cấu hình cho project. Hệ thống sẽ tự động tải xuống các package cần thiết và hoàn thành quá trình khởi tạo project.
- Kiểm tra cấu trúc thư mục của project:
# sh
cd my_nextjs_app
# Xem cấu trúc thư mục
lsĐây là cấu trúc thư mục của project, tuy có thể chưa hoàn chỉnh và đẹp mắt. Vì vậy, chúng ta cần cài đặt thêm IDE để quản lý mã nguồn một cách dễ dàng hơn.
3. Cài Đặt Visual Studio Code (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ữ và được phát triển bởi Microsoft.
Cài Đặt
Bạn có thể tải xuống và cài đặt từ trang chủ: Visual Studio Code. Sau khi cài đặt xong, hãy mở project lên trong VS Code.
Quản Lý và Phát Triển Dự Án
Sau khi hoàn tất cài đặt, bạn sẽ sử dụng VS Code để quản lý mã nguồn, phát triển và chạy dự án trong môi trường development. Mở một terminal mới trong VS Code (Chọn View => Terminal) và thực hiện lệnh:
#sh
# Build project
npm run build
# Chạy project
npm run startChỉ trong vài giây, project của bạn đã được build và chạy thành công!
Mở trình duyệt và truy cập vào đường link: http://localhost:3000 để xem kết quả.
Bạn đã thành công trong việc chạy một website đơn giản trên môi trường local. Tuy nhiên, để mọi người có thể truy cập vào website của bạn, bạn cần công khai và host website trên nền tảng cloud. Chúng ta sẽ sử dụng Vercel để thực hiện điều này.
4. Cài Đặt Git và GitHub
Vercel có thể được kết nối với GitHub để việc deploy website trở nên dễ dàng hơn. Bạn có thể tham khảo bài viết về Git để hiểu rõ hơn về vai trò của nó trong phát triển phần mềm.
Tạo Repository cho Dự Án
- Tạo một repository mới trên tài khoản GitHub của bạn.
- Kết nối local repository đến remote repository bằng lệnh sau:
#sh
git remote add origin https://github.com/YourUsername/my_nextjs_website.git- Đẩy mã nguồn lên remote repository:
#sh
git push -u origin mainTiếp theo, chúng ta sẽ tìm hiểu cách làm việc với Vercel để công khai website.
Công Khai Website Lên Vercel
Vercel Là Gì?
Vercel là nền tảng cloud cho phép bạn host các website miễn phí, hỗ trợ nhiều framework như Vue.js, Angular, Next.js, và Vite.
Làm Việc Với Vercel
- Truy cập vào trang chủ của Vercel và tạo một tài khoản: Vercel Signup.
- Đăng nhập bằng tài khoản GitHub để dễ dàng kết nối với repository.
- Nhập repository bạn muốn làm việc và thực hiện các bước cài đặt để deploy website.
- Bấm deploy và chờ vài phút để Vercel hoàn tất quá trình công khai website của bạn.
- Truy cập vào website để xem thành quả tại đường link: https://my-nextjs-website.vercel.app/
Kết Luận
Vậy là mình đã hướng dẫn bạn cách tạo và công khai một website đơn giản bằng Next.js và Vercel. Nếu bạn đang tìm kiếm một giải pháp nhanh chóng và dễ dàng để xây dựng website cá nhân, đây chắc chắn là lựa chọn tuyệt vời cho bạn!
