Với Next.js thì không nên dùng Axios nếu mọi người muốn tận dụng hết sức mạnh của Next.js. Thay vào đó hãy dùng fetch, Vì những lý do sau đây 1. fetch được next.js thêm những tính năng đặc biệt như caching và một số options khác. Điều này không có ở các lib gọi api như axios 2. fetch chạy ở client và server đều tương đồng về mặt API, nhưng Axios thì khác, ở client axios dùng XHRRequest, còn server thì http 3. Axios làm gia tăng bundle size P/s: Tất nhiên nếu mọi người không quan tâm các yếu tố trên thì dùng axios vẫn được :D 🎥 Mình đã có khóa Next.js Super trả phí: duthanhduoc.com/courses/nextjs-super 📕 Đây là link github khóa học Next.js Free, các bạn không cần phải submit email nữa: github.com/duthanhduoc/nextjs-free
anh oi em cung lam giong nhu anh nhung ma sau khi em dang nhap va f5 lai trang thi lai khong the goi duoc api: acount/me loi tra ve la khong nhan sessionToken, anh co the ho tro em voi duoc khong anh
Cảm ơn anh rất nhiều vì đã chia sẻ những kiến thức bổ ít. Và anh ơi cho em hỏi thêm là thay vì dùng fetch thì em có thể dùng axios để thay thế được không? Em đang băn khoăn trường hợp khi fetching data trên server thì fetch cho phép mình caching & revalidating, nếu dùng axios thì có nên hay không
anh ơi cho em hỏi một ý là việc anh tạo ra một class là SessionToken thì em thắc mắc là việc tạo ra class với các thuộc tính với phương thức nó có giống với việc tạo ra một store để lưu trữ và được các component truy xuất tới không anh, Em cảm ơn
Về lý thuyết là gần giống. Nó đều là object đc lưu trên ram của client. Như khác tí là store thì truy cập trong component thôi chứ cái object anh tạo thì truy cập mọi nơi
@@duocdev Anh cho em hỏi, trường hợp mình login vào rồi và gọi API /api/auth (để truyền token lên cho nextServer) thì lúc này routeHandler sẽ nhận được token này và trả về response-header cho next-client đúng không ạ. Và nếu như thế thì lần sau nếu API được call ở phía nextServer thì cookie này lấy đâu ra anh nhỉ, vì chỉ khi nào nextClient gửi request lên nextServer thì lúc này nextServer mới lấy được cookie này chứ nếu mà mình fetch API trực tiếp từ nextServer tới BE server thì em vẫn chưa hình dung ra là lấy cookie ở đâu ra ạ. mOng anh giải đáp dùm ẹm ạ.
Anh Được cho em hỏi là ở phút 28:00, hàm onSubmit em không sử dụng async await mà em dùng then catch promise và sử dụng router.push('/me') trong then thì nó không hoạt đông. Nguyên nhân do đâu thế ạ, mong anh giải thích
Cảm ơn a vì đã chia sẻ! E vẫn không hiểu lắm đoạn setToken tại sao lại ko đc set ở server side set value(token: string) { // Nếu gọi method này ở server thì sẽ bị lỗi if (typeof window === 'undefined') { throw new Error('Cannot set token on server side') } this.token = token } E có test bằng 2 tab ẩn danh và tab thường và bỏ if (typeof window === 'undefined') thì việc setToken ở server nó đâu có override SessionToken đâu a nhỉ. A có cách nào test được override thì chỉ e với ạ
em chỉ có 1 môi trường server nhưng có rất rất nhiều môi trường client (nhiều máy truy cập đến server). Vậy nên nếu em dùng chung 1 biến sessionToken ở server để lưu trữ sessionToken thì sẽ dẫn đến sessionToken người sau đè lên người trước và dẫn đến lỗi. Đây gọi là overwrite Việc em test không bị lỗi là do anh code anh tránh được trường hợp đó bằng cách anh truyền session token từ cookie vào mỗi lần request ở server component. Em muốn test được trường hợp lỗi thì em phải dùng cái sessionToken được set một cách tự động vào header Authorization như anh đang làm ở client thì mới thấy lỗi. p/s: Overwrite ở đây là nó xuất hiện trên server chứ không phải là server overwrite client
Không phải cứ thích thêm là thêm. Kiểm tra page có tồn tại hay chưa hoặc kiểm tra logic check bên middleware đoạn if (authPaths.some((path) => pathname.startsWith(path)) && sessionToken) { return NextResponse.redirect(new URL('/me', request.url)) } Thì cái path nó bị lọt vào dẫn đến loop vô hạn. Good luck
Người ta config quen tay dạng dự án lớn, có thể có nhiều config phức tạp m còn bạn làm petproject chơi thẳng trong component thì ai nói. Hãy mở tư duy ra xem nó có gì hay chứ
ko thích thì có thể next video được mà :D mỗi người 1 cách làm, đâu phải ai cũng thích kiểu này ai cũng thích kiểu kia riêng tôi hiện tại thấy kiểu như video ok, rút gọn code quá đẹp
em chưa hiểu ở khúc anh call api authApiRequest.auth sao mà nó chạy vào dc func POST ở file app/api/auth/route.ts, mong anh giải thich giúp em. tks anh
Với Next.js thì không nên dùng Axios nếu mọi người muốn tận dụng hết sức mạnh của Next.js. Thay vào đó hãy dùng fetch, Vì những lý do sau đây
1. fetch được next.js thêm những tính năng đặc biệt như caching và một số options khác. Điều này không có ở các lib gọi api như axios
2. fetch chạy ở client và server đều tương đồng về mặt API, nhưng Axios thì khác, ở client axios dùng XHRRequest, còn server thì http
3. Axios làm gia tăng bundle size
P/s: Tất nhiên nếu mọi người không quan tâm các yếu tố trên thì dùng axios vẫn được :D
🎥 Mình đã có khóa Next.js Super trả phí: duthanhduoc.com/courses/nextjs-super
📕 Đây là link github khóa học Next.js Free, các bạn không cần phải submit email nữa: github.com/duthanhduoc/nextjs-free
❤
Nhưng giờ thì khác rồi anh @duocdev th-cam.com/video/AKNH7mXciEM/w-d-xo.html
Cho em hỏi nếu dùng fetch rồi thì có cần dùng thêm tanstack query nữa không ạ.
anh oi em cung lam giong nhu anh nhung ma sau khi em dang nhap va f5 lai trang thi lai khong the goi duoc api: acount/me loi tra ve la khong nhan sessionToken, anh co the ho tro em voi duoc khong anh
Cảm ơn anh rất nhiều vì đã chia sẻ những kiến thức bổ ít. Và anh ơi cho em hỏi thêm là thay vì dùng fetch thì em có thể dùng axios để thay thế được không? Em đang băn khoăn trường hợp khi fetching data trên server thì fetch cho phép mình caching & revalidating, nếu dùng axios thì có nên hay không
Không nên dùng axios vì em sẽ mất đi các tính năng như caching của fetch bên nextjs nhé. Nếu em không cần mấy cái đó thì cứ dùng cũng đc
dùng axios sẽ ko tối ưu seo vì ko có cơ chế catching nên mỗi lần vào đều phải fetch lại api gây chậm lag
anh ơi cho em hỏi một ý là việc anh tạo ra một class là SessionToken thì em thắc mắc là việc tạo ra class với các thuộc tính với phương thức nó có giống với việc tạo ra một store để lưu trữ và được các component truy xuất tới không anh, Em cảm ơn
Về lý thuyết là gần giống. Nó đều là object đc lưu trên ram của client. Như khác tí là store thì truy cập trong component thôi chứ cái object anh tạo thì truy cập mọi nơi
trường hợp mình sử dụng HTTP Only thì phần headers phía client mình chỉ cần set thêm withCredentials là được rồi phải không ạ
chính xác luôn em nhé
Như vậy thì thằng client mình đâu cần phải set cookie cho nó đâu, tại mình sử dụng HTTP Only, đúng không a
@@duocdev
@@luongtran8166 vẫn cần phải set cookie cho domain của nextjs nhé. Để cho next server có cookie mà dùng
@@duocdev Anh cho em hỏi, trường hợp mình login vào rồi và gọi API /api/auth (để truyền token lên cho nextServer) thì lúc này routeHandler sẽ nhận được token này và trả về response-header cho next-client đúng không ạ. Và nếu như thế thì lần sau nếu API được call ở phía nextServer thì cookie này lấy đâu ra anh nhỉ, vì chỉ khi nào nextClient gửi request lên nextServer thì lúc này nextServer mới lấy được cookie này chứ nếu mà mình fetch API trực tiếp từ nextServer tới BE server thì em vẫn chưa hình dung ra là lấy cookie ở đâu ra ạ. mOng anh giải đáp dùm ẹm ạ.
@@ChinhTran-tq7qd +1
E thấy nếu dùng được axios thì vẫn linh hoạt hơn fetch
quen thì cứ dùng đi em, nhưng em sẽ bị miss tính năng của next.js
@@duocdev miss tính năng là như nào anh nhỉ anh có thể nói rõ hơn được không ạ ?
@@anhht2001 cache fetch api em nhé
tại sao không dùng nextauth thay vì cách này nhỉ, thấy rờm rà quá
Fetch api liên quan gì next auth bạn
Nếu phía Backend không cho phép CORS, phía Frontend cần setup proxy như nào a nhỉ.Cảm ơn a!
Em đã xem đên 5,6 lần rồi mà vẫn k hiểu hết được
Anh Được cho em hỏi là ở phút 28:00, hàm onSubmit em không sử dụng async await mà em dùng then catch promise và sử dụng router.push('/me') trong then thì nó không hoạt đông. Nguyên nhân do đâu thế ạ, mong anh giải thích
Chắc nó chạy vào then chưa 😂
46:12 / 1:08:21 nhìn cách anh code mà e thấy xấu hổ quá, e toàn code sao cho chạy là được, từ giờ e sẽ sửa lại để code clear giống anh hơn =((((
Cảm ơn a vì đã chia sẻ!
E vẫn không hiểu lắm đoạn setToken tại sao lại ko đc set ở server side
set value(token: string) {
// Nếu gọi method này ở server thì sẽ bị lỗi
if (typeof window === 'undefined') {
throw new Error('Cannot set token on server side')
}
this.token = token
}
E có test bằng 2 tab ẩn danh và tab thường và bỏ if (typeof window === 'undefined') thì việc setToken ở server nó đâu có override SessionToken đâu a nhỉ. A có cách nào test được override thì chỉ e với ạ
em chỉ có 1 môi trường server nhưng có rất rất nhiều môi trường client (nhiều máy truy cập đến server).
Vậy nên nếu em dùng chung 1 biến sessionToken ở server để lưu trữ sessionToken thì sẽ dẫn đến sessionToken người sau đè lên người trước và dẫn đến lỗi. Đây gọi là overwrite
Việc em test không bị lỗi là do anh code anh tránh được trường hợp đó bằng cách anh truyền session token từ cookie vào mỗi lần request ở server component.
Em muốn test được trường hợp lỗi thì em phải dùng cái sessionToken được set một cách tự động vào header Authorization như anh đang làm ở client thì mới thấy lỗi.
p/s: Overwrite ở đây là nó xuất hiện trên server chứ không phải là server overwrite client
Overide ở server á bạn, để giải quyết việc này ngta thường dùng redis,...Còn ở đây anh làm ở client
Trong khóa này có dùng Server Actions and Mutations không ạ
Khóa free này không hướng dẫn Server Actions and Mutations em nhé. Cái này sẽ có ở khóa có phí
Mình chưa hiểu cái đoạn call api AuthapiRequest.auth sao nó chạy vào đc api/auth/routerlink.ts mong bạn giải thích rõ hơn đoạn đấy không
Này gọi là Route Handler của Nextjs giúp bạn tạo ra các api y hệt dùng expressjs. Bạn cứ search từ khoá đó là rõ
cái authPath e muốn thêm trang home với router là "/" thì nó báo This page isn’t working a ạ
Không phải cứ thích thêm là thêm. Kiểm tra page có tồn tại hay chưa hoặc kiểm tra logic check bên middleware đoạn
if (authPaths.some((path) => pathname.startsWith(path)) && sessionToken) {
return NextResponse.redirect(new URL('/me', request.url))
}
Thì cái path nó bị lọt vào dẫn đến loop vô hạn.
Good luck
Bên trong hàm request mình có thể gọi cookie để lấy ra sessionToken đúng không anh nhỉ tránh trường hợp cứ phải truyền vào từ bên ngoài hơi mất công
Phải truyền từ ngoài vào em nhé. cookie không dùng được trong cái file http này mà chỉ dùng trong Server Component hoặc Route Handler thôi.
Anh có giải thích trong video đó bẹn
Lại 1 video đúng vấn đề e đang cần rất hay và có ích cảm ơn anh
hay qua anh oi
e thường dùng cả fetch lẫn axios + tanstack query lun không biết có nên không a, hay chuyển qua dùng fetch toàn bộ
Với next.js thì tốt hơn hết nên dùng fetch
request nó có mỗi url, method, headers, body thôi mà bạn hơi phức tạp hóa vấn đề
Người ta config quen tay dạng dự án lớn, có thể có nhiều config phức tạp m còn bạn làm petproject chơi thẳng trong component thì ai nói. Hãy mở tư duy ra xem nó có gì hay chứ
ko thích thì có thể next video được mà :D
mỗi người 1 cách làm, đâu phải ai cũng thích kiểu này ai cũng thích kiểu kia
riêng tôi hiện tại thấy kiểu như video ok, rút gọn code quá đẹp
em chưa hiểu ở khúc anh call api authApiRequest.auth sao mà nó chạy vào dc func POST ở file app/api/auth/route.ts, mong anh giải thich giúp em. tks anh
Cái thư mục /api được định nghĩa là Router Handler, nghĩa là chúng ta có thể tạo server API trong đó. em search "router handler Next.js" sẽ rõ hơn nhé