👉File tài liệu của khóa học: docs.google.com/document/d/1NtR6xyAaspc1QV5b0kMGHd-kXtLlpKBUExHf3VMSQMA/edit?usp=sharing 🌹Bạn nào muốn donate hay mua cho mình cốc cà phê, cái pizza hay chỉ là gói mì tôm hảo hảo, dùng link này nhé: hoidanit.github.io/official/donate 👉Khóa học Next.js 13 & 14 Pro: hoidanit.com.vn/khoa-hoc/react-pro-max-voi-nextjs-lam-chu-toan-dien-reactjs-hien-dai-65198100e6bafa8caad417a6.html 👉Xem Full Playlist này tại đây: th-cam.com/play/PLncHg6Kn2JT5CAeetB0Kt6bWgiPSWIq8G.html
có một tips nhỏ khi lồng các folder (components, style) vào route (users, blog) là các bạn có thể dùng tiền tố _ (_components, _style, _helper) để cho next nhận biết là thư mục đó private, khi đó thì khi ta truy cập vào /users/components sẽ không bị dính lỗi page.tsx chưa được export default. Phần này đã được nêu rõ trên phần /docs/getting-started/project-structure#route-groups-and-private-folders của Next. Mình hiện tại cũng đang áp dụng phương pháp này để việc quản lý thư mục trở nên dễ dàng hơn với một framework đặt thư mục thành routing phức tạp như next.
trong video mình có đề cập issue trên github cái key nó chỉ là workaroud thôi bạn. như mình hiểu khi thay đổi key, component sẽ re-render nên mình ko muốn dùng :v
với nextjs 13 trở đi. nó cache rất tốt. gần như là ko nên dùng với các thư viện state ở client (quan điểm cá nhân mình) còn bạn cug nên tìm hiểu xem nó ntn nhé
run docker mình có thể redirect port từ docker ra local port thông qua lệnh docker run ... -p 3000:8000, mình trước làm 1 dự án với ruby on rails dùng docker cho phần database postgresql dùng thấy ok.
Cho em hỏi về vấn đề style ạ. Khi mình dùng Ant design mà các component họ cung cấp k đáp ứng đủ thì mình có thể kết hợp tailwindcss hay css thuần được ko ạ
E đang code 1 dự án với Nextjs14, e gặp 1 vấn đề là khi dùng SSR của Nextjs thì khi ấn vào để chuyển trang thì nó phản hồi rất chậm ( Web đã build lên server ). Hiện e k biết là do load API hay do Server. Mong a giải đáp thắc mắc ạ
nó phản hồi chậm vì bạn đang chọn SSR. như vậy mỗi lần nhấn Link (khi chưa lưa cache navigate) thì nó cần fetch data để render ra page. tách bớt data ra đi bạn, cái nào mà dùng SSG được thì build trước đi. còn xác định là SSR thì luôn chậm. muốn nhanh đc SSR thì: cache data để ko cần fetch (hoặc fetch ít nhất có thể). hoặc đầu tư server khủng thì nó load nhanh thôi :v
@@hoidanit dùng SSG sao a? Ví dụ trong hàm generateStaticPath ở trang detail thì gọi API getList rồi map từng item ra build file html đúng k a? Vấn đề là API đó lấy tất cả item trong list thì nếu API getlist có giới hạn data trả về để phân trang thì sao ạ? như thế thì nextjs đâu có build html cho tất cả item được
@@MwieReview ví dụ bạn có rất nhiều sản phẩm, thì chỉ build sản phẩm nổi bật thôi. cho build tất cả thì tốn time chờ nextjs build thôi. còn muốn build như thế nào, bạn control backend đều sẽ làm đc
@@hoidanit e vẫn chưa clear đc a ơi 😂 , trường hợp nếu e làm SSG cho trang detail mà chỉ build sản phẩm nổi bật, thì khi user bấm vào 1 sản phẩm k thuộc các sp trên thì sẽ vẫn bị chậm hả a?
thực tế mấy cái bạn hỏi, mình đã làm hết trong này rồi: hoidanit.com.vn/khoa-hoc/react-pro-max-voi-nextjs-lam-chu-toan-dien-reactjs-hien-dai-65198100e6bafa8caad417a6.html nếu dùng session với nextjs thì chọn next auth còn server action cho phép bạn gọi function trên server => bạn có 2 cách để truyền access token: 1 là truyền luôn từ client lên, hoặc 2, lấy từ session ra
Em chào anh, anh cho em hỏi em dùng App router thì có dùng được với getStaticPaths và getStaticProps không ạ. Em dùng thì nó báo lỗi mà e thấy anh vẫn dùng được ạ
chào anh cho hỏi là mình có thể thêm param vào trong file layout.tsx được không, mục đich em muốn là có thể turn on/off Header, ví dụ page A cần Header, page B thì không cần Header
ai đi thêm params layout vào đâu bạn. cái case của bạn nó giống như là: homepage cần header và login ko cần header. bạn có thể tìm hiểu group routes. còn mình đã làm case của bạn trong khóa học này rồi: hoidanit.com.vn/khoa-hoc/react-pro-max-voi-nextjs-lam-chu-toan-dien-reactjs-hien-dai-65198100e6bafa8caad417a6.html
mình nghĩ ko phải đâu. vì nếu bạn code thuần tailwind với nextjs nó chạy bt đấy. và như cá nhân mình, dùng win 10 và win 11 nó cho ra kết quả khác nhau =))
Lúc f5 là client nó chờ server render toàn bộ trang bao gồm cả cái loading. Lúc nhấn ở nav thì nó đã đc tải nên mới có loading, chứ mình nghĩ ko phải do win. Hoặc nếu có thì do browser phiên bản chưa hỗ trợ 😅
ko phải như bạn nói đâu. với cơ chế streaming của nextjs, khi f5 vẫn có cái loading đấy (mình đã test rồi, hoặc bạn có thể code thuần tailwind (ko sử dụng antd) là thấy :v@@NamNguyen-lb8qy
bạn quan tâm (muốn tiết kiệm thời gian), bạn có thể tham khảo khóa này của mình (cover cả v13 và v14): hoidanit.com.vn/khoa-hoc/react-pro-max-voi-nextjs-lam-chu-toan-dien-reactjs-hien-dai-65198100e6bafa8caad417a6.html
có 2 cách cho bạn: 1 là lưu token vào .env 2 là lưu trong session khóa học này mình đã làm đều bạn hỏi rồi đấy : hoidanit.com.vn/khoa-hoc/react-pro-max-voi-nextjs-lam-chu-toan-dien-reactjs-hien-dai-65198100e6bafa8caad417a6.html
server fake mình có sẵn rồi bạn. và như mình chia sẻ đấy, mình ko dùng nextjs làm backend. nên tiện thể thì mình demo luôn (thay vì viết logic backend trên nextjs)
đấy là ứng dụng đơn giản bạn ạ. bạn chỉ cần dùng nestjs 1 lần thôi là bạn sẽ never dùng nextjs làm backend. và nếu ứng dụng của bạn cần scale thì lại cần scale cả FE + BE 1 lúc đấy@@ngockmai1518
mình lấy ví dụ 1 case đơn giản như này nhé: nếu backend của bạn cần kết nối tới 2 database cùng lúc, dùng thêm cache (lưu redis chẳng hạn), thì bạn sẽ thấy nó rối dần lên, và khó maintain code và khi dự án của bạn càng phình to, thì vô hình chung, khi build nextjs, frontend sẽ cần gánh luôn phần bundle của backend á nếu 1 ứng dụng thực tế "đủ lớn", thì người ta sẽ làm ngược lại điều bạn đang làm. ví dụ ở việt nam là tiki đấy. bạn thử hình dung cách bạn đang làm có thể xây dựng được tiki ko.kk
Có 1 vấn đề về phần cache, khi bỏ tích phần disable cache trong tab Network của trình duyệt, thì khi thêm xóa sửa thì nó cập nhật lại data oke nhưng khi f5 khi refresh lại web thì nó vẫn là data cũ, chỉ khi Ctr + f5 khi refresh để xóa cache cũ thì nó mới hoạt động, mong a giải đáp giúp e với ạ ❤
bạn hiểu đơn giản là nó cache tại nhiều nơi: browser và server. để clear nó đi bạn có thể dùng revalidateTag/Path trong video mình có nói về tài liệu đấy. còn bạn muốn xem thực hành như nào thì có thể tham khảo khoá nextjs của mình: hoidanit.com.vn/khoa-hoc/react-pro-max-voi-nextjs-lam-chu-toan-dien-reactjs-hien-dai-65198100e6bafa8caad417a6.html
Mình muốn bổ sung là có những case bắt buộc vẫn phải dùng react-query,…. (Dĩ nhiên vẫn có thể tự làm nếu thích 😂) Ví dụ như polling, infinite scroll,… những thứ này nextjs không làm được
đôi khi cần sửa file host nữa đấy bạn. cơ mà, mình ko làm, vì khi hướng dẫn sẽ có bạn làm theo và failed. lại inbox hỏi.kk cái gì khó quá thì bỏ qua :v
thực chất là mình đã làm rồi (version paid): hoidanit.com.vn/khoa-hoc/react-pro-max-voi-nextjs-lam-chu-toan-dien-reactjs-hien-dai-65198100e6bafa8caad417a6.html còn youtube thì bạn cần chờ :v
👉File tài liệu của khóa học: docs.google.com/document/d/1NtR6xyAaspc1QV5b0kMGHd-kXtLlpKBUExHf3VMSQMA/edit?usp=sharing
🌹Bạn nào muốn donate hay mua cho mình cốc cà phê, cái pizza hay chỉ là gói mì tôm hảo hảo, dùng link này nhé: hoidanit.github.io/official/donate
👉Khóa học Next.js 13 & 14 Pro: hoidanit.com.vn/khoa-hoc/react-pro-max-voi-nextjs-lam-chu-toan-dien-reactjs-hien-dai-65198100e6bafa8caad417a6.html
👉Xem Full Playlist này tại đây: th-cam.com/play/PLncHg6Kn2JT5CAeetB0Kt6bWgiPSWIq8G.html
Đỉnh thật. Video này là video duy nhất trong các video về Next.JS 13 hoặc 14 đi vào thẳng vấn đề mà không lòng vòng.
cảm ơn bạn đã ủng hộ :v
p/s: quà black friday của a/e youtube.kk
có một tips nhỏ khi lồng các folder (components, style) vào route (users, blog) là các bạn có thể dùng tiền tố _ (_components, _style, _helper) để cho next nhận biết là thư mục đó private, khi đó thì khi ta truy cập vào /users/components sẽ không bị dính lỗi page.tsx chưa được export default. Phần này đã được nêu rõ trên phần /docs/getting-started/project-structure#route-groups-and-private-folders của Next. Mình hiện tại cũng đang áp dụng phương pháp này để việc quản lý thư mục trở nên dễ dàng hơn với một framework đặt thư mục thành routing phức tạp như next.
cảm ơn bạn đã góp ý :v
Cám ơn anh, nhờ video của anh mà giờ tự tin migrate mấy project từ next 12 qua 14 rồi.
14 chạy phà phà mà bạn ơi. vì nó chỉ là fix bugs cho 13 thôi mà :v
nhờ bạn làm về nextjs và tailwin nhé. Bonus thêm web3 thì cảm ơn lắm ạ
tailwind code thuần css nhiều quá. và cá nhân mình ko muốn code css. nên tailwind hơi lâu đấy bạn :v
:.clip hay quá bạn
cảm ơn bạn đã ủng hộ :v
1:00:00 em thấy nếu xài component Suspend thì có props key có thể giải quyết vấn đề này á
trong video mình có đề cập issue trên github
cái key nó chỉ là workaroud thôi bạn. như mình hiểu khi thay đổi key, component sẽ re-render nên mình ko muốn dùng :v
cam on anh
cảm ơn bạn đã ủng hộ :v
cho em hỏi về state manager trong next.js này với, mình có nên kết hợp với Mobx không nhỉ
với nextjs 13 trở đi. nó cache rất tốt. gần như là ko nên dùng với các thư viện state ở client (quan điểm cá nhân mình)
còn bạn cug nên tìm hiểu xem nó ntn nhé
giả sử mình xóa data trực tiếp trong db thì cache vân giữ nguyên là data đã bị xóa trong db thì làm ntn ạ
nextjs nó gọi là re-validate cache đấy bạn. bạn đang nêu thiếu 1 case, là bạn thêm mới/update data trong database :v (ko chỉ mỗi có xóa.ahihi)
run docker mình có thể redirect port từ docker ra local port thông qua lệnh docker run ... -p 3000:8000, mình trước làm 1 dự án với ruby on rails dùng docker cho phần database postgresql dùng thấy ok.
đây là mapping 1 port mà bạn. và case của mình là 2 server khác nhau mà. chứ liên quan gì tới database đâu
@@hoidanit à đúng rồi. Mình hiểu nhầm ý này. Case của bạn khác.
antd dùng cho React native được không ad?
như.mình biết là có đấy bạn. antd nó có riêng cho mobile. bạn search xem
Cho em hỏi về vấn đề style ạ. Khi mình dùng Ant design mà các component họ cung cấp k đáp ứng đủ thì mình có thể kết hợp tailwindcss hay css thuần được ko ạ
đc bạn nhé
video nó ko hiện timeline như description anh note nhỉ?
đã fixed.kk
Next 13 em thấy nó chỉ còn client và server component, hình như SSR với ISR được gom luôn vào server component lun rùi
mình có giải thích tại đây bạn nhé: th-cam.com/video/EnzPVKoz4nc/w-d-xo.html
Vậy việc custom theme của Antd làm như nào vậy a?
đọc docs của nó rồi làm thôi bạn. như mình nhớ nó có cái configProvider bọc ngoài hay sao ấy
E đang code 1 dự án với Nextjs14, e gặp 1 vấn đề là khi dùng SSR của Nextjs thì khi ấn vào để chuyển trang thì nó phản hồi rất chậm ( Web đã build lên server ). Hiện e k biết là do load API hay do Server. Mong a giải đáp thắc mắc ạ
nó phản hồi chậm vì bạn đang chọn SSR. như vậy mỗi lần nhấn Link (khi chưa lưa cache navigate) thì nó cần fetch data để render ra page. tách bớt data ra đi bạn, cái nào mà dùng SSG được thì build trước đi. còn xác định là SSR thì luôn chậm.
muốn nhanh đc SSR thì: cache data để ko cần fetch (hoặc fetch ít nhất có thể). hoặc đầu tư server khủng thì nó load nhanh thôi :v
mình đã trả lời còn gì bạn. cơ chế SSR là vậy. bạn muốn nhanh thì cache data khi gọi api, ko thì dùng SSG
@@hoidanit dùng SSG sao a? Ví dụ trong hàm generateStaticPath ở trang detail thì gọi API getList rồi map từng item ra build file html đúng k a? Vấn đề là API đó lấy tất cả item trong list thì nếu API getlist có giới hạn data trả về để phân trang thì sao ạ? như thế thì nextjs đâu có build html cho tất cả item được
@@MwieReview ví dụ bạn có rất nhiều sản phẩm, thì chỉ build sản phẩm nổi bật thôi.
cho build tất cả thì tốn time chờ nextjs build thôi.
còn muốn build như thế nào, bạn control backend đều sẽ làm đc
@@hoidanit e vẫn chưa clear đc a ơi 😂 , trường hợp nếu e làm SSG cho trang detail mà chỉ build sản phẩm nổi bật, thì khi user bấm vào 1 sản phẩm k thuộc các sp trên thì sẽ vẫn bị chậm hả a?
Dạ a ơi cho e hỏi là nextjs mình có thể code fe và be luôn không hay chỉ nên dùng code fe thôi còn be mình dùng express của nodejs ha a
bạn có thể code được backend với nextjs, cơ mà nó chỉ phù hợp với dự án nhỏ thôi. đi làm, đa phần bạn sẽ tách riêng ra đấy
bạn cho hỏi mình muốn học lập trình web mà chưa biết j thì bây giờ nên bắt đầu từ đâu? mình chủ yếu học làm web thôi
mình có video hd rồi đấy bạn. bạn tìm theo playlist là thâyd
@@hoidanit mình thấy nhiều quá nên không biết bài nào trước
th-cam.com/video/-cg9dq-Jq2M/w-d-xo.html cho hỏi phải cái seri này không ah
@@hoidanit
ai kêu bạn đi code đâu bạn =))
th-cam.com/video/JoXcxgs99bg/w-d-xo.html@@motsoichi
Thật sự cảm ơn Anh vì Video quá chất lượng
thực tế mấy cái bạn hỏi, mình đã làm hết trong này rồi: hoidanit.com.vn/khoa-hoc/react-pro-max-voi-nextjs-lam-chu-toan-dien-reactjs-hien-dai-65198100e6bafa8caad417a6.html
nếu dùng session với nextjs thì chọn next auth
còn server action cho phép bạn gọi function trên server => bạn có 2 cách để truyền access token: 1 là truyền luôn từ client lên, hoặc 2, lấy từ session ra
@@hoidanit E cảm ơn Anh ạ
Em chào anh, anh cho em hỏi em dùng App router thì có dùng được với getStaticPaths và getStaticProps không ạ. Em dùng thì nó báo lỗi mà e thấy anh vẫn dùng được ạ
mình dùng qua hàm mới của nó. bạn đọc tài liệu của nextjs ấy, nó có ví dụ mà. còn video mình đâu có dùng 2 hàm bạn hỏi đâu
@@hoidanit em cảm ơn a ạ
cái issue bị vỡ layout đã fix được chưa vậy anh
bạn có thể test và check issue trên github (như trong video ấy)
chào anh cho hỏi là mình có thể thêm param vào trong file layout.tsx được không, mục đich em muốn là có thể turn on/off Header, ví dụ page A cần Header, page B thì không cần Header
ai đi thêm params layout vào đâu bạn. cái case của bạn nó giống như là: homepage cần header và login ko cần header. bạn có thể tìm hiểu group routes.
còn mình đã làm case của bạn trong khóa học này rồi:
hoidanit.com.vn/khoa-hoc/react-pro-max-voi-nextjs-lam-chu-toan-dien-reactjs-hien-dai-65198100e6bafa8caad417a6.html
@@hoidanit cam ơn a
cái loading đầu tiên thằng ant chưa init, này bên vue,react gì cũng bị
mình nghĩ ko phải đâu. vì nếu bạn code thuần tailwind với nextjs nó chạy bt đấy.
và như cá nhân mình, dùng win 10 và win 11 nó cho ra kết quả khác nhau =))
Lúc f5 là client nó chờ server render toàn bộ trang bao gồm cả cái loading. Lúc nhấn ở nav thì nó đã đc tải nên mới có loading, chứ mình nghĩ ko phải do win. Hoặc nếu có thì do browser phiên bản chưa hỗ trợ 😅
ko phải như bạn nói đâu. với cơ chế streaming của nextjs, khi f5 vẫn có cái loading đấy (mình đã test rồi, hoặc bạn có thể code thuần tailwind (ko sử dụng antd) là thấy :v@@NamNguyen-lb8qy
Chào a Khóa Học Next.JS 13 Siêu Cơ Bản Dành Cho Beginners trên kênh này là full toàn bộ hay chỉ 1 phần vậy anh.
bạn quan tâm (muốn tiết kiệm thời gian), bạn có thể tham khảo khóa này của mình (cover cả v13 và v14): hoidanit.com.vn/khoa-hoc/react-pro-max-voi-nextjs-lam-chu-toan-dien-reactjs-hien-dai-65198100e6bafa8caad417a6.html
cài thêm gì để khi save file, thì tự động load luôn bạn nhỉ
là sao bạn. miêu tả như bạn mình chưa hiểu ý bạn
fast refresh thì nextjs nó tự hỗ trợ mà bạn. có thể do máy yếu nên nó ko tự động cho bạn đó
Cho em hỏi, nếu fetching data ở server component mà api cần token để authen thì làm như thế nào ạ. Em cảm ơn
có 2 cách cho bạn:
1 là lưu token vào .env
2 là lưu trong session
khóa học này mình đã làm đều bạn hỏi rồi đấy : hoidanit.com.vn/khoa-hoc/react-pro-max-voi-nextjs-lam-chu-toan-dien-reactjs-hien-dai-65198100e6bafa8caad417a6.html
Mà mình thắc mắc sao phải có 1 con server fake backend crud trong khi con ở next js có thể làm nhanh crud API với json file?
server fake mình có sẵn rồi bạn. và như mình chia sẻ đấy, mình ko dùng nextjs làm backend. nên tiện thể thì mình demo luôn (thay vì viết logic backend trên nextjs)
code BE trong nextjs nó ngu lắm cậu ạ. không ai làm thế
@@HuySE ngu là như thế nào nhỉ? Mình vẫn code BE bình thường với nextjs mà?
đấy là ứng dụng đơn giản bạn ạ. bạn chỉ cần dùng nestjs 1 lần thôi là bạn sẽ never dùng nextjs làm backend.
và nếu ứng dụng của bạn cần scale thì lại cần scale cả FE + BE 1 lúc đấy@@ngockmai1518
mình lấy ví dụ 1 case đơn giản như này nhé: nếu backend của bạn cần kết nối tới 2 database cùng lúc, dùng thêm cache (lưu redis chẳng hạn), thì bạn sẽ thấy nó rối dần lên, và khó maintain code
và khi dự án của bạn càng phình to, thì vô hình chung, khi build nextjs, frontend sẽ cần gánh luôn phần bundle của backend á
nếu 1 ứng dụng thực tế "đủ lớn", thì người ta sẽ làm ngược lại điều bạn đang làm. ví dụ ở việt nam là tiki đấy. bạn thử hình dung cách bạn đang làm có thể xây dựng được tiki ko.kk
Có 1 vấn đề về phần cache, khi bỏ tích phần disable cache trong tab Network của trình duyệt, thì khi thêm xóa sửa thì nó cập nhật lại data oke nhưng khi f5 khi refresh lại web thì nó vẫn là data cũ, chỉ khi Ctr + f5 khi refresh để xóa cache cũ thì nó mới hoạt động, mong a giải đáp giúp e với ạ ❤
bạn hiểu đơn giản là nó cache tại nhiều nơi: browser và server.
để clear nó đi bạn có thể dùng revalidateTag/Path
trong video mình có nói về tài liệu đấy.
còn bạn muốn xem thực hành như nào thì có thể tham khảo khoá nextjs của mình: hoidanit.com.vn/khoa-hoc/react-pro-max-voi-nextjs-lam-chu-toan-dien-reactjs-hien-dai-65198100e6bafa8caad417a6.html
Mình muốn bổ sung là có những case bắt buộc vẫn phải dùng react-query,…. (Dĩ nhiên vẫn có thể tự làm nếu thích 😂)
Ví dụ như polling, infinite scroll,… những thứ này nextjs không làm được
cảm ơn bạn đã góp ý :v
ủa mình tưởng nextjs file đặt trong folder là "pages" chứ nhỉ sao lại là "users" ?
nextjs 13 là app router, dùng pages là 12 trở xuống bạn nhé
Khóa học của bán trên kia thì nó NextJS version bao nhiêu vậy ạ
13 và 14 bạn nhé. cuối khoá mình có hd upgrade version mới nhất
@@hoidanit hình như mới hết sale, nào sale tiếp e mua nha
bạn quan tâm thì inbox fb. vì mình luôn trợ giá học viên mới bạn nhé
Nếu dùng dynamic route thì khi run yarn build sẽ k export được page. Có cách nào để build được không a
vẫn export ầm ầm mà bạn. nó báo lỗi gì à
Ng ta làm production luôn rồi còn bảo k build đc, do bạn thôi
nếu backend là localhost anh chỉ cần lấy IP của máy ra dán vào là được. (Lưu ý là IP của máy)
đôi khi cần sửa file host nữa đấy bạn. cơ mà, mình ko làm, vì khi hướng dẫn sẽ có bạn làm theo và failed. lại inbox hỏi.kk
cái gì khó quá thì bỏ qua :v
có dùng cùng antd với tailwind mà k bị flick k a?
cái flick ko liên quan tới tailwind đâu bạn. và nextjs đã support tailwind rồi.
cái cần fix là antd và nextjs á :v
@@hoidanit e có cài cssinjs và bọc thằng children trong layout rồi mà nó vẫn bị flick
mong anh lmaf video về nextauth ạ
:v
thực chất là mình đã làm rồi (version paid): hoidanit.com.vn/khoa-hoc/react-pro-max-voi-nextjs-lam-chu-toan-dien-reactjs-hien-dai-65198100e6bafa8caad417a6.html
còn youtube thì bạn cần chờ :v
khá chi là nhanh
đây là series đề cập tính năng hot của nextjs, ko phải là học nextjs từ số 0 đâu bạn
52:42