NextJS là gì ?

NextJS là một Framework JS chủ lực của Vercel (cung cấp hosting chuyên cho JS dev, họ có gói free "unlimited" rất tốt) đạt 59k star trên Github. NextJS cung cấp giải phảp lập trình web sử dụng một hosting bao trọn cả backend lẫn frontend. 

Tại sao nên chọn NextJS?

Chưa có thời gian viết chi tiết nhưng nhìn chung NextJS sử dụng React làm frontend giúp người dùng cảm giác web hoạt động như một app trên điện thoại. NextJS render react trên server, tối ưu những file đó thành HTML/CSS/JS , những file tĩnh này luôn sẵn sàng được gọi bởi người dùng nên load cực nhanh. Nếu bạn host project trên Vercel còn được hưởng tính năng CDN free của họ, giúp tải trang nhanh hơn nữa.

Bình thường làm nodejs bạn phải cài đặt 2 server, một dành cho frontend, một dành cho backend. tuy nhiên với NextJS bạn chỉ cần một. NextJS cung cấp router (cho frontend) và router api (cho backend) rất đơn giản, dễ dùng hơn React nhiều. 

Bản thân người viết chọn Next bởi cảm thấy gần đất xa trời nên cần công cụ nhanh nhất để build website, Wordpress đầy đủ đó nhưng không tuỳ chỉnh theo ý mình hết được, học thì phải học cả PHP. Với NextJS cụ thể hơn là Nodejs chỉ cần học JS thôi, làm front to end. :D 

Cách cài đặt NextJS trên Window 10

Bạn sẽ cần một vài công cụ như sau:

  1. Editor - Mình dùng VS code  cài là xài
  2. Git - Bạn tải tại đây Git - Downloads (git-scm.com)
  3. NodeJS - Tải tại Node.js  chọn bản 14.15.4 LTS nhé, đừng ham hố bản cao.
     
Cài git xong mà nó hiện như thế này là được
Cài git xong mà nó hiện như thế này là được

Những phần mềm ở trên đều rất dễ cài, next và next thôi là xong

Tiếp đến bạn chọn 1 thư mục muốn sử dụng để chứa project Nextjs trong máy, sau đó chuột phải chọn Git Bash Here như hình ở trên. Bạn sẽ thấy terminal như hình dưới, paste vào đoạn mã

npx create-next-app
Sử dụng lệnh npx create-next-app
Sử dụng lệnh npx create-next-app

Đăt tên cho project của bạn rồi enter thôi, xong! Trong thư mục bạn chọn sẽ có 1 folder mới với tên project bạn vừa tạo

Có một folder mới dạng như thế này là ok
Có một folder mới dạng như thế này là ok
Chuột phải chọn Open with Code
Chuột phải chọn Open with Code

Bạn mở terminal của VS code lên bằng phím tắt Ctrl+`  hoặc chọn menu View > Terminal như hình

Bạn sẽ thấy terminal hiện ra như hình dưới, sau đó gõ npm run dev Nếu terminal hiện như hình là site đang chạy rồi

gõ
npm run dev

Bạn mở link localhost:3000 trong trình duyệt bất kì của máy tính sẽ thấy

Như vật là start xong với NextJS
Như vật là start xong với NextJS

Như vậy là bạn đã cài được NextJS, bây giờ vào thư mục pages > index  để code React trải nghiệm nhé. Gõ npm run build  chờ một lúc để Next build các file ra những file tĩnh, chúng sẽ xuất hiện trong thư mục .next, xong rồi gõ npm start  Bạn sẽ thấy next load nhanh hơn hẳn vì build ra file tĩnh.

Nếu bạn chưa biết code React thì nên học React trước, ít ra hiểu cái cơ bản của React đã rồi quay lại, NextJS sẽ không làm bạn 7 vọng đâu. Vercel làm hẳn khoá học làm quen với Nextjs tại Create a Next.js App | Learn Next.js

Nếu cài lỗi thì comment mình bói cho nhé.