NextJS: 04-08 Header desktop với MUI 5

[@thienvu1377]

Ai bị lỗi "Error: Hydration failed because the initial UI does not match what was rendered on the server." thì thêm legacyBehavior vào component Link nha.

[@nguyenkhanhpham9951]

Cảm ơn bạn, cho mình hỏi có thể thêm phần legacyBehavior này vào mặc định để không cần mỗi lần dùng thẻ đều phải thêm legacyBehavior được không

[@hoanglongnguyenhuu2916]

@@nguyenkhanhpham9951 Vì a Hậu dùng 2 cái Link lồng nhau (MuiLink lồng trong Link) nên bị lỗi 2 thẻ a lồng nhau, trong doc của Nextjs có nói là trong trường hợp này sẽ phải trêm property "legacyBehavior" vào thẻ Link là được

[@sinhbuiinh2248]

00:09 Analyze design header for mobile and desktop 01:20 Split header by display xs, md, lg 05:55 Explain design for desktop header and list route 08:40 Apply flexbox for link by next/link and Link mui/system 11:35 Test and beauty code 12:55 Customize theme for MuiLink

[@EasyFrontend]

wohoo cảm ơn em nhiều nhé Sinh 😊

[@leviettiep3870]

Dự án em vừa start dùng NextJS. Nay cày series để dựng base ạ Mong ngóng anh sớm ra NextJS, chia sẻ kinh nghiệm với tụi em ạ 😁💕

[@EasyFrontend]

yeahhh cảm ơn em nhé Tiệp, cơ bản những concepts quan trọng thì nó nằm hết ở trong 3 chương đầu òi em nhen. Còn mấy chương này thì áp dụng làm dự án thôi à hihi 😊

[@tranphai3865]

a ơi, phần em làm thì bị lỗi "Error: Hydration failed because the initial UI does not match what was rendered on the server." Em thử xoá thẻ MuiLink thì nó hết lỗi, làm thế nào để fix lỗi này a nhỉ?

[@EasyFrontend]

em có setup cái phần MUI cho nextjs chưa em hen? mấy cái setup trong file _document.ts

[@tranphai3865]

@@EasyFrontend em có setup hết r a ạ,dù nó hiện lỗi nhưng các chức năng ko ảnh hưởng, CSS config trong theme của muilink vẫn nhận,chỉ là nó cứ hiện lỗi như thế phải tắt đi hơi khó chịu a :(

[@thiettruong6328]

@@tranphai3865 bạn sửa nó lại thành như code bên dưới {ROUTER_LIST.map((route) => ( {route.label} ))}

[@thiettruong6328]

mình dùng nextjs 13