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

Summary

This video explores the latest Next.js app router and React Server Components, discussing how they blur the line between server and client. It emphasizes the importance of a data access layer for security, especially when dealing with authentication and database interactions. The tutorial demonstrates using a data access layer to ensure that authentication checks are performed before database access, preventing unauthorized data access. It also touches on best practices like using the cache function to avoid duplicate database calls and the server-only package for added security. The video is sponsored by Kind, which provides an easy solution for authentication and authorization in Next.js applications.

Takeaways

• 😀 The latest Next.js app router has introduced significant changes, blurring the line between server and client components.
• 🔐 Security is paramount, especially when dealing with data. It's crucial to implement authentication checks before interacting with the database.
• 📚 An article by Sebastian Markbager recommends using a 'data access layer' for new Next.js projects to enhance security and structure.
• 🏗️ React server components allow for fetching data directly within the component, necessitating careful handling to ensure security.
• 🚫 The risk of exposing sensitive data arises when components fetching data are reused in different parts of the application without proper authentication checks.
• 🔑 Using middleware or page-level checks alone is insufficient to protect data; a more robust solution is needed.
• 🛡️ A data access layer centralizes data interactions and authentication logic, reducing the risk of accidental exposure of sensitive data.
• 👥 The structure supports better teamwork by allowing backend developers to focus on data access and frontend developers to utilize the data.
• 🔄 React's cache function can prevent duplicate database calls when the same data is accessed from different components.
• 🛠️ Using a data transfer object (DTO) allows for filtering out sensitive fields and transforming data into the desired shape before it's used in the application.

Q & A

What is the main focus of the video script?

The main focus of the video script is discussing the changes in Next.js app router and how to structure Next.js applications securely, particularly with the introduction of React Server Components.

Why is a data access layer recommended in Next.js applications?

A data access layer is recommended to ensure that authentication checks are performed before interacting with the database, centralizing data access logic and making the application more secure.

What is the problem with accessing data directly in components without a data access layer?

Accessing data directly in components without a data access layer can lead to security risks, as there is no guarantee that authentication checks are performed before data is fetched, potentially exposing sensitive data.

How does the introduction of React Server Components change the way data is accessed in Next.js applications?

React Server Components allow for fetching data directly within the component using async/await, which changes the data access pattern and necessitates a more secure approach like a data access layer.

What role does the authentication solution 'Kind' play in the video script?

In the video script, 'Kind' is used as an authentication solution to protect pages and ensure that only authenticated users can access certain data or routes in the Next.js application.

Why is it important to perform authentication checks before database interactions?

Performing authentication checks before database interactions is important to prevent unauthorized access to sensitive data, ensuring that only authenticated users can view or manipulate the data.

What is the significance of the data access layer in team-based development?

In team-based development, the data access layer helps in dividing responsibilities, allowing backend developers to focus on database interactions while frontend developers use these interactions in the application.

How can the data access layer help in maintaining security throughout the application?

The data access layer helps maintain security by centralizing authentication and authorization logic, ensuring that all database interactions go through a secure and consistent process.

What are some benefits of using a data access layer in Next.js applications?

Benefits of using a data access layer include improved security, easier management of authentication and authorization logic, better organization of code, and a clear separation of concerns in team-based development.

How can the data access layer help in reducing duplicate database calls in a Next.js application?

The data access layer can help in reducing duplicate database calls by centralizing data fetching logic, allowing for caching mechanisms and ensuring that data is fetched only when necessary.

Outlines

00:00

🛠️ Structuring Next.js Applications for Security

The paragraph discusses the evolution of Next.js app router and the importance of structuring applications securely. It highlights the blurring line between server and client components with React server components and the necessity of a data access layer for security. The speaker introduces the concept of protecting data by ensuring authentication checks before database interactions. An example is given where only authenticated users can view certain content, and the potential risks of reusing components without proper authentication checks are explored. The paragraph concludes by emphasizing the need for a secure architecture that prevents unauthorized data access.

05:00

🔐 Implementing Authentication with Kind

