Great breakdown of the BFF (Backend for Frontend) architecture with Next.js! I've always found the separation of concerns between the front-end and back-end super clean in this setup. The ability to tailor APIs specifically for the needs of the UI, while still keeping the flexibility to integrate with multiple services, is a game changer. Love how Next.js makes this so intuitive with API routes and server-side rendering. 🔥
Im using server actions with react-query (useQuery & useMutation) by creating a custom hook for every endpoint - its working perfectly fine and well structured
Some of the advantages you’ll get 1- loading,error state out of the box 2- cached response if you call the custom hook (API) in different components And much more
I found using separate backend to nextjs frontned like FastAPi it's so annoying and there is many problems took me to much time to solve like Auth ( especially with server components), Can you make a video about this ? Especially dealing with auth with nextjs when you have separate backend
Definately one of the most important thing to learn. How to handle auth with separate backend. Best practices for fetching data from an different API with tanstack query
I’m working on a project in which the backend is a Django server. I’ve decided to use a simple token authentication. There is a separate API service (on the next server) to communicate with the backend (I don't know if service is the correct term to use! I'm new to the Next) When the token is received, it sends it as a http-only cookie to the client and vice versa. Also, I have a middleware that extracts the token and decides on the protected routes, etc. That's how I've done the auth. If I'm missing something, please let me know 🙏
@@Drippypale I like your implementation, i would also do the same.The problem is that most people cant build their own auth logic from scratch using nextjs, they depend on libraries. I would love to know what tricks and techniques youre using for your auth logic.
Great video! It would be awesome if you could create another video demonstrating how to handle authentication using Next.js with a separate backend, including topics like tokens and refresh tokens. Thanks in advance!
Seperate server is great but Auth (especially if you are using refresh token which is sent as httponly cookie) is a bit difficult to manage. What i have learnt is that all the requests sent to external / seperate servers should go through next js server side and not client side
@@ByteGrad Wow, I thought the course had everything 😅Are there many videos here on UA-cam that we might want to watch as bonus/extra to the course? Maybe you can create a playlist of these so that people can see specifically what to watch more.
Can you pleeaaseee make a video on using woocommerce as a headless cms with nextjs, because through that we can get best of both worlds, and also not a lot of people are known to this, and youtube have very less resources, also i'm currently making a project on it, and really struggling with less resources!
I chose Vite for my frontend and Fastify for my backend. It scales very easily and keeps my backend containers very small.
Great breakdown of the BFF (Backend for Frontend) architecture with Next.js! I've always found the separation of concerns between the front-end and back-end super clean in this setup. The ability to tailor APIs specifically for the needs of the UI, while still keeping the flexibility to integrate with multiple services, is a game changer. Love how Next.js makes this so intuitive with API routes and server-side rendering. 🔥
Im using server actions with react-query (useQuery & useMutation) by creating a custom hook for every endpoint - its working perfectly fine and well structured
Some of the advantages you’ll get
1- loading,error state out of the box
2- cached response if you call the custom hook (API) in different components
And much more
@@amershboul9107hiii,
Do you have any public code base using this structure to share by any chance?
@ ua-cam.com/video/i7Dgb4FhBxE/v-deo.htmlsi=ofM5MhgiiB-5WZPi
try using next-safe-action they are more like react-query
I found using separate backend to nextjs frontned like FastAPi it's so annoying and there is many problems took me to much time to solve like Auth ( especially with server components),
Can you make a video about this ? Especially dealing with auth with nextjs when you have separate backend
Definately one of the most important thing to learn. How to handle auth with separate backend. Best practices for fetching data from an different API with tanstack query
Great suggestion 👍
I’m working on a project in which the backend is a Django server. I’ve decided to use a simple token authentication. There is a separate API service (on the next server) to communicate with the backend (I don't know if service is the correct term to use! I'm new to the Next)
When the token is received, it sends it as a http-only cookie to the client and vice versa. Also, I have a middleware that extracts the token and decides on the protected routes, etc.
That's how I've done the auth. If I'm missing something, please let me know 🙏
@@Drippypale I like your implementation, i would also do the same.The problem is that most people cant build their own auth logic from scratch using nextjs, they depend on libraries. I would love to know what tricks and techniques youre using for your auth logic.
Great video! It would be awesome if you could create another video demonstrating how to handle authentication using Next.js with a separate backend, including topics like tokens and refresh tokens. Thanks in advance!
Seperate server is great but Auth (especially if you are using refresh token which is sent as httponly cookie) is a bit difficult to manage. What i have learnt is that all the requests sent to external / seperate servers should go through next js server side and not client side
exactely! it's a challenge but it's worth
For large complex apps I prefer going with my Next.js for front end and Laravel for my backend. Great DX and super robust
hi Wesley, do you have this BFF architecture lessons in your Nextjs course?
Hi, not right now, but may add it in the future
@@ByteGrad Wow, I thought the course had everything 😅Are there many videos here on UA-cam that we might want to watch as bonus/extra to the course? Maybe you can create a playlist of these so that people can see specifically what to watch more.
I concur. Great breakdown.
Thanks
is a DAL still recommended with an external API?
Can you pleeaaseee make a video on using woocommerce as a headless cms with nextjs, because through that we can get best of both worlds, and also not a lot of people are known to this, and youtube have very less resources, also i'm currently making a project on it, and really struggling with less resources!
Good idea too 👍
Very useful. Thanks
Thanks. Btw, will you add Tailwind section to your CSS course soon?
Hi, I’m working on this