Next.js BFF With Separate Backend Is My Favorite Architecture

Поділитися
Вставка
  • Опубліковано 11 гру 2024

КОМЕНТАРІ • 27

  • @CharcoalDaddyBBQ
    @CharcoalDaddyBBQ 3 дні тому +1

    I chose Vite for my frontend and Fastify for my backend. It scales very easily and keeps my backend containers very small.

  • @Chupaluku
    @Chupaluku 8 днів тому +3

    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. 🔥

  • @amershboul9107
    @amershboul9107 8 днів тому +4

    Im using server actions with react-query (useQuery & useMutation) by creating a custom hook for every endpoint - its working perfectly fine and well structured

    • @amershboul9107
      @amershboul9107 8 днів тому

      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

    • @Drippypale
      @Drippypale 8 днів тому +1

      @@amershboul9107hiii,
      Do you have any public code base using this structure to share by any chance?

    • @amershboul9107
      @amershboul9107 8 днів тому +1

      @ ua-cam.com/video/i7Dgb4FhBxE/v-deo.htmlsi=ofM5MhgiiB-5WZPi

    • @_phenomenal_4870
      @_phenomenal_4870 8 днів тому +1

      try using next-safe-action they are more like react-query

  • @seghirissam2662
    @seghirissam2662 8 днів тому +9

    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

    • @rgagankumar5191
      @rgagankumar5191 8 днів тому +6

      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

    • @ByteGrad
      @ByteGrad  8 днів тому +7

      Great suggestion 👍

    • @Drippypale
      @Drippypale 8 днів тому +2

      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 🙏

    • @Terminus265
      @Terminus265 8 днів тому +1

      @@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.

  • @abderrahmanturki6041
    @abderrahmanturki6041 8 днів тому +1

    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!

  • @shumaslaghari7503
    @shumaslaghari7503 8 днів тому +2

    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

    • @21-00
      @21-00 7 днів тому

      exactely! it's a challenge but it's worth

  • @theojpofficial7770
    @theojpofficial7770 8 днів тому +1

    For large complex apps I prefer going with my Next.js for front end and Laravel for my backend. Great DX and super robust

  • @azlanj
    @azlanj 8 днів тому +4

    hi Wesley, do you have this BFF architecture lessons in your Nextjs course?

    • @ByteGrad
      @ByteGrad  8 днів тому +4

      Hi, not right now, but may add it in the future

    • @minidragonlady
      @minidragonlady 7 днів тому

      @@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.

  • @ryuaan
    @ryuaan 8 днів тому +2

    I concur. Great breakdown.

  • @sushivacuum
    @sushivacuum 3 дні тому

    is a DAL still recommended with an external API?

  • @technologymad9253
    @technologymad9253 8 днів тому +2

    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!

    • @ByteGrad
      @ByteGrad  8 днів тому

      Good idea too 👍

  • @robertogiuliani7529
    @robertogiuliani7529 8 днів тому +1

    Very useful. Thanks

  • @EmiliaKaida
    @EmiliaKaida 8 днів тому

    Thanks. Btw, will you add Tailwind section to your CSS course soon?

    • @ByteGrad
      @ByteGrad  8 днів тому

      Hi, I’m working on this