This section details the process of setting up authentication using Kind, a sponsor of the video. The speaker, who is a brand ambassador for Kind, walks through adding authentication to a Next.js application. The steps include creating an application in Kind, configuring callback URLs, installing the Kind Next.js package, setting environment variables, and adding an API endpoint. The speaker demonstrates how to protect a page by checking the authentication status using Kind's `getServerSession` and redirecting unauthenticated users. The video also shows how to configure Kind for GitHub authentication and ensure that only authenticated users can access protected pages.

10:00

📚 Introducing the Data Access Layer

The paragraph introduces the concept of a data access layer as a solution to the problem of securing data access in Next.js applications. It explains the risks of having unprotected data access points in components that could be reused in different parts of an application, potentially leading to security vulnerabilities. The speaker advocates for a centralized approach to database interactions, where all data fetching is done through a dedicated layer that ensures authentication checks are performed before any data is accessed. This approach is contrasted with the potential issues of scattered data access points throughout the application code.

15:02

🛡️ Securing Data with a Data Access Layer

This section delves deeper into the practical implementation of a data access layer. The speaker demonstrates how to create a centralized folder for data access, with specific functions for each database interaction, such as fetching or updating articles. The benefits of this approach include ensuring that authentication checks are consistently performed before database access, regardless of where the data is needed in the application. The paragraph also touches on the advantages of this structure for team collaboration, security audits, and the ability to easily update authentication or authorization logic in one place.

20:03

🔗 Best Practices for Data Handling in Next.js

The final paragraph discusses best practices for handling data in Next.js applications, building on the data access layer concept. It covers the use of React's `cache` function to prevent duplicate database calls when the same data is accessed from different components. The speaker also mentions the use of the `server-only` package to ensure that data access layer functions are only usable on the server side. Additional security practices are highlighted, such as selecting only necessary fields from the database and creating data transfer objects (DTOs) to filter out sensitive information and transform data into the desired shape for application use. The paragraph concludes by emphasizing the importance of these practices in maintaining a secure and efficient Next.js application.

Keywords

💡Next.js

Next.js is a popular React framework that enables functionality such as server-side rendering and generating static websites. In the context of the video, Next.js is used to build a web application with a focus on the latest features of its app router, which blurs the line between server and client-side rendering.

💡React Server Components

React Server Components are a feature that allows components to be rendered on the server, which can improve performance and security. The video discusses how these components change the way developers structure their Next.js applications, allowing for direct data fetching within the component itself.

💡Data Access Layer

A data access layer is a concept in software design where a centralized component handles all interactions with the database. The video emphasizes the importance of using a data access layer for security reasons, ensuring that authentication checks are performed before any data is accessed, which is recommended for new Next.js projects.

💡Authentication

Authentication is the process of verifying the identity of a user. The video discusses implementing authentication with Next.js using a service called 'Kind', which is used to check if a user is logged in before allowing access to certain pages or data, ensuring that only authorized users can view or manipulate protected content.

💡Middleware

Middleware in Next.js refers to functions that have access to the request and response objects and can either end the request-response cycle or call the next middleware function. The video mentions using middleware for route protection, but cautions that it's not enough on its own to secure data access.

💡Prisma

Prisma is an ORM (Object-Relational Mapping) tool that simplifies database interactions in web applications. The script uses Prisma to illustrate how data is fetched from a database within Next.js server components, and how it should be done within a data access layer for security purposes.

💡Server Actions

Server Actions in Next.js are a way to perform actions on the server in response to client-side events. The video points out that while server actions are tied to a specific page route, they can be misused if not properly protected, leading to potential security gaps.

💡Reusability

Reusability in software development refers to the ability to use a component or piece of code in different parts of an application or in different projects. The video discusses the risk of reusing data-fetching components without proper authentication checks, which can lead to security vulnerabilities.

💡Security Best Practices

Security best practices are guidelines and procedures aimed at preventing security breaches. The video highlights several security best practices, such as using a data access layer, ensuring authentication before data access, and using tools like 'Kind' for managing authentication and authorization.

💡Data Transfer Object (DTO)

