00:15 Introduce 00:28 Create-react-app setting 01:00 Example setting in homepage MUI 01:40 Install package from official document MUI 02:40 Folder structure management 03:00 File important need attention 03:50 Check installed package 04:10 Move needed function from official document MUI 05:10 Optimize theme 05:40 Export all utils & setting tsconfig 06:20 Add custom document 07:10 Detail _document.tsx & structure HTML in _document 08:10 Custom _app.tsx 10:45 Running to check after custom 11:10 Apply Box from MUI 12:50 How to customize MUI theme 14:10 Content next section
Em chào anh ạ, em đang sử dụng nextjs 13, em làm theo ví dụ trên document, và có báo waning như này: Warning: Extra attributes from the server: class at html
đúng òi em nhen, em dùng 1 trong 2 là okie rồi nè còn cái nào phổ biến hơn thì anh hk rõ, anh nghĩ là tùy team sẽ thích dùng cái nào hơn cá nhân anh thì thiên về MUI hơn hihi
NextJS latest version 13 rồi nên structure nó khác so với hiện tại, anh có thể hướng dẫn integrate mui UI vào NextJS 13 theo structure mới /app được không ạ?
hi em, next 13 thì có thêm feature mới nhưng mấy cái cũ nó vẫn works bình thường em nha. Và việc integrate MUI cũng ko có gì thay đổi thì phải. Em có gặp lỗi gì hk em hen ?
@@EasyFrontend dạ hiện tại nó work bình thường nhưng nó có release version mới hơn nên chắc có enhance tốt hơn. về việc integrate thì nó chưa có example cho new structure. theo structure mới thì không có file _app.tsx, _document.tsx như version trong video hiện tại. Nếu a rãnh thì làm cái video ngắn cho nó để mọi người tham khảo luôn
Khi mình sử dụng vào trong themeprovider thì hiện lỗi TypeError: Cannot read properties of undefined (reading 'fontWeightBold'), phải khắc phục bằng cách nào ạ. Không sử dụng thì app lại chạy bình thường
Anh ơi cho e hỏi. h em có 1 repo react là admin dashboard. em muốn build nó ra và gắn vào làm 1 route trong server node của thằng next app này thì làm thế nào anh. hay e nên gắn nó ở server api
à anh nghĩ chắc là ko đc quá em, anh chưa thử vụ này 😉 mà anh nghĩ nếu là admin dashboard thì ko cần chuyển sang NextJS nhen, thay vào đó em hãy deploy lên một cái sub-domain em nhen 😊
hi Việt, em ping anh qua Messenger hen em tạo cái codesandbox rồi import code lên đó nhen có gì a check thử cho, khả năng là khác version hoặc import sai gì đó này là repo code của anh, em có thể tham khảo trước github.com/paulnguyen-mn/learn-nextjs
00:15 Introduce
00:28 Create-react-app setting
01:00 Example setting in homepage MUI
01:40 Install package from official document MUI
02:40 Folder structure management
03:00 File important need attention
03:50 Check installed package
04:10 Move needed function from official document MUI
05:10 Optimize theme
05:40 Export all utils & setting tsconfig
06:20 Add custom document
07:10 Detail _document.tsx & structure HTML in _document
08:10 Custom _app.tsx
10:45 Running to check after custom
11:10 Apply Box from MUI
12:50 How to customize MUI theme
14:10 Content next section
Em chào anh ạ, em đang sử dụng nextjs 13, em làm theo ví dụ trên document, và có báo waning như này: Warning: Extra attributes from the server: class
at html
hi em, anh hk rõ issue này lắm, nếu ko giải quyết đc thì em có ping anh qua messenger để trao đổi thêm hen
dạ cho em hỏi nếu em dùng tailwindcss thì k cần setup mui phải k anh, với giữa tailwind với mui thì cái nào phổ biến hơn ạ
đúng òi em nhen, em dùng 1 trong 2 là okie rồi nè
còn cái nào phổ biến hơn thì anh hk rõ, anh nghĩ là tùy team sẽ thích dùng cái nào hơn
cá nhân anh thì thiên về MUI hơn hihi
NextJS latest version 13 rồi nên structure nó khác so với hiện tại, anh có thể hướng dẫn integrate mui UI vào NextJS 13 theo structure mới /app được không ạ?
khác chỗ nào á bạn
hi em, next 13 thì có thêm feature mới nhưng mấy cái cũ nó vẫn works bình thường em nha. Và việc integrate MUI cũng ko có gì thay đổi thì phải. Em có gặp lỗi gì hk em hen ?
@@EasyFrontend dạ hiện tại nó work bình thường nhưng nó có release version mới hơn nên chắc có enhance tốt hơn. về việc integrate thì nó chưa có example cho new structure. theo structure mới thì không có file _app.tsx, _document.tsx như version trong video hiện tại. Nếu a rãnh thì làm cái video ngắn cho nó để mọi người tham khảo luôn
Khi mình sử dụng vào trong themeprovider thì hiện lỗi TypeError: Cannot read properties of undefined (reading 'fontWeightBold'), phải khắc phục bằng cách nào ạ. Không sử dụng thì app lại chạy bình thường
hmm cái này anh chưa bị nữa em, em còn bị hk?
nếu có em share codesandbox qua messenger anh xem thử hen
Anh ơi cho e hỏi. h em có 1 repo react là admin dashboard. em muốn build nó ra và gắn vào làm 1 route trong server node của thằng next app này thì làm thế nào anh. hay e nên gắn nó ở server api
à anh nghĩ chắc là ko đc quá em, anh chưa thử vụ này 😉
mà anh nghĩ nếu là admin dashboard thì ko cần chuyển sang NextJS nhen, thay vào đó em hãy deploy lên một cái sub-domain em nhen 😊
a ơi em lại bị lỗi "TypeError: (0 , _utils__WEBPACK_IMPORTED_MODULE_3__.createEmotionCache) is not a function", phần này e làm giống hệt a r ạ
anh xem có cách nào giúp em fix với ạ :((
hi Việt, em ping anh qua Messenger hen
em tạo cái codesandbox rồi import code lên đó nhen
có gì a check thử cho, khả năng là khác version hoặc import sai gì đó
này là repo code của anh, em có thể tham khảo trước
github.com/paulnguyen-mn/learn-nextjs
@@EasyFrontend dạ vâng ạ chiều tối học về em phiền a xíu ạ
a có src set up sẵn ko cho e xin với
github.com/paulnguyen-mn/learn-nextjs
em check ở đây nha hehe
anh ơi sao em tải xong MUI thông báo thành công mà nó không hiện trong package.json ạ, nó có ảnh hưởng gì không ạ
em dùng lệnh gì vậy em? có thể em dùng npm mà thiếu --save nên nó ko add vào package.json
a đoán là vậy
em dùng yarn thì nó lỗi, xong em dùng npm thì nó k vào ạ
@@vietnguyeninh6311 nếu em dùng npm thì nhớ thêm -save nhen
npm install -save tên-package
@@EasyFrontend dạ vâng ạ