-
Nextjs Typescript (Using Pages Router)
-
tailwindcss style giao diện
-
react-aria-components unstyled components
-
react-aria xử lý các hành động với các components
-
react-stately xử lý trạng thái trong components stately
-
react-hook-form xử lý thao tác với form
-
Yup xác thực dữ liệu
-
Dayjs xử lý các tác vụ thời gian
-
react-use xử lý các hooks phổ biến
.
├── src
│ ├── components
│ ├── app
│ ├── public
│ ├── redux
│ └── [..]
└── [..]
yarn install
Tạo file .env.local
ở thư mục gốc, thêm các biến môi trường cần thiết:
NEXT_PUBLIC_API_ENDPOINT=https://development.imaxhitech.com:10000
-
Sử dụng absolute import path
@/*
// Import bằng absolute path ✅ import ABC from "@/components/layout/ABC";
-
Các page (trang chính) sẽ được viết trong
src/app/**
như document củaNextJS
-
Trong
src/app/_components/**
chứa các component sử dụng xuyên suốt toàn trangCác components đều
unstyled
nên khi sử dụng cần thêm vào classtailwindcss
để style đc như ý. -
Trong
src/types
định nghĩa các type sử dụngđặt tên
type T${type_name} = {}
để dễ dàng gợi ý từ VScode khi gõT
-
Internationalization (i18n) trong
src/i18n/*
sử dụng thông qua hooks
useTranslation
-
Gõ
rafc-default
để đc gợi ý snippet cấu trúc code cho fileđc cài đặt ở trong
./.vscode/vscode.code-snippets
-
Lint và format code:
Lưu lại file sẽ đc tự động format code
Các import đc tự sắp xếp và đc xóa những cái ko dùng đến
-
Commit lint:
type(scope?): subject
với:
-
type
là mộ trong những keyword dưới (tham khảoAngular
)- build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
- ci: Changes to our CI configuration files and scripts (example scopes: Gitlab CI, Circle, BrowserStack, SauceLabs)
- chore: add something without touching production code (Eg: update npm dependencies)
- docs: Documentation only changes
- feat: A new feature
- fix: A bug fix
- perf: A code change that improves performance
- refactor: A code change that neither fixes a bug nor adds a feature
- revert: Reverts a previous commit
- style: Changes that do not affect the meaning of the code (Eg: adding white-space, formatting, missing semi-colons, etc)
- test: Adding missing tests or correcting existing tests scope là optional, phạm vi ảnh hưởng của commit hiện tại
-
subject
là nội dung của commit
# VD commit khi thêm tính năng gọi API login: git commit -m "feat: add call API login
-