Hướng dẫn Nextjs bài 1: Setup dự án mới

Hướng dẫn Nextjs bài 1: Setup dự án mới

Chào mừng bạn đến với Series Hướng dẫn Nextjs, đây là các nguồn tài nguyên sưu tầm và tổng hợp từ Guideline hướng dẫn của Nextjs, nhưng Nam sẽ đúc kết một cách ngắn gọn theo góc nhìn của bản thân về những gì cần làm, nếu bạn thấy hứng thú thì có thể theo dõi Series này nhé, một phần để chia sẻ, nhưng một phần thì việc ghi chép lại cũng giúp Nam ghi nhớ nhiều hơn

Cách tạo 1 dự án mới với Nextjs

Trước hết là Nextjs Recommend chúng ta sử dụng pnpm, công cụ mà họ cho rằng sẽ nhanh và hiệu quả hơn npm hoặc yarn, mình cũng thấy Ok 

npm install -g pnpm

Ok tiếp đó ta sẽ tạo 1 dự án Nextjs hoàn toàn mới

npx create-next-app@latest nextjs-dashboard

Cấu trúc Folder trong Nextjs

Nam đã gặp vấn đề không hề nhỏ trong cách sắp xếp Component, Layout khiến cho Code bị rối, để đơn giản hóa mọi việc Nam sẽ theo cấu trúc chuẩn của Nextjs

Nguồn: Xem tại đây nhé

• /app sẽ bao gồm routes, components và các logic trong ứng dụng
• /app/lib sẽ chứa các functions dùng trong ứng dụng, cũng như các hàm tái sử dụng (Khá quan trọng) hoặc các hàm gọi dữ liệu (Quan trọng)
• /app/ui sẽ chứa các UI components của dự án, như cards, tables, form, để đơn giản hóa thì ta sẽ để các template tại đây và gọi chúng ra một cách nhanh gọn. 
• /public chứa các tài nguyên tĩnh như ảnh, fonts...
• Config Files: File next.config.ts này sẽ đặt tại cấp cao nhất của ứng dụng

Để chạy dự án thì ấn lệnh gì?

pnpm i

Trước hết cài các packages của dự án đã

pnpm dev

Để chạy trong môi trường dev và hiện ứng dụng ở cổng 3000 (http://localhost:3000)