A Data Transfer Object is a design pattern used to transfer data between processes. In the video, the concept is used to shape and filter data from the database before it's used in the application, ensuring that only necessary and non-sensitive data is exposed to the rest of the application.

💡Cache Function

The cache function in React is used to prevent unnecessary re-renders of components. The video suggests using React's cache function to optimize data fetching, ensuring that database calls are not duplicated when data is accessed from multiple components.

Highlights

Next.js app router has undergone significant changes, blurring the line between server and client with React Server Components.

Security in Next.js is emphasized, with a recommendation to use a data access layer for new projects.

Authentication checks should precede database interactions to ensure data security.

React Server Components allow for fetching data directly within the component, changing the traditional approach.

The potential risk of reusing components that fetch data without authentication checks can lead to security vulnerabilities.

Middleware can be used in Next.js for route protection, but it doesn't secure data access within components.

Introducing a data access layer centralizes data interactions and ensures authentication checks are performed.

The data access layer concept is beneficial for security, reusability, and team collaboration.

Using a data access layer helps prevent unauthorized data access, even when components are reused in different parts of the application.

Authentication and authorization logic can be consolidated in the data access layer for easier maintenance.

The data access layer is not an external API but an internal application structure for safe data handling.

Prisma is used as an example of an ORM for database interactions within the data access layer.

The data access layer can help in logging database access and conducting security audits.

React's cache function can prevent duplicate database calls when the same data is accessed from different components.

The server-only package can be used to ensure that data access layer functions are not accidentally used on the client side.

Selecting specific fields from the database can minimize the exposure of sensitive data.

Data Transformation and creation of Data Transfer Objects (DTOs) can shape data for specific application needs.

Centralizing data access logic makes it easier to update the application in response to changes in database schema.

Kind is recommended for handling authentication and authorization, simplifying what was once a complex problem.

The video concludes with a call to action for viewers to consider implementing a data access layer in their Next.js projects.

Transcripts

a lot of things have changed in the

latest nextjs app router so with react

server components the line between

server and client have blurred and many

other things have changed so in this

video I want to talk about how to

structure or how to architect your

nextjs applications so this is actually

a wonderful article about Security in

nextjs by Sebastian markager and this is

an article about Security in nextjs and

here you can see they actually recommend

using a so-called data access layer for

your new project in this video I'll show

you what that means but for example we

want to make sure that we do an

authentication check before we actually

interact with our database and there's a

certain way that we can structure our

application make sure we do that so

what's the problem why do we need

something fancy like a data access layer

what even is that well let's say we have

a very simple project I just have a

homepage here and that's what we have

here H1 and read an article right so

this whole project just has one article

I can go to the article page and here I

have some text this is actually data

right when it comes to security what do

we want to protect what do we want to

secure it's our data right our data is

the most important part if we render the

wrong button or the markup isn't right

that's not the end of the world

typically but if this article text

specifically if this should only be

viewable for logged in users maybe even

paid users then we want to make sure

that this text here cannot be read by

guest users or free users um so what I'm

doing here is I'm using a react server

comp components right this is a page

component and by default everything in

the nexts rter is essentially a server

component I can do async await and this

is how you get data in the idiomatic way

in the latest next chance app router

right you can do it directly here in the

server component you don't need use

effect you don't need an API route or

route Handler either you also don't need

a server action you can do it directly

like this okay so in my database I just

have one article I'm using Prisma here

and you can see here in my database I

just have this one simple article here

that is what I'm getting and that is the

text that I'm showing here so that's

what we have so far now what's the

problem with this so we want to make

sure that only logged in users let's say

can actually read this text so what you

could do is simply add some protection

to this whole page right so you could

use an authentication solution so we're

going to use kind in this video they are

today sponsor and they have in my view a

great solution for authentication the

way it works with kind is you can do

something like this and now when this

page loads we're first going to do an

authentication check right so then

before you even get anything from the

database you first have the O check in

this case this would work but with react

server components we can also fetch data

in another component right so here we

were fetching the data uh right here in

the article page but maybe we are

fetching that in some component maybe we

have a dedicated component for the text

right which actually kind of makes sense

and in there we do the data fetching and

we then return the actual text right so

