Bắt tay vào cài đặt Next.js qua ví dụ đầu tiên first-project

Đầu tiên, các bạn có thể tạo 1 folder ở bất cứ đâu trên máy tính của bạn, mình sẽ đặt tên folder này là next-first-project nhé.

Mình sẽ mở project này trong VS Code, cùng với đó mở terminal trong VS Code lên và gõ câu lệnh npm react-next-app ., dấu . ở đây có nghĩa là mình sẽ cài đặt next app trong folder next-first-project luôn, còn nếu không bạn hoàn toàn có thể gõ npm react-next-app [tên project của bạn]( ví dụ: npm react-next-app next-first-project), lúc này project mới sẽ được tạo với tên mà bạn đặt.

npx create-next-app .

React app có chút khác tại câu lệnh

npm install -g create-react-app 
npx create-react-app my-app 
cd my-app 
npm start

Check version Next.js

npx next -v

Next.js v11.0.1

Chạy thử project Next.js đầu tiên

Và để chạy thử project đầu tiên, chúng ta sẽ tiến hành sử dụng câu lệnh npm run dev, đợi project compile xong chúng ta sẽ vào http://localhost:3000/ là đường dẫn mặc định của ứng dụng next, bạn có thể thấy đường dẫn này trên terminal sau khi chạy câu lệnh npm run dev, và chúng ta sẽ thấy 1 giao diện như này:

Đây là project sau khi chúng ta tiến hành cài đặt đó.

Cấu trúc thư mục project Next.js

Ở đây có lẽ chúng ta quan tâm chính đến các folder pages và styles là chính

pages: toàn bộ các page trong website của chúng ta đều sẽ được viết ở trong này, và có 1 điều rất hay là các chúng ta đặt tên cho file hay folder ở trong folder pages này thì cũng chính là đường dẫn url dẫn đến trang đó. Ví dụ nhé: bạn muốn truy cập vào abc.com/about thì mình sẽ tạo 1 file about.js trong folder pages là được.
styles: chắc các bạn cũng đoán được rồi phải không, đây là nơi chứa file css cho project của chúng ta.
public: chứa các hình ảnh của dự án.
Và 1 số file khác như package.json chứa những lib cài vào dự án, next.config.js chứa những cấu hình dự án,...

Tổng kết

Tóm tại, trong bài viết ngày hôm nay, mình đã giới thiệu với các bạn Next.js là gì, tại sao chúng ta nên sử dụng Next.js để phát triển frontend, cùng với đó là tạo 1 project Next.js đầu tiên, cấu trúc 1 project Next.js. Trong bài tới mình sẽ đi sâu hơn vào một trong những concept chính của Next.js đó là Routing.