Next.js Fetch Data the Right Way (with a Data Access Layer!) (Security, Auth, DTO)

[@nasko235679]

It's funny that the more things change, the more they stay the same. This is pretty much the MVC structure only in modern form.

[@Duskdown]

Reliable and trusted patterns in engineering work, no matter your stack. The easier the technology can be misused, the more often they eventually realize their design mistakes as well. I'd advise anyone to build a data access layer and enforce with static analysis that the DB can only be queried from there.

[@TheKaosTux]

Not a modern form… just an new „name“ for a service or controller..

[@cloudsss83]

@@TheKaosTux modern form

[@AlexanderBelov-y8o]

MVC never left.

[@69k_gold]

Can you explain how this is MVC? In MVC architecture the controller, model and view are independent entities, view layer isn't supposed to even have the option to access the database, the data transfer only happens from view to controller and controller to model. But right now, he's just accessing the data from the db into his view layer directly, and just implementing a "recommendation" where he needs to tell every collaborator on the team to use the functions in the file instead of using the db directly. And the functions aren't even their own entity, they run within the view, which already breaks the MVC principle. I'm already disappointed by the stupid content I wasted my time on...

[@simonmaluleka]

Layered Architecture right here. Uncle Bob’s clean architecture also addresses this very problem with solid principles and the separation of concerns 👌

[@devinlauderdale9635]

Clean architecture is very good, view layer being separate from domain layer and separate from infrastructure layer is a must

[@rawarg]

This is good approach for data security but for architecture you should also take consideration of DRY principle. You can create a custom hook for auth check or create an index for all your CRUD functions but there will be a helper for auth check that applies for all functions automatically. This will keep your code cleaner and maintainable in bigger size projects.

[@universebot2363]

I would recommend throwing error if unauthenticated rather than handling the redirection in the DAL. The DAL does not really know where you are and where it makes sense to push the user to.

[@ByteGrad]

Good point

[@ADHDOCD]

Hands down the best Next/React KZbinr! Unlike others, Wes goes over all the relevant details and takes no shortcuts in his pedagogical approach! In that you describe the problem in detail before using the solution makes it easy for a beginner like me to follow! God bless!

[@ByteGrad]

Thanks

[@AlexanderBelov-y8o]

You are a true professional. Can you cover API route best practices? It has not yet been covered on your channel.

[@ByteGrad]

Thanks and good idea

[@sagecoder8802]

Please do a nextjs caching deep dive.

[@shahrozahmed9746]

Request to make a videos on 1. Fetch on render and Render on fetch. With examples 2. Pagination on SSR pages with loading UI on page change

[@tonyg_nerd]

Thinking about introducing the BAL? Business rules don't belong in the UI any more than data access, but noobs put all kinds of calcs and rules in their components. A Business Access Layer isolates rules so that they are consistent no matter the UI or API. Make a change in one place and the entire application uses it. This is the way we wrote backend systems in the first place and now that we're coming full circle again with server components it's appropriate to pull business logic out of the client interfaces and closer to the DAL.

[@chriseagle1889]

We build our Next/Node apps with both a "Data Layer" and a "Service Layer", the data layer contains the raw clients required for interaction with DBs, and the Service layer scales horizontally with modules linked to domain specific business requirements. The chief aim is to provide only a single API for retrieving specific data.

[@Devlicious-m3r]

Your tutorials are amazing I watched Prisma with next js and now this ❤

[@zenious]

Awesome video ! Simple and crisp explanation 🔥

[@shumaslaghari7503]

Your tutorials are very useful. If possible, can we have a tutorial for express + next js with custom auth (access and refresh token)

[@ByteGrad]

Thanks! Good idea

[@sulavbaral9972]

Yeah more like a real world application where the backend is separate

[@finetopethiopia4095]

I'm currently working on a Next.js + express project with custom auth and for some reason the http-only cookie will not be send the backend and I couldn't access the protected routes. If anyone knows a resource written on this topic, would be immensely helpful.