then we would use that component right

every react developer has components on

their mind so maybe you or somebody else

on your team structures it like this

where you actually access the data in a

separate component now this is risky

with server components because now it's

still protected right we're still first

doing the authentication check before we

render this component and before we

actually get the data from the database

but what react developers also have

front of mind is reusability so what if

somebody on your team reuses this

component on the homepage let's say

right so maybe somebody's going to use

it on the homepage

here we do not have an authentication

check so now if I go to the homepage I

can view this data or whatever which is

not what we

want and by the way it doesn't matter

how you protect your pages whether it's

actually like this in a page component

or instead maybe you're using middleware

we can also use middleware with kind

right it would look something like this

they have the width off and we want to

run this on the/ article route but this

only protects the SL article route but I

just added this component on a on the

homepage which is a public route right

so here we are still accessing that well

what should be private data right so it

doesn't matter what way of protecting

you use as long as there is a gap

between where you do the authentication

and where you actually access data from

your database there is a gap and that

Gap allows for well potentially

dangerous and here I showed you an

example of getting data but this problem

also also is with updating data with

server actions right so server actions

are the idiomatic way of updating data

now server actions they live on the page

the route on which you're using them so

if you're using a server action on the/

article route you may think oh

middleware I'm going to protect the SL

article route so the the server action

I'm using there is going to be protected

well what if somebody's using that

server action on a public route on the

homepage let's say right so this way of

protecting your app at the middleware

level or at the page level like that is

this is not enough and so instead you

may want to use a data access layer now

before I show you the solution I quickly

removed what we just did and I quickly

will show you how to setup kind and then

we'll take a look at the data access

layer we don't even have any kind of

authentication right so everybody can

just go here it's a public page right

now so we need to add some

authentication so let's start there and

then I'll show you how to structure it

so I'm going to use kind for the

authentication they are today sponsor

and I'm actually a brand ambassador for

them it's a paid sponsorship but I had a

great time working with them so far and

they have a very generous free tier as

well you can find a link in the

description if you want to sign up right

now if you sign up you can easily add an

application I will quickly add

authentication with them so you can see

how that works but everything that we're

going to talk about here also works with

any other authentication solution you

may be using so here I just need to

quickly add uh some name I'll call it

nextjs app a backend web here nextjs is

very backend heavy so it's actually more

of a backend framework so here they have

a template here for nextjs okay easy all

right so so then here they show you

exactly existing codebase how to

implement this so yes it's running on

Local Host 3000 I just have to set these

to call back URLs here in kind boom boom

all right then I can install their next

JS package can just copy and paste that

right here all right and then let's see

we need to add some environment

variables I'm going to quickly create.

logo and just paste that right here and

actually here after logging in where do

we want to redirect the user well in

this case let's actually redirect them

to that article page so that's the only

thing I will change here all right so

then last step here we need to add the

API endpoint so that kind can internally

wire everything up and actually I should

be able to just copy the path and then

here I should be able to create a new

file by just pasting everything like

this yeah and here we need to just copy

and paste that right here all right so

that's all we need to do to add

authentication to our nextjs app with

kind and then here they show you log in

and log out buttons we're not going to

use that here but we do want to protect

this article page now so what we can do

with kind we can go to that page so what

we can do is if we want to protect this

article page well when it renders we can

simply check the authentication status

of the user so kind gives us this get

kind server session that we can use

everywhere on the server side this is a

server component so we can use it it

will give us an is authenticated

function actually so I do need to call

it here so if the user is not

authenticated we are going to redirect

them to that API route so kind can take

care of logging the user in and if the

user is authenticated we continue here

and we actually are going to make that

fetch call to our database through our

omm us using Prisma here but works

similarly for other OMS and that will

give us some data here and so we can

just take it text and that's what we

would see then now here I'm actually

already being redirected here so if I

click on read article I'm not logged in

so indeed I should be redirected right

and indeed kind is redirecting me to a

login page now here we do need to

specify how we want the user to log in

so we can go to authentication here and

kind gives us these options now what we

want to use is just GitHub here I'm

going to save that now if I try going to

