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

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).

👉 Discord: all my courses have a private Discord

⏱️ Timestamps:
00:00 Data Access Layer = best practice
00:42 Why you need a Data Access Layer (DAL)
05:18 Add authentication quickly
10:55 Data Access Layer example
18:12 server-only package
18:27 ORM select
19:22 DTO (Data Transfer Object)

#webdevelopment #reactjs #nextjs

Note that my videos may contain mistakes. Always verify yourself that your code is safe and does what you want it to do for your specific situation. You agree by watching the videos that you are solely responsible for any mistakes in your code.

This channel and all its content is owned & operated by ByteGrad Sp. z o.o. with Tax ID: PL6762676561 .
.

[nasko]

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.

[universebot]

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.

[simonmaluleka]

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

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

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

[nishatislam]

you daa bessst! i was looking for dto in nextjs while noticed that, you were covering that part also 😂

[ADHDOCD]

Hands down the best Next/React YouTuber! 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!

[zenious]

Awesome video ! Simple and crisp explanation 🔥

[adel.dev.account]

Your tutorials are amazing

I watched Prisma with next js and now this ❤

[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?

[tomich]

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 😅

[AlexanderBelov-yo]

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

[davidbates]

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

[shahrozahmed]

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.

[paperC_CSGO]

Have you considered creating a nextjs start template video like CJ did for Syntax? Would be interesting to compare the differences, for example I would think you would choose Prisma over Drizzle. Would love a 2-3 hour video of that!

[michaelkhalsa]

If you are going to properly structure an application, then you have the data repository only accept and return DTO’s

No business logic, such as creating a full name out of first and last, slug generation, etc. optimized joins are best done in this layer as well, as long as returns dtos.

The data repository also has your lowest level of caching and invalidation, and checks permissions from the process caller, not the end user.

It also abstracts the actual data stores used.

Then you have a services layer which consumes the data repository’s, often from multiple sources. It shapes the data if needed, does user permission checks, and applies business logic where needed such as constructing a full name and returns models which might just be the same fields as the dtos, but might also be html, etc. You can also do language translation on this layer for messages.

Finally, the front end consumes the services.

[kovs-game]

Great Video ! You could also use NextSafeAction to call a server action and put the authentication in each call so you won't need to duplicate the check to each method in your DB access.

[shumaslaghari]

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

[CodeCrafted]

why we don't use the auth check in server actions instead of creating data access separate file?