NextJS Setup

Setup dự án NextJS theo phong cách cần gì thì mới thêm cái đó.

Đầu tiên cần cài đặt NextJS dùng Typescript phiên bản mới nhất, hãy dùng câu lệnh:

npx create-next-app@latest --typescript

Sau khi cài đặt xong chúng ta mở dự án bằng VSCode sẽ thấy cấu trúc thư mục như sau:

Việc đầu tiên là tạo 1 thư mục src ở thư mục gốc và di chuyển thư mục pages, styles vào đó. Việc di chuyển này giúp thư mục gốc trông ngắn gọn và sạch sẽ hơn vì sau này có rất nhiều file khác được tạo thêm ở thư mục gốc.

NextJS có sẵn câu lệnh npm next lint và sử dụng ESLint để kiểm tra code có theo 1 quy chuẩn không nên tạm thời mình cứ dùng ESLint đó đã. Do ESLint để phát hiện thôi chứ không sửa code cho chúng ta nên phải cài thêm Prettier để sửa code, dùng câu lệnh:

yarn add --dev prettier

Prettier này cũng có quy chuẩn của riêng nó nên rất có thể nó sẽ xung đột với ESLint và ở trong tài liệu NextJS cũng nói thế nên chúng ta cần cài thêm một package để mà kết nối Prettier với ESLint, dùng câu lệnh:

yarn add --dev eslint-config-prettier

Sau khi cài xong chỉ đơn giản là vào file .eslintrc.json ở thư mục gốc và chuyển thành như sau:

{
"extends": ["next/core-web-vitals", "prettier"]
}

Đại loại là extends thêm cái prettier sau cái next kia, nó cũng sẽ chạy sau thằng next kia nên sẽ không bị xung đột.

Còn tiếp nhưng hãn nháp vậy