that article page again all right so

here we have continue with GitHub I'll

quickly log in and now here I'm

redirected now if I go to inspect here

under cookies and if I go here yeah so

here under access token I can see my so

I'm logged in and therefore I can see

the article page with that well

protected data right that's why I can

now see this right so this is a very

quick way of securing our page for only

logged in users you don't want to do it

in layout right so if you watch my other

videos on authentication in nextjs you

know that you typically don't want to

add it to the layout here um it's very

tempting to do this if you want to

protect your whole app right because you

think uh instead of doing it in every

page we're just going to do it once in

the layout but that will not work as

expected because the layout here will

not do it's not going to run this if you

for example uh click on this link like

here when we navigate here it's not

going to read do the check for the

article page so you don't want to do it

in layout you want to do it either in

the page component or you can also

create a middleware they both have

certain advantages let's say we do it

like this now what's the problem with

this I have now properly protected them

so what's the issue with

this you can see we get the same result

but we have just refactored this a

little bit so we have a dedicated

component for the text and in a real

next CH app you could very well have a

separate component where you actually

get the data and this is the important

part because now there is more of a gap

right so here now we are doing the

authentication check but where we

actually access the database is now in a

separate place and it's in a separate

component here and so so far so good but

react developers also have reusability

at the top of their mind right so there

could be you or some other developer on

your team could accidentally perhaps use

this component on the homepage right so

I could also use text here on the

homepage uh if I do it here on the

homepage we now have this text here on

the homepage so even if I log myself out

by clearing all of my cookies here so I

don't have the token anymore since the

homepage is not protected right we don't

have any authentication check here and

I'm not logged in I can still read this

right so this text here this piece of

data that we have that should be

protected is not protected right now

right now the article page is still

properly protected but the homepage is

is public so if you use that component

on the homepage right so it doesn't

matter if you use middleware or you do

the authentication check directly in the

page right let's stick to the page for

this tutorial this problem exists with

both approaches I have other videos also

with kind when to do the authentication

check in the page or when in middleware

it depends a little bit on your setup

but uh let's continue with doing it in

the page for this video so how do we fix

this how can we prevent this so this is

where the concept of a data access layer

comes into play so what we want to do is

we want to have one centralized place or

layer in our application where we

interact with our database right so our

data so what you could do is you could

create a folder here for all your data

access right we can actually just call

it data access and in here we can create

a file uh here is this is going to be

for the Articles right so for the

article table in our database let's say

and here I will have all of the ways

that I'm going to interact with my

article data so here I could export a

function that I can just call get

article right I could accept some ID or

something like that but let's keep it

simple and here is where I'm going to

get the data right so what we were doing

previously somewhere in you know

somewhere in our application somewhere

in our component tree we now know for

sure that all of the data is going to

come from here I will just return that

from here this one function is going to

be responsible for getting the article

all of the data access is going to be in

here so this is for getting an article

maybe we we are going to have one for

update article right all of your CR

delete article we can right these are

not empty but you get the point all of

the interactions with your database

you're going to create functions in here

you can also do it with a class if

you're a backend developer you may

already be familiar with the concept of

a data access layer but a lot of you are

actually coming from the front end world

so basically what we're doing here is

we're creating a centralized place where

we do all the data access basically all

our interactions with our database so

now whenever you need data in your

application somewhere you're not going

to randomly do that in some component

right so here we're not going to get the

article data from here now because we

have one function now for getting the

article and so whenever we need to get

an article we're going to use that

function right so now if I want to get

article data I can say article data and

now I need to use that function right

get article I should import that and I

get a rest quickly line here by the way

because Prisma tells me it could also be

null right I may have deleted it in the

database I'm ignoring that here but I

can remove Prisma now from here right so

now I can access this data in the text

component now since we're always going

to use this function now when we need to

get an article we can do the

authentication check in here so we can

just do all of this with kind right here

right so you first do the off check and

then you interact with the database and

the benefit is now I can safely use this

get article function function wherever I

want whether it's in this component or

in some other component and I can be

rest assured that the authentication

check is always being done because

there's no Gap now between the

authentication check and the place where

