Chuẩn bị

Trước hết, bạn cần chuẩn bị một vài công cụ cần thiết trong môi trường dev của mình:

  • Nếu bạn chưa cài đặt Node.js, bạn có thể cài tại đây. Phiên bản Node.js cần phải từ 10.13 trở lên.
  • Bạn cũng cần một ứng dụng viết code, và terminal nữa nhé.

Tạo một dự án Next.js mới

Để tạo một dự án mới, trước tiên bạn cần cd đến thư mục bạn muốn đặt dự án của mình, sau đó chạy câu lệnh sau:

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

Chạy server dev

Bây giờ, bạn sẽ thấy thư mục nextjs-blog. cd vào thư mục đó:

cd nextjs-blog

Sau đó, bắt đầu chạy server mới này bằng câu lệnh:

npm run dev

Câu lệnh trên sẽ chạy ứng dụng Next.js mà ta mới tạo tại thư mục nextjs-blog, trên port 3000. Bạn có thể kiểm tra server của mình tại link: http://localhost:3000. Trang web mới của bạn sẽ trông như hình dưới đây

Chỉnh sửa trang chủ

Tiếp theo, ta sẽ thực hiện một vài điều chỉnh trên ứng dụng mới này.

  • Nếu server của bạn đã tắt, hãy bật nó lại nhé.
  • Mở file pages/index.js bằng ứng dụng viết code của bạn.
  • Thay thế dòng dữ “Welcome to” bên trong tag <h1> bằng chứ “Learn”.
  • Lưu file

Ngay khi bạn lưu file, sự thay đổi sẽ lập tức được áp dụng trên ứng dụng của chúng ta. Bạn sẽ thấy kết qua như sau:

Next.js đã hỗ trợ Fast Refresh trong các bản cập nhật mới nhất. Khi bạn thực hiện thay đổi trong code của mình, bạn sẽ thay ngay kết quả mà không cần phải tải lại trang. Quá tuyệt phải không nào.

Như vậy là bạn đã tạo được một dự án mới với Next.js rồi, bắt tay vào xây dựng ứng dụng trong mơ của mình thôi.