Thêm 3 file môi trường
- .env.development:
NEXT_PUBLIC_API_ENDPOINT=Link api dùng trong quá trình dev
- .env.mona:
NEXT_PUBLIC_API_ENDPOINT=Link api dùng để build lên domain mona.media
- .env.live:
NEXT_PUBLIC_API_ENDPOINT=Link api dùng trong domain live của khách
👉 Anh em hỏi BE phụ trách để lấy link api
Clone source:
git clone https://github.com/chaudev/LMS-SHB
Cài thư viện:
bun i
or npm i --force
or yarn install
Chạy dự án:
yarn dev
Xuất dự án ( static ):
bun run export
or yarn export:mona
(export live domain mona.media) or yarn export:live
(export live domain live) or npm run export
- Dự án này chạy bằng hình thức Static Html Export nên khi được yêu cầu xuất file thì chạy lệnh trên sau đó nén thư mục "out" và đưa file nén đó cho phía Back-End.
- Dự án này vẫn có thể build server bình thường.
- Khi tạo page mới thì nhớ "export default" do cơ chế của Nextjs nó bắt vậy.
- Tạo page mới có thể code trong page hoặc tạo components rồi import vào.
- Code xong phần nào nhớ test thật kĩ trước khi next ( lỗi ngu phạt 5 xị ).
Tài liệu có thể outdate từ khúc này trở xuống do đã quá cũ
- Không quá khắc khe nhưng ổn nhất thì nên áp dụng style của Airbnb: React Style Guide hoặc Javascript Style Guide
- Ps: Chaudepzaivailoz
import { useSelector } from 'react-redux'
import { RootState } from '~/store'
// ...
const user = useSelector((state: RootState) => state.user.information)
import { ShowNoti } from '~/common/utils'
//...
ShowNoti('success', 'Bạn đã được lên lương')
//...
ShowNoti('warning', 'Bạn sắp bị đuổi')
//...
ShowNoti('error', 'Bạn đã bị đuổi')
Sử dụng Dynamic Routes (slug) cho Static HTML Export
- Thay vì đặt tên file là "[slug].tsx" mà hãy đặt là "index.tsx"
- Thay vì viết như này
router.push({
pathname: '/course/videos/detail/[slug]',
query: { slug: Id }
})
- Thì hãy viết như này
router.push({
pathname: '/course/videos/detail',
query: { slug: Id }
})
-
Static files không thể hiểu được [slug] nên nếu cố viết theo cách đó sẽ bị lỗi khi reload lại trang.
-
Xem thêm tại: Nextjs Document @Châu đại đế
├ public
│ ├─── icons ⇾ lưu các icon png, svg
│ └─── images ⇾ lưu các ảnh sử dụng trong hệ thống (logo, background...)
│
├ src
│ ├ api ⇾ lưu các api
│ │ ├─ example ⇾ mẫu cách gọi 1 api (GET, POST, PUT, DELETE)
│ │ ├─ types ⇾ các khai báo types cho api
│ │ └─ instance.ts ⇾ file config axios (coi thôi đừng sửa)
│ │
│ ├ common
│ │ ├─ components ⇾ các componets sử dụng trong dự án
│ │ │ ├─ MainLayout ⇾ components Layout của dự án
│ │ │ └─ Primary ⇾ các components tái sử dụng nhiều lần (Button, Table...)
│ │ │
│ │ ├─ libs ⇾ lưu các biến static trong này cho dễ tái sử dụng
│ │ │
│ │ ├─ types ⇾ thư mục khai báo types
│ │ │
│ │ └─ utils ⇾ thư mục lưu các hàm hay sử dụng (ShowNoti...)
│ │
│ ├ pages ⇾ lưu các page của hệ thống
│ │
│ ├ services ⇾ lưu các api được gọi trước khi đăng nhập (không có token)
│ │
│ ├ store ⇾ thư mục khởi tạo và lưu reducer của redux
│ │
│ ├ styles ⇾ thư mục lưu các custom css (sass)
│ │
│ ├ appConfig.js ⇾ file cấu hình hệ thống
│ │
├ .env ⇾ file chứa các biến môi trường (kêu người nắm source đưa)
│ ├ NEXTAUTH_URL ⇾ root link
│ ├ NEXT_PUBLIC_API_ENDPOINT ⇾ api link
│ └ NEXT_PUBLIC_ONE_SIGNAL ⇾ key thông báo (push notification)
│
└ tailwind.config.js ⇾ file config "Tailwind"
- MultipleChoice = 1 ✅
- DragDrop = 2
- FillInTheBlank = 3
- Mindmap = 4
- TrueOrFalse = 5 ✅
- Sort = 6
- Write = 7 ✅
- Speak = 8
Có thể sử dụng theo cách sau để đồng bộ
// Created by Châu đại đế
import { QUESTION_TYPES } from '~/common/libs'
// QUESTION_TYPES là 1 file JSON chứa số tương ứng các loại bài tập
// VD: { MultipleChoice: 1, DragDrop: 2, FillInTheBlank: 3 }
console.log('- Question Types: ', QUESTION_TYPES)
- Mọi vấn đề liên hệ: Châu đại đế
- Momo: 0775712017
- lms, monamedia, elearning, fica