I'm accessing my database right there's

no Gap in here they right after each

other they're right in the same function

so that is in essence the benefit of

using a data access layer it's safer in

my view because now whenever I need to

get a article I just use that one

function which takes care of all the

authentication and potentially

authorization logic so I can now more

comfortably uh work here in my

application now I may still want to have

a page level check as well maybe more of

a as a convenience perhaps as a way to

quickly do some redirections at a page

level let's say um or just to see what

what pages should be uh public or

private and so that would be like your

first line of defense whether you're

doing some kind of page level check or

middleware check that would be like your

first line of defense and then in

addition to that whenever you need to

get access to a piece of data in this

case you know a particular article it

could be other data that you have you're

going to create a separate function for

that in your data access layer right

basically just one file right now in

which you also do the authentication

check so that you're always certain that

the act the interaction with database is

safe and data access layer is not an API

or or an external API or something like

that right so you may be inclined to use

like a DAT an API layer to fix that

issue but that's not necessary when

you're using an API you're actually

going over the network there are other

complications that come from that

instead we can just structure our

application code slightly differently so

that every interaction with your

database is now going to be in this one

folder let's say this is just we can

call it a layer you can call it however

you want and we could have one file per

uh table or schema in our database right

so here I'm using Prisma and here I just

have this one model for article this

will create one table in my database and

so you may want to have one file for

each one you have and in this case I

only have article and so here you would

do your authentication check right

before the actual database call and we

would do the same for the other

potential functions here right so if you

want to update the article maybe you

would have some kind of database call

like this maybe you pass in an ID or

something like that but here again you

would first do your authentication check

before you interact with the database

and now wherever in your app where you

need to update the article you need to

make sure that you only use this

function and then you can be rest

assured that there's always the

authentication check first right so now

only logged in users can update an

article you know realistically you're

going to have other authentication

authorization rules right so maybe every

logged in user can actually uh get an

article but to update an article you

need to be an admin or something like

that and so here you can have additional

rules if the user is not an admin kind

has a great solution for roles and

permissions as well we can check if the

user has the proper role or permission

so that's another benefit of using this

structure is now whenever you need to

change your authentication or

authorization logic you know where to

look because previously if you were

doing the authentication check in some

you know random components throughout

your codebase you don't know exactly

where you left that check right so now

you want to update the authorization

logic so that only admins can update

articles so now you have to think oh

where did I leave that where did I leave

that uh logic was it in a text component

or some other component right so it's

scattered throughout your codebase but

this way you know where to look it's all

in your data access folder you have

embedded that Within these function all

of the updates happen in one place also

if you work in a team you may have one

person who takes care of the data access

layer and another person and that

actually uses that in the rest of the

app right so I think it also helps split

up the work I think somebody who is a

traditional backend developer would feel

more at home interacting with the

database than a traditional front end

developer right so a front end developer

would probably feel more comfortable

actually using these functions so I

think this is a more natural way of

splitting up the work in a team that's

working on xsf it also helps in other

related ways for example if you want to

log who's accessing the database the

access or you doing some kind of

security audit you can just do it

directly in here you know where to do it

it's all in one centralized place right

so there are many benefits that come

with this structure the fancy word for

this is a data access layer and you can

implement it in different ways you can

use classes but this is now the

recommended structure for accessing your

data in new nextjs projects right and by

the way if you ever need this data in

some other component maybe not in text

maybe we also need article data in some

statistics component maybe and writer

can log in and can view their most

popular posts right and we want to show

the we want to show the title of the

most popular post right just an example

but we could want to access this data

and other components as well right so

now I'm accessing the article data in

stats as well as in text and maybe I

have stats here on the page as well so

now maybe you are getting worried

because now we're going to duplicate

those calls right so now you could say

oh I'm accessing the data the database

from this component but now also from

this component so that would be a bit

much because now we're going to invoke

this multiple times so we're going to

make that datab base call multiple times

Well react has a solution for that

actually they have a cache function so

you can wrap that entire function in a

in the cache function from react if you

invoke that multiple times during what

react calls a render pass so if this

page gets rendered they both get called