[@ChikiCodes]

why not use hono or the inbuilt nextjs apui routes

[@tomich20]

nice, i was doing much of that stuff allready, but without knowing their correct names, i like that DTO and DAL are real and common concepts 😅

[@davidbates3353]

How would you handle the split between server-side queries and client-side queries? Separate file for each (article.ts and articleSSR.ts)?

[@itsfarookmayne]

This channel needs an extra million subscribers

[@GonçalojoséMoura]

This might be a stretch but i love the way you explain things! Could you make a video on solid + clean architecture on a nextjs app?

[@kyngcytro]

One of the many reasons why I love Vue/Nuxt is that there's a soft rule to not fetch data inside a component rather pass them as props. I know doing that opens the codebase to prop drilling but still feels better than having components making their own API calls.

[@TripHawkPilot]

If you need data more than two layers from the call just use zustand and use state

[@manojpudasaini1565]

Thank you for the explanation. Can you please explain some ways to protect the POST requests as well using react query with nextjs 14. ? It would be of a great help. 🙇

[@chriseagle1889]

This could be improved further by providing a withAuth() function that wraps those DB calls and throws if auth fails, that throw can then trigger the redirect(), this aids in providing only a single function to handle this aspect, and cuts down on the duplication.

[@ozgursar5386]

Thanks for the helpful video 💯

[@aymenbachiri-yh2hd]

Thank you

[@podobayka]

Thanks! That was very helpful

[@thebocksters2756]

very useful video, I love your videos!

[@victorbiasibetti]

why you create data-layer and implement a rule of access inside that? coupling prismaORM to your access data, what you think is a good deal? good pattern to create a DTO!

[@dinhkhanh]

Just in time I need it.

[@ahmedbadran.]

Is a DAL the walkaround for issues of this type?

[@nogafouz2174]

thanks alot ,i want to know if i can use this concept in React?

[@mmmhbarcelona4560]

Another helpful tutorial by you ❤

[@modiddymo]

At this point wouldn’t it make sense for Next to embrace the fact that it’s fully full stack and provide some built-in structure for this?

[@mywaycoding6413]

Love from Pakistan ❤ good work sir

[@aqbgaming7656]

❤❤❤ Love from IOK bro.

[@estebanmurcia8451]

genuine question here, what's your personal preference for authentication / authorization? i recently decided to start a new project with keycloak and only do the role verification for routes on nextjs but i'm not completely sure about it, i should add that my backend is on a different service and not part of nextjs

[@ohskynyrdlynyrd]

Or you could add a subroute like /private (could be any name) and protect the whole route in the middleware

[@wealthassistant]

Sounds like tRPC would be nice here. Its most recent version supports server actions.

[@mihailobush946]

So are data access layer functions actions?

[@2gbeh]

So, basically Controllers and Guards..

[@jawyor-k3t]

javascript community really loves to reinvent the wheel and market it as some kind of revolution/invention/innovation. Just circling around web standards and tons of marketing

[@praja.gautam]

Excellent explanation❤

[@liu-river]

I'd just stick with TRPC since I can easy control access by defining procedures.

[@aberbaCodes]

Isn't rest APIs designed to solve this DAL issue with a middleware at the route level? This looks like a new solution to and already solved problem coming with it's own problems.

[@user-xs4th5rm6w]

the best solution i think for this case is t3 stack with next-auth and trpc

[@zmr-vn5hx]

What vs code theme are you using ?

[@mrpx77]

Have you tried next-safe-action?

[@IkraamDev]

Supabase has Row Level Security.

[@atharvmishra884]

After a point of time, as you keep adding more and more functionalities to your data-access layer, it just becomes another prisma. That's when you realize prisma itself is a data-access layer :) Inception much?

[@therealsharat]

How is this different from the /api routes?

[@investneur8232]

Can we video on how to generate reusable custom ui library using nextjs n mui ? Nextjs must bcoz want to take advantage of ssr ,,,, but use client directive making it hard as we end up writing csr n ssr ui components

