Next js Best pattern to making API calls - Service Layer Pattern - Next 14
HTML-код
- Опубликовано: 21 сен 2024
- Hey! In this video I talk about how do i make api calls in my next js app.
I follow service layer pattern approach for a while and I'm in love with it. If you have any feedbacks regarding the flow please let me know. I'd like to improve this flow to make it even better!
I really believe this approach will improve your project structure and will make your project more maintainable :D
See you in the next videos
Bye!
Ugur
github repo: github.com/ugu...
I used to do like this when using flutter with php backend.
For me very easy to understand the data flow
I was just thinking about making a class to manage services, and your video came up which made this a great idea.😁
Hocam adına bakmasam türk olduğunu anlayamayacaktım, anlatımın çok açık. Kullandığın yönteme benzer bir class servis yapısını bende kullanıyordum ama sonrasında trpc (t3 stack) kullanmayı denedim ve çok daha iyi verim aldığımı düşünüyorum kesinlikle denemeni tavsiye ederim.
Selam çok teşekkür ederim yorumun için. T3 stack denemiştim bi ara fakat büyük bir uygulamada kullanma fırsatım olmadı hiç. Nest js için adapter baktığımda ise yoktu. Official olarak desteklemeyi de düşünmüyorlarmış. Kaldı yani öyle :) Sen back-end de ne kullanıyorsun?
I like the way you implement!
you'll need it one day :)
@@ugurcodes you’re right:)
Nice pattern, but why not just access your db directly in the server components to get users?
We can definitely can do it but I don't think next js is suitable for large saas apps. That's why I use an external backend server generally which is why I query my db inside my backend.
@@ugurcodes Why dont you think Nextjs is suitable to large SAAS apps?
@@ugurcodes I don't see an issue fetching user basic data from the built in API server. For more long lasting processes, sure, I can see why you would want a separate server-but otherwise, I think fetching data that already exists is fine.
What if we use server actions?
00:53 , didn't know tanstack/query also provides optimistic updates
it's very powerful and easy to implement. I love it, you should definitely check that out. They have great docs
i love the way you implement it!, but i have a question, do you have any specific reason not using server actions?
@@arsyaputra5606 thanks! I find next js not enough for big saas applications. That’s why I mostly build a separate back end server using nest js. So I don’t to any db interaction in my next js app.
But I can still do serverside fetching, all i need to do is call service function inside a server component
@@ugurcodes what language do you usually buiild you backend with for big saas applications?
@@neb2777 I use Nest js, quite easy to learn. I didn't want to switch into c#, java, python or any other language just for building back-end. I wonder how good is GoLan though
why you need both React Query and axios?
@@Ss-zg3yj I find them useful. Axios feels more natural to me. I also use baseUrl, interceptors, default headers and lot.
I love react query, it’s dx is top notch. It makes caching, optimistic updates easy.
But both packages are not necessary for service layer pattern, it’s just the way I like
Interesting approach - I like it. I have typically just created individual files for each query/mutation - so getUsers.ts, addUser.ts, etc. Is the main benefit of creating a class w/ methods just organization and readability?
@@gavinland8486 exactly I was doing the same thing but I found myself a place that I have dozens of files, it was hard to manage
Why use status instead of loading?
🤩
hello could I name some APIs for you and explain to me what I could do if I use them in custom gpt