but it would only run once right so it

would not make duplicate calls to the

database so that's something that you

may want to use here as well in addition

to that you may also want to use the

server only package it will make sure

that if you try accessing anything here

on the client side that you will get an

error so it's it's slightly safer so

that you're not accidentally trying to

use these functions on the client side

and what you may also want to do is if

you're using an omm like Prisma here

there are some other security best

practices I would say um because very

often you don't need all of the article

data right so with Prisma here I can

select what I want so here I want the

text for example but maybe this article

in the database also has the author

email right and that is more sensitive

data right so somebody's email is not

something that we Loosely want to pass

around now by default if you leave the

select off if you just do it like this

it will give you all the fields of that

article but by using select here we can

make sure that we only get the text

field back and not the email that's so

we can be more specific and get back

just the fields that we need and not the

more more sensitive perhaps Fields right

so that's another I would say security

best practice right also if you're if

you're actually managing users in your

own database you don't want to get their

hashed passwords right so you don't want

to select the password in that case now

let's say we we are getting the data

like this so we are getting the article

data from the database and we are

returning it plainly like that now

before we actually return that and sort

of make it available to the rest of our

app where wherever we may be accessing

wherever we may be trying to use that

maybe we sort of want to do one last

filter step or now you may want to be a

little bit more specific so instead of

just returning the whole article data

like that maybe we actually do want to

pass and make available a specific

object right so we know that article

data has an ID so maybe we do indeed

want to return that ID okay and also the

text right so article data. text okay so

we are now returning essentially the

same now if article data also had that

author email right you could decide to

not include it here right so here in

this case you can also say well we're

simply not going to return that from

here that's another way of sort of

filtering out sensitive Fields also

maybe you can already do some data

Transformations here or some or do some

computation here for example the slug

for if it for whatever reason is not

part of the article data from the

database maybe the slug right so that's

typically the title of the article in

the URL maybe we can just take uh the

article dat

the text and then just maybe take the

first uh the first 10 characters or

something like that so that it's easier

to use it in the rest of the app

basically the fancy word for this is a

data transfer object dto and so instead

of doing it like this we may actually

create a function that actually does

that for us right so here we can say

create article dto and you pass in the

article data and that's what we're going

to return here let me actually just

create that function here create article

dto which takes in that article data and

it returns an object with that ID detect

we came up with some slug example as

well right so here it's basically a way

of filtering out sensitive field and

maybe do some Transformations on some

data basically making sure that it's the

exact shape that we want because what

you get back from the database may may

not be the exact shape in which you want

to use it in the rest of your

application that's what we would return

now basically we get the data the raw

data from the database and we just shape

it a little bit before we return it from

from that function before we're actually

going to use it in the rest of the

application we may want to create a

separate file where you have these uh

dto another benefit of this is for

example if you if you change the model

in your database right maybe here I'm

going to change the schema actually here

for Prisma instead of text maybe we

actually rename this to content let's

say the benefit is now that we don't

have to update that everywhere in our

app and so previously if you were just

using the raw for the raw object from

the database you would have to update an

every plan but now we are also

centralizing that here in one place so

we can keep using text as long as we of

course change this into content right so

then in the rest of the app we can still

use article data. text right so we would

still use article data. text here but

now it is do content from the database

right so now I would say this is

becoming pretty uh sophisticated setup

in the latest next s app router next

chance is a full stack framework so we

are sort of rediscovering a lot of

traditional software engineering concept

but I would say this is a better

structure than randomly accessing your

data throughout your component this is

something that you may want to use or at

least to think about right so here we

were talking about getting data fetching

data from your database but the same

problem will exist update data in a

database in a server action and actually

for very similar reasons you may be

confused a little bit because this is

all pretty Cutting Edge but the good

news is for authentication and

authorization which used to be a huge

problem

at least that part of the stack has been

solved thanks to kind kind makes it

really easy to manage all of the

authentication authorization stuff so I

would say check out kind I want to thank

them for sponsoring this video very easy

to set up very professional looking you

can find a link for them in the

description and I want to thank you for

watching as well hope to see you the

next one bye