[@insensibility]

I love you, man. You're amazing!

[@hehe3323]

great video!

[@moritz759]

Hey man, I don’t really know a lot about Next, so I have a question: Why not handle the authentication in the backend and only use a session cookie or jwt in the frontend? Also, what are some good sources to learn Next js as someone who is already familiar with react?

[@htk0002]

This abstraction actually opens up a lot more questions than answers. Example: How to correctly identify types if you're using DTO's cuz u cannot take it from prisma now. How to do custom where, or other sql filters since the ORM is not directly accessible.

[@htk0002]

I would say that this abstraction is good to have but would most likely affect your time to market a lot. So if you are just doing a side project just use the direct ORM access if you have to. You can always get a team and even rewrite the whole app if your product really gets traction.

[@jagdish1o1]

I wasn't aware that it's called data access layer - kinda fancy term. I already do this for each schema and write my CRUD in that file only with kinde auth check. btw, do you know when kinde is gonna launch their payment solution?

[@ByteGrad]

Should be soon

[@Monstermash355]

So now instead of repeating the auth check in your components you are repeating it in functions? I feel that check should be done just once in the middleware

[@VincentFulco]

Caching in production has become incredibly annoying from version 14 onwards

[@ssygon2]

Is there a difference using 'server-only' vs 'use server' ? 18:00

[@remiguillard3773]

Hi, "use server"' is used in a react component for specify this is a component we will render on server, but where the server-only run is when your not in a react component but only in a ts/js file, so it's protected your method to be used in a client component, or used from the client

[@eduardogomero2709]

@@remiguillard3773thats incorrect, use serve is a directive that tells next all exported asynchronous functions on that files to be trested as server actions. Each Server action functions basically can be threated as an api endpoint. If you calm a server action in tour code you will be making a post request to that endpoint. If you want a componenet to be rendered on the server you should only not put the use client directive and make sure the componenet is not imported by another componenet with use client.

[@MerthanMerter]

OR, you can just use next-safe-actions and its middleware method

[@richienguyen2703]

So now NextJS is just Express + React on steroid?

[@naranyala_dev]

tanstack, tanstack, tanstack

[@TripHawkPilot]

Why not put auth in layouts? I have an (auth) (public) and (main) folders in each project. Layout for main protects everything in main. (main)/api and (main)/actions for data fetching is also protected by auth in the root layout of the (main) folder.

[@PanosPitsi]

It’s a bad idea vercel says not to do that in their docs. Also in the same note don’t forget to secure server actions even you you protected their page.

[@aaronseaton7320]

Repository pattern.

[@anantjoshi2269]

Good work byte GRAD ❤

[@dae2530]

how to set http status after data fetch in next? const { data } = await fetch(...) if (condition) { // set http status } if the status can't be set then i think next is pretty useless framework

[@lohitnimbagal4653]

Is it safe to use isAuthenticated inside cache or any protection inside cache 19:03 ?

[@ByteGrad]

Good question actually

[@aqbgaming7656]

Is there any way of deploying a next js app to some server with proper middleware for auth, other than vercel?

[@Innesb]

Middleware is not a feature unique to Vercel hosting; you can host Next JS on your own server / VPS and middleware will work for auth.

[@justin9494]

solid ka idol

[@cant_sleeeep]

OR WE CAN JUST RETURN A MINIMAL RESPONSE WITH THE THINGS ONLY WE NEED FROM THE BACKEND

[@madatbay]

What about fetching data in client component?

[@jagdish1o1]

We can use the server action functions inside client components too. Instead of API call simply get the data from sever action functions.

[@madatbay]

Yes that’s possible but in next.js docs and many more articles its been said that use actions only for mutations, not for data fetching. Few reasons for these, first server actions use POST method for getting a data which doesn’t make sense. And also server actions executed sequentially

[@SachinKumar-qv8fj]

this is just reusability in the name of DAL

[@oksdoksaodkad]

Too much.

[@anuragkush831]

Smells like php