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)

Một vài lưu ý khi làm việc với Next Image

Vừa rồi Nam làm việc với đối tác Apple thì nhận ra họ có tiêu chuẩn rất cao trong việc đảm bảo hình ảnh sắc nét, đây cũng là Case cực kỳ quan trọng mà Nam quan tâm, bởi Apple luôn là người tiên phong trong việc làm giao diện, hình ảnh và là công ty công nghệ hàng đầu.

Việc sử dụng Next Image sẽ tự nén hình ảnh có kích thước lớn, nhằm tăng tốc độ tải trang, nhưng lại khiến hình ảnh không nét, để khắc phục điều này

Ở next.config.ts

const nextConfig: NextConfig = {
  /* config options here */
  output: 'export',
  images: { unoptimized: true },
  assetPrefix: './', // 👈 Thêm dòng này
  basePath: '',      // 👈 Đảm bảo không có base path nếu bạn mở file trực tiếp
};

Cần đảm bảo hình ảnh images được xuất ra là unoptimized để duy trì kích thước có sẵn

Ở các file tsx

Ở các file tsx khi dùng Next Image thì ta cần thêm cụm unoptimized vào để giữ hình ảnh ở kích thước sắc nét nhất