Building a Fullstack app using NextJS and Prisma - CityJS Conf 2021
Building a Fullstack app using NextJS and Prisma - CityJS Conf 2021
In this workshop you will learn how to build a fullstack app using Next.js \u0026 Prisma.
This workshop was recorded at CityJS Conf 2021: https://cityjsconf.org/
Lear more at: https://twitter.com/cityjsconf
Code: https://github.com/m-abdelwahab/nextj…
00:00 - workshop intro
00:41 - a look at the starter branch
04:36 - getting started with Prisma
06:58 - installing Prisma and using prisma init
07:34 - writing the Prisma schema
11:29 - set up a PostgreSQL database using cloud.prisma.io/postgres.app
16:44 - creating a migration
19:21 - seeding the database
26:00 - question: are Prisma and GraphQL related? + live debugging + recap
29:20 - initializing Prisma Client in a Next.js app
31:21 - creating API endpoint for submitting feedback
36:08 - sending requests to the create endpoint from the frontend
42:00 - displaying the list of feedback
45:49 - Next.js getServerSideProps serializing problem
47:25 - Recap, Conclusion, and questions
——————————————————
📚 Learn more about Prisma
• Website: https://www.prisma.io
• Docs: https://www.prisma.io/docs
• Quickstart: https://pris.ly/qstart
——————————————————
❓ Get help with Prisma issues
• Slack: https://slack.prisma.io
• GitHub: https://www.github.com/prisma/prisma/…
• Stackoverflow: https://stackoverflow.com/questions/t…
——————————————————
💬 Follow Prisma on social media
• Twitter: https://twitter.com/prisma
• Instagram: https://www.instagram.com/prisma.io/
• TikTok: https://www.tiktok.com/@prismadata
• Facebook: https://www.facebook.com/prisma.io
• LinkedIn: https://www.linkedin.com/company/pris…
——————————————————
🔠Professional captions for your technical videos
Prisma sponsors human-reviewed, professional closed captions for ANY video valuable to our community (for example, about: Node.js, TypeScript \u0026 Type Safety, Prisma, databases, etc). Get your FREE captions here: https://pris.ly/closedcaptions
——————————————————
✅ Subscribe to Prisma’s YouTube channel
/ @prismadata
Content
0.16 -> on top of react
2.8 -> it's built on top of react and it allows
5.2 -> you to build full stack applications and
6.96 -> we'll see how so
9.04 -> that's the first thing and it gives you
11.36 -> a client and a server the client is
13.679 -> built using react and the server is
16.64 -> using javascript as well so like node.js
19.68 -> you have both the client and the server
22.32 -> and prisma is a next generation orm for
25.68 -> node.js and typescript
27.279 -> so an orm allows you to easily access a
29.599 -> database
31.599 -> and we'll see how to get started with
33.52 -> prisma and how to install it and
35.36 -> everything
36.48 -> but first let's take a look at the
39.6 -> starter page so this is the starter
41.68 -> branch this is a next.js app
44.64 -> with taylor and css setup so i have
47.12 -> sound css
48.6 -> halftone.config.js
50.16 -> uh this all this project also
52.48 -> uses typescript so that's why i have a
54.399 -> ts config.json
56.16 -> and nexjs comes with typescript support
58.64 -> out of the box so you don't need to do
60.239 -> anything uh so like if i open my
62.16 -> package.json file i just
64.64 -> install typescript and the types for
66.56 -> react create a ts config.json and you're
69.68 -> ready to go
70.96 -> and
72.4 -> yeah so like this
74 -> is the first thing um nexus
77.36 -> comes with really cool features uh so
79.92 -> the first one is this pages directory so
83.2 -> i already have a couple of pages set up
85.84 -> and i have my app running at localhost
88.72 -> 3000. i did that by running npm run dev
92.079 -> and
93.119 -> this is what it will look like so if you
95.04 -> go if you clone the starter branch you
96.88 -> install the dependencies
98.72 -> this is what you're going to see so this
100.56 -> is a feedback app you're going to see
103.28 -> just on the home page the index page
105.84 -> will close 3000 just a form and what's
109.04 -> going to happen is
110.72 -> users will submit their information and
112.96 -> they'll give feedback
114.399 -> a feedback can either be feedback an
116.56 -> issue or an idea
118.56 -> and after they submit we'll be able to
120.88 -> see all the feedback in
124 -> the route called feedback
126.719 -> now this is hard-coded data um this is
128.879 -> just what it will look like
131.28 -> um and we'll be fetching the data from
133.76 -> the database using prisma and also uh
136.8 -> depending on the time we'll see if we
138.959 -> can
139.84 -> do dynamic crops where each feedback can
143.04 -> be viewed in a page on its own so
145.76 -> each one of those items will have an id
147.52 -> and we'll see how to do it in xjs so
149.92 -> that we can go to localhost 3000 slash
152.72 -> feedback slash id
154.8 -> and yeah and i'll be mentioning after i
158.48 -> explain everything that i want to
159.76 -> explain kind of like next steps uh and
161.84 -> how you can take this demo and add more
164.319 -> features to it for example like
165.519 -> authentication so only logged in users
168.16 -> maybe would like certain emails you can
169.68 -> see this but like depending on the time
172.08 -> so
172.959 -> i would say
174.08 -> uh let's keep let's go back to the code
177.76 -> and with nexjs it has what is called
180.159 -> file based system routing
182.239 -> so inside this pages folder every
184.48 -> javascript file or here it's typescript
187.2 -> um is automatically a wrapped so this
190.239 -> index page
191.68 -> this page um this is what you see on at
195.12 -> localhost also if anyone is having a
197.84 -> hard time seeing on my screen let me
200.08 -> know and i can zoom in
202 -> and yeah so like i just um for this page
204.72 -> i just have a forum validation library
206.959 -> it's called react to perform i also have
209.04 -> framework motion for some animations
210.799 -> like when you click on the button
212.4 -> i also have uh just um importing like an
215.84 -> icon library and a toast library so like
218.959 -> when never someone
221.12 -> uh clicks submit we'll be able to see
223.599 -> kind of like a toast that pops up and
225.12 -> says okay
226.64 -> submission
228.159 -> has looked kind of like it's been
229.44 -> submitted successfully
231.2 -> and yes this is just a react code
234.4 -> nothing special
235.92 -> if you don't know react there are tons
237.599 -> of resources out there to learn it um so
240.4 -> yeah definitely learn react first and
242.48 -> then
243.28 -> come back to the next guest or learn
245.04 -> react through an experience whatever you
246.799 -> like
247.84 -> and
248.799 -> yeah so like this is it um
251.68 -> and i have this page so like i have this
253.92 -> file it's called feedback dot tsx and
257.12 -> this is why i have this route which is
260 -> slash
260.88 -> feedback i just export a react component
263.68 -> and i have this page ready for me which
266 -> is super nice
267.52 -> so getting started with prisma
269.919 -> so prisma takes care of the database
271.84 -> layer um let me go back to the main page
275.36 -> so prisma takes care of the database
276.96 -> layer it allows you to
279.36 -> define your data model so
282.4 -> um kind of like you will have different
284.56 -> models and you can also describe the
286.639 -> different relations between them
288.32 -> and you can do
290 -> a lot and we'll see exactly how to do
292.24 -> that
293.199 -> but what's good about about prisma is
295.199 -> that it also has great support for
297.759 -> typescript so with databases
300 -> traditionally um you so
302.88 -> with prisma it supports different types
304.88 -> of databases and if you actually scroll
307.52 -> uh we support postgresql mysql sql lite
310.56 -> microsoft sql server and there's mongodb
312.8 -> in preview
314 -> and we also support other languages but
316.72 -> what happens is you define your data
318.72 -> model using a prism schema language so
322.24 -> this file which we'll create
324.639 -> for our app
325.919 -> um this is how you define the different
328.4 -> rows in your database and the different
331.28 -> tables and the different columns and the
333.28 -> different tables in your database
335.039 -> because we'll be working with blizzard
336.96 -> sql and yeah and then what happens is
340.479 -> from this data model uh when what will
343.6 -> happen is we can generate a type save
346.24 -> client where you will use a programming
348.639 -> language in our case we'll be using
350.24 -> typescript to interact with the database
352.4 -> and you can do so like you can do
355.68 -> all the operations that you would want
357.12 -> to do so create read update and delete
359.919 -> and even like filtering sorting and a
361.759 -> lot of cool stuff
363.28 -> and what's also so like this is kind of
365.44 -> like the first component of frismo
368.16 -> which is prismaclient which is just it's
371.199 -> a query builder that you can use
373.919 -> and then there's prism migrate we'll see
376.4 -> how to create a migration so as your
378.72 -> schema evolves so like you'll update
381.039 -> your schema.prisma file what will happen
382.96 -> is you'll use personal migrate which is
384.8 -> a part of the prism cli to
387.28 -> just
388.08 -> do the migration for you uh you don't
390.16 -> need to write any code for migrations
392.319 -> which you would do when you're working
394.639 -> with like cross equal
396.08 -> and then finally there's christmas
397.28 -> studio uh which is i kind of like
399.72 -> phpmyadmin i don't know if anyone's
401.44 -> familiar it allows you to view the data
403.12 -> in your database it's kind of like just
404.8 -> an excel sheet where you can see all of
407.6 -> your data inside your database and you
409.52 -> can update them you can delete them and
411.52 -> also see how to do it
413.68 -> so to get started with fisma all we need
415.919 -> to do is let me stop my server and say
419.12 -> npm install
423.36 -> as a development dependency that's why i
425.039 -> added hd and then prisma
429.43 -> [Music]
430.72 -> bigger
432.56 -> and
433.919 -> now what you can actually do you can say
435.84 -> npx prisma
439.599 -> mpx prisma
441.68 -> net
444.8 -> and you'll see a new folder being
446.88 -> created here
448.479 -> it's called uh so like you have this
450.72 -> folder called prisma and inside it
452.4 -> there's a schema.file so inside this
454.8 -> file this is where we'll define our
456.96 -> database model
458.4 -> so when we look at our app uh what we
461.199 -> have is essentially just one model like
464.24 -> one table and it's the table of
466.639 -> feedbacks so i can say model
469.44 -> feedback
471.919 -> and
472.96 -> immediately you'll see okay there's an
475.28 -> issue and
477.12 -> since i'm working in postgresql what i
478.96 -> need to do is actually
480.96 -> have a primary key so i can say id and
484.96 -> it's going to be a stripe string
487.12 -> and and default we'll say this is a uid
490.56 -> and to specify that this is a primary
492.8 -> key i have to say ad id
495.199 -> and also i want to have
498.639 -> a created that field that's useful so
500.879 -> it's daytime
502.479 -> now as you notice there's type
504.24 -> completion and that's because there's uh
507.28 -> the prisma extension
509.12 -> so if you go i'm inside vs code so if
511.84 -> you just say prisma you'll see this
514.32 -> extension which adds syntax highlighting
516.88 -> it autocompletes your code and it just
519.76 -> does a lot of cool stuff
521.68 -> and
523.519 -> yeah so
525.36 -> going back i can say green add this is
527.92 -> datetime and i can make this uh the
531.12 -> default and give it a default value of
533.279 -> now so that whenever a new item is
536.64 -> inserted and your browser is here in my
538.399 -> database
539.68 -> i'll give it a created at field with
543.76 -> the date that it was created at
546.08 -> and then i can also say updated at and
548.16 -> because that's also useful
549.839 -> updated at it's also going to be daytime
552.64 -> and i can say at updated at
555.92 -> and as i can autoformat and then when
559.36 -> thinking about each feedback looking
561.2 -> back at
562.48 -> the example
564 -> we can see that each feedback
566.32 -> we have a name an email a message and a
569.36 -> feedback type
570.88 -> so
571.6 -> what we can do is say okay
575.519 -> we can say name this is a string
578.399 -> we can say email also a string
581.839 -> and we can say message
584.56 -> which which will also be a string
586.72 -> now you can also have
588.72 -> other stuff so like other data types if
590.8 -> you want depending on your use case so
593.2 -> say for example i say age
595.6 -> and
596.8 -> i can see the different data types so
598.8 -> there's big n there's boolean there's
600.64 -> daytime decimal and yeah a lot of uh
604.48 -> different data types that you can uh
606.64 -> that you can have
608.079 -> and now obviously all these fields by
611.279 -> default are required so
613.839 -> if we don't uh provide them while we're
616.839 -> creating um a new feedback uh we will
620.72 -> get an error now if we want say for
622.88 -> example the name to be optional we can
624.88 -> just add a question mark
627.36 -> and yeah i think that's it the last
630.72 -> thing that we need is a feedback type
632.56 -> now since we're working with sql plus
634.399 -> versus equal uh support is a really cool
636.72 -> feature and it's enums so enums are
640.48 -> basically like it's a field that can
643.2 -> only have a certain
645.36 -> um
646.48 -> certain value so he can say enum
650.079 -> feedback
651.6 -> type
653.68 -> and
654.959 -> it should have at least one value so we
656.56 -> can say
658 -> feedback is you know it's kind of like
659.92 -> the default
661.2 -> and
662.32 -> let's make it all caps and i can say
664.959 -> issue
666.16 -> and i can say idea so depending on
670.16 -> like the type of message that the user
672.56 -> can pick
673.519 -> and then i can just say feedback
676.399 -> type
677.68 -> and
678.64 -> specify that it's type feedback type
681.92 -> and i can also give it a default value
684.16 -> of feedback
686 -> so
687.04 -> yeah that's it that's our data model now
690 -> we actually need a database we haven't
693.2 -> created a database yet now there are
694.959 -> many ways to set up um a database
698.24 -> uh with to use it with prisma
701.6 -> so they do there are just tons of
703.36 -> database providers but the one i'll be
705.2 -> using is heroku
707.36 -> through
708.24 -> a prisma
709.6 -> prisma's data platform so if i actually
711.2 -> go to cloud dockers madara io
714.24 -> um this is our cloud product so
718 -> what happens is this uh prod this
720.639 -> product allows you to easily collaborate
722.639 -> on your prisma projects with with your
724.8 -> team
725.68 -> so i can create a new project
728.399 -> and i actually have two options i can
730.399 -> import an existing github repo and then
732.8 -> link my database or i can create a new
734.88 -> project from scratch so when starting
736.72 -> from scratch i'll just click create new
738.959 -> project
740 -> and this is my github account i already
742.399 -> connected it and um i logged in so if
745.2 -> it's like if it's your first time uh you
747.12 -> will be
748.079 -> um
749.2 -> you will need to
750.72 -> uh just accept it and like connect to it
753.68 -> and you specify the project name so i
755.92 -> can say project name is
759.48 -> city.js if i want
761.839 -> and i can click create project
766.399 -> so this step i will have a github repo
769.44 -> created for me it's going to be private
770.959 -> by default and then i can click create
773.839 -> database
776.079 -> so i already have a heroku account i'm
778.8 -> logged in
779.839 -> and
781.279 -> i provisioned a new database using rokur
784.56 -> but in this step i can also connect um a
787.519 -> database if i want
789.04 -> and yeah this also creates um a heroku
793.279 -> app so if i go to heroku.com and go to
795.44 -> my account i will have
797.76 -> an app created for me now in this step i
800.48 -> can also pick a schema but i don't need
802.32 -> it because i already have my own schema
805.12 -> and you can also have sample data so
807.839 -> this actually sees your database and
809.36 -> we'll see how you can save your database
811.519 -> but there are just different examples i
813.2 -> can just say um let's actually pick one
815.76 -> of them let's pick the url shortener and
817.92 -> you can see the model you can say create
820.24 -> schema
822.56 -> so if you actually just want to play
823.92 -> around with prisma this is a really nice
826 -> way to do it i just print my on its own
828.959 -> and you will see there are just multiple
831.199 -> tabs so
832.639 -> the this is like the query console where
834.72 -> you can run queries uh that just fetches
838.32 -> data from your database and this is
840.32 -> prismaclient which we'll set up in our
842.24 -> project and you can just run a query and
845.44 -> you'll see
847.68 -> kind of like the data and this is the
849.92 -> data that's inside the database i like
852.8 -> like the database provisioned by
855.279 -> prismacloud
856.72 -> and if i want i can get the connection
859.279 -> string from heroku but i'll just i'll
861.6 -> stick to working uh with postgresql
864.079 -> locally because i'll show you how i do
866 -> it
867.04 -> and yeah so like this is the query
868.959 -> console you can also see
870.959 -> uh this is a hosted prisma studio so
873.519 -> with prisma studio the one i'll be using
875.839 -> is locally
877.519 -> on my machine as it's included in the
879.6 -> prism cli and you'll be able to see the
881.839 -> different models
883.519 -> and you can just do correct operations
885.76 -> here i can select it i can delete it i
888.24 -> can pick a field i can update it and it
890.16 -> will automatically be updated
892 -> and then
893.76 -> if i want i can manage members and i can
896.8 -> invite people and they will have
899.04 -> different roles depending on what i can
901.68 -> do so i can say invite user
903.76 -> and i can give them a role if they're an
905.92 -> admins or they can do whatever they want
907.68 -> if they're a developer so they have read
909.36 -> and write access
910.88 -> and uh yeah like you can see the
913.92 -> different roles or like the viewer
916.079 -> viewer only
917.36 -> and i can also
919.199 -> delete the project if i want let's just
921.68 -> cancel
922.72 -> and yeah so like i'm working i already
925.199 -> i'm working with physical sql locally so
927.76 -> i have uh i'm on a mac so
930.88 -> if you go to
932.16 -> postgres.app
934.8 -> i believe wait no there's an extras
940.8 -> right yeah so episcopal app if you're on
942.88 -> a mac you can easily download it and
944.8 -> install it and you can easily just have
947.44 -> a local physical sql database
949.6 -> and yeah so like to connect to prisma to
952.56 -> connect to a database you will need a
955.04 -> connection string
956.399 -> so the connection string
958.72 -> you'll find you you have to include it
960.48 -> in your
961.759 -> environment variable file so like it's
964 -> env
965.04 -> and in the prisma schema we're loading
967.759 -> it from a from our
970.32 -> amv file with a variable called database
972.72 -> url
973.759 -> so if i actually open up my
977.6 -> env file
979.04 -> i'll see
980.72 -> this so i already updated my
984.079 -> connection string
985.44 -> uh with my local fizzger sql
989.44 -> connection string so this connects to my
991.199 -> local database and this is just the
993.68 -> username of my
995.12 -> my laptop and it's a localhost and this
998.32 -> is the port
999.759 -> and yeah so like this is how you would
1001.839 -> connect
1002.88 -> to the database now so far my database
1006.399 -> is empty so i actually
1009.04 -> my database is not aware of all of these
1010.8 -> models that i defined and if i go to the
1013.519 -> hosted database it's the same thing so
1016.48 -> what we need to do is actually create a
1018.079 -> migration uh so a migration is
1020.72 -> you creating uh the different
1024.319 -> tables and columns in your database so
1028.72 -> to do that i you just need to say npx
1032.959 -> prisma
1034.559 -> db push
1035.76 -> now there's also
1037.52 -> mpx prisma migrate
1039.6 -> which is a different command and like
1041.28 -> the only difference between db push and
1042.799 -> press of migrate is that with prismadb
1044.72 -> push you don't
1046.24 -> generate a migrations history so a
1048.319 -> migration history is a file
1050.64 -> that specifies kind of like it's kind of
1053.12 -> like it's a history it's different
1054.799 -> checkpoints for your database and how it
1057.6 -> evolved
1058.799 -> but we don't need that right now so i
1060 -> can just say prismadb push and after i
1063.039 -> wait it said that it loaded my
1065.28 -> environment variable from the amv and my
1067.84 -> schema also as well
1070 -> and yeah and that's
1072.64 -> really it and if i go to my database
1075.28 -> i'll see that i'll have the different
1076.88 -> rows and columns created
1079.52 -> and it also generated for me prismacline
1081.36 -> which we'll get to in a sec so if i say
1083.36 -> npx prisma studio
1088 -> this will open
1089.44 -> for me what is kind of like the data
1091.84 -> browser but
1093.679 -> it's locally here now i already have uh
1096.32 -> some data in my database i thought my
1098.799 -> database was empty but
1100.48 -> apparently it's not
1101.84 -> and yeah i'll show you how to
1106.08 -> populate this database so if we wanted
1108.16 -> we could have said add record added a
1111.2 -> name an email and a message and if for
1114.16 -> example if i try to add a record and i
1116.559 -> didn't provide the data
1118.08 -> like
1118.96 -> it shouldn't work i believe this won't
1121.36 -> work because these fails are required
1123.12 -> are i did i hit save yeah i don't know
1125.36 -> maybe it's about but yeah so
1128.48 -> this is
1130.16 -> uh one way to add data but there's
1132.4 -> another way and is to create your own
1134.32 -> seating script
1135.6 -> so for a seating script what it means is
1137.679 -> this is a script that will run that will
1140.08 -> populate the database
1142.32 -> and actually before i continue i feel
1144.72 -> like i've said a lot of stuff if anyone
1146.24 -> has
1148.24 -> like any questions feel free to just
1150.72 -> send them
1152 -> and let me just check
1154.4 -> okay there are no questions yeah so
1157.12 -> anyway um
1158.64 -> where was i seating the database so if
1160.799 -> you want to see your database
1162.72 -> what you would do is you just create a
1165.039 -> new file i call it c.t.s
1167.76 -> i'm creating it uh like in my prisma
1170.799 -> folder but you don't have to
1172.88 -> and inside this file you will write
1176.88 -> prisma queries
1178.4 -> and these queries will um
1181.84 -> well populate the database so to
1183.919 -> actually get started i can just say
1185.84 -> import
1187.76 -> prismaclient
1189.919 -> because i have it installed okay i don't
1192.08 -> have an insult
1193.36 -> so if i say let me just start my server
1197.2 -> check
1198.799 -> yeah i have it installed and it was
1200.32 -> installed automatically when i ran
1202.72 -> db push so if i say import
1207.919 -> prismaclient
1211.36 -> from
1213.28 -> personal clients
1215.2 -> and then i want to instantiate personal
1217.12 -> clients so i'll just say
1220.08 -> cons prisma
1222.159 -> equals new
1224.88 -> where's my client
1228.4 -> so now if i actually want to create any
1231.2 -> queries i can just say now prism by
1233.52 -> default
1234.64 -> you have to
1236.64 -> call it inside
1238.559 -> like an asynchronous function so say for
1241.28 -> example i say const main
1244 -> this is going to be
1246.24 -> let's export it
1247.6 -> cons main
1249.12 -> equals a function
1252.08 -> and let's make it async
1256.559 -> and i can then say
1258.559 -> cons
1260.84 -> feedback equals await
1265.36 -> prisma
1266.64 -> and then
1267.76 -> since um prisma is like an
1270.72 -> auto-generated for me types i can just
1273.919 -> say dot and i can see
1276.48 -> all the different operations that i can
1278 -> do and i can see the models that i have
1280.799 -> in my schema operator so i have a
1282.559 -> feedback model and that's why i have it
1284.96 -> here so i can just say hit enter
1287.52 -> and again i can see all the different
1289.6 -> operations that i can do so say i want
1292.32 -> to find many this will return
1295.12 -> all of the records in my feedback table
1297.919 -> and
1298.96 -> when like when i read here i can see
1301.44 -> that
1302.64 -> there's documentation
1304.799 -> inside my query i can see okay kind of
1307.679 -> like what i can do with examples so find
1310.64 -> many doesn't require any
1312.799 -> uh any parameters but if you want you
1315.44 -> can pass maybe like a parameter to
1317.679 -> return only 10 items maybe you want to
1320.48 -> filter
1321.6 -> by using like the select
1324.24 -> field
1325.44 -> so yeah you can do that
1328 -> and yeah so like if i want to see my
1330.72 -> database all i need to do is actually
1334.08 -> just go to my package.json and i already
1337.44 -> have this defined
1338.88 -> as to create this
1340.96 -> to add this object so you have the
1343.12 -> prisma key and inside it you'll have um
1346.96 -> like um the key also you have this field
1349.679 -> called seed
1351.12 -> and yeah i'm just using ts node which i
1354.559 -> also installed it this will allow me to
1356.799 -> run typescript files and i have this
1359.28 -> dash 0
1360.72 -> module common js this is required
1363.039 -> because i'm working with an xjs
1366.4 -> if you're not using xjs you would just
1368.08 -> say ts node
1369.679 -> prisma
1370.72 -> c dot ts or you can actually run any
1373.28 -> type of script that you want it doesn't
1374.96 -> have to be a typescript file it can be a
1377.679 -> bash script or a postgresql script or
1381.36 -> whatever you want so
1382.96 -> you're very so like it's up to your room
1385.679 -> and
1386.559 -> yeah so like if i actually want to run
1388.08 -> the seating script it will fail because
1391.2 -> i think
1392.64 -> actually it won't fail but it won't make
1394.72 -> a huge difference because
1397.12 -> um
1398.64 -> like let's actually define some data so
1400.24 -> if i say
1402.4 -> i don't actually need to wait let's say
1404.72 -> const
1407.12 -> i don't know new feedback
1410.08 -> equals weight
1412.08 -> prisma
1413.919 -> dot
1414.799 -> we want to tell feedback
1417.919 -> dot create
1420.08 -> and
1420.96 -> i automatically get an error here
1423.12 -> because create requires one argument and
1426.72 -> it's an object
1428.96 -> where you specify
1430.96 -> uh data so like uh what so like the
1434.4 -> parameters that we need to create a new
1436.48 -> item so i can just say
1438.72 -> here i have the email and message
1440.48 -> required and that's why i also have the
1443.2 -> red squiggly line
1444.88 -> but yeah it's just it said not
1446.4 -> assignable just have typescript errors
1448.48 -> but if you scroll down you can actually
1450.88 -> you'll be able to understand okay what
1453.279 -> is needed
1454.32 -> um
1455.44 -> yeah so if you say data and actually to
1459.039 -> show
1459.919 -> like autocompletion i'm just hitting
1461.84 -> control space so if i say email uh let's
1464.72 -> say it's just test
1467.2 -> gmail.com this is my favorite testing
1469.52 -> email
1470.559 -> and then i can say message and i can say
1473.52 -> hello from seeding script
1476.88 -> and then
1478.48 -> what i want to do now now i don't have
1480.4 -> any errors and that's because the name i
1483.36 -> made it optional so in case someone
1485.36 -> doesn't want to provide their name i can
1487.36 -> just say name
1488.799 -> and last name
1491.279 -> and i can hit save so now i believe if i
1494.48 -> run the script it should work
1496.96 -> and i say
1498.4 -> mpx prisma dvc
1503.28 -> [Music]
1504.96 -> we'll see if it executes
1509.039 -> and the z command has been executed now
1511.44 -> if i actually want to
1513.36 -> see if it ran i could just open up npi
1516.64 -> prisma studio i can say mpx christmas
1519.919 -> studio
1525.2 -> and
1526.24 -> it should be added
1528.559 -> here there's another one wait
1530.799 -> it hasn't been added
1532.64 -> i think it might not have worked
1535.2 -> which is weird
1537.2 -> yeah anyway um i'll fix it later we'll
1540.48 -> see if it's like um
1542.48 -> uh
1543.36 -> wait i think i know why it didn't run
1545.76 -> actually i think there's an issue
1548.4 -> like
1550.96 -> i think it should return i didn't
1552.799 -> provide the feedback type and it's
1554.32 -> required oh yeah there's a default value
1556.32 -> but yeah i'm not sure so anyway we can
1558.96 -> move on
1560.72 -> and let's go back wait wait there's a
1563.12 -> question i had a question the prism idea
1564.64 -> look very familiar to graphql
1566.72 -> are both prisma and graphql related not
1569.52 -> at all so prisma is only um kind of like
1573.36 -> you only care about the database layer
1575.2 -> with prisma grapheol is for your api
1578.48 -> so with graphql
1580.32 -> what you'll have is
1582.159 -> you'll have your graphql schema and you
1585.6 -> in the schema you define the different
1587.84 -> um how you define the different queries
1590.4 -> and mutations and for each query and
1592.32 -> mutation what will happen is you will
1595.279 -> define the implementation details so
1597.52 -> you can then fetch data from a database
1599.679 -> or to
1600.96 -> um
1602 -> or like a third-party api or something
1604.4 -> like it depends really um so you can use
1607.12 -> prisma with graphql but prisma on its
1609.76 -> own is not related to graphql um it's
1612.64 -> it's just the database layer
1614.88 -> and yeah you can replace prisma with
1617.6 -> maybe like i don't know raw sql another
1619.84 -> orm like whatever you want uh but yeah
1622.96 -> as they're just completely unrelated
1625.52 -> and then ali says should be inside quote
1628.559 -> i don't think so i don't think it's an
1630.64 -> issue
1632.24 -> like
1634.159 -> yeah you don't actually have to include
1636.48 -> it in quotes it should be not within
1638.399 -> quotes
1639.6 -> yeah that doesn't matter i think i have
1641.76 -> the seating script for the final thing
1644.96 -> you just copy it
1649.84 -> this one
1653.2 -> and like instead of exporting
1658.48 -> so instead of like there's an async
1660.559 -> function and you call it i think maybe i
1662.399 -> should not have exported it yeah like
1664.64 -> now if i actually save
1666.799 -> and i run i can say mpx prisma
1670.72 -> dbc'd
1674.48 -> and it should run successfully without
1676.24 -> issues and
1678.32 -> let's say npx prisoner studio again
1682.559 -> i should have like the same data
1685.279 -> duplicated
1686.799 -> so i'm just bring it to this tab and it
1688.64 -> worked so now i have
1690.96 -> like the same
1692.32 -> uh data so like i already ha i already
1694.799 -> ran the seating script before we started
1696.72 -> so yeah well like now i've run again so
1699.76 -> you can see this one and this one are
1702.799 -> identical
1704.799 -> and yeah so like now you learned so far
1707.84 -> what is prisma how to
1710.559 -> create your own database schema using
1713.6 -> your the personal schema language
1716.08 -> and you also learned um
1718.72 -> like what the this is like next to yes
1721.12 -> and what makes it special
1723.279 -> and kind of so like it has file based
1724.96 -> system routing but also there's just
1726.72 -> more stuff that we'll be covering in a
1728.48 -> bit
1729.36 -> and you also learned how to seed your
1731.2 -> data and you also
1733.279 -> saw how you can easily provision a
1735.12 -> database using uh prismacloud you also
1738.32 -> like prisma data platform and you also
1740.88 -> saw there's a lot of stuff so if at any
1743.44 -> point you feel like asking questions now
1745.6 -> is the time um like i'm looking at them
1748.64 -> right now
1750.24 -> stuck
1753.039 -> and let's go back to my editor
1755.919 -> and
1756.96 -> there aren't
1758.72 -> questions yet okay cool so now we
1761.039 -> actually have
1762.559 -> the database set up
1765.039 -> what we actually need is to
1767.679 -> create prismaclient
1769.84 -> like instantiate it so the ceiling
1771.76 -> script runs when you call dbcd but we
1775.84 -> want to create
1777.76 -> like a client a prisma client that we
1780.32 -> can use kind of like across our app
1782.399 -> uh so to do that i'll just create a lib
1785.52 -> folder this is where i define
1787.919 -> uh kind of like anything so like if i
1790.559 -> want to initialize something i'll do it
1792.24 -> in this folder so maybe i don't know i'm
1794.96 -> initializing a graphql client or during
1796.96 -> this folder or prisma i also do it here
1799.76 -> stripe whatever i'll do it in this
1801.279 -> folder so i can just say prisma.ts
1805.12 -> and
1806.08 -> while you can just say import prisma and
1808.72 -> then create a new client and export it
1810.48 -> and just import it everywhere
1812.24 -> with nexjs there's just one tiny
1816.72 -> requirement that you need to do so i'll
1818.32 -> just copy the script here
1820.399 -> and so like next gs um what's uh cool
1824.399 -> about it is that it also it has fast
1826.08 -> refresh
1827.279 -> and
1828.159 -> with prismaclient you're connected to
1830.32 -> the database so what happens every time
1832.559 -> you hit save a new connection gets
1834.88 -> created which like exhausts your
1837.12 -> database so the solution is when you're
1839.6 -> in development is to attach prismaclient
1842.559 -> to
1844.159 -> so like the global
1846.799 -> node.js object
1848.48 -> and that's what we're doing here so
1849.919 -> we're saying declare global and then
1851.84 -> prisma and this can be either be
1853.6 -> prismaclient or undefined
1855.919 -> and then we're exporting prisma so
1858.32 -> either we assign a global law prisma or
1862 -> a new prisma
1863.679 -> and what we're doing is we're just
1864.88 -> checking if we're not in production and
1866.799 -> if we're not in production
1868.399 -> then global.prisma will be prisma but if
1871.76 -> if we are if we are not in production
1874.32 -> then we'll create a new prisma client
1876.72 -> and like when the app is deployed
1879.279 -> so now that that's done
1881.519 -> now let's go let's talk a bit more about
1883.6 -> next.js and what makes it special so
1885.36 -> with nexjs there are different ways to
1887.519 -> fetch your data uh if you actually go to
1890.159 -> the nexus docs there's a whole page on
1893.6 -> it and there's data fetching so with
1896.24 -> nook.js you can fetch data at different
1899.279 -> times so like you can fetch data at
1902.399 -> build time this is using getstatic props
1905.279 -> it's a static generation this is useful
1907.36 -> if you want if you have pages that are
1909.36 -> just static and they won't change so
1911.6 -> instead of making a request
1914 -> to like the server to render these pages
1916.88 -> you don't need to do that you just do
1918.72 -> that at build time for example a blog or
1921.519 -> like a marketing page you would use that
1924.48 -> now
1925.44 -> um you can also like not just so like if
1928 -> you want to build let's say if you have
1930.559 -> a blog with multiple pages you won't
1932.559 -> create like each individual page as a
1936 -> file
1936.48 -> [Music]
1938.08 -> someone i think you have to mute
1939.6 -> yourself
1949.44 -> and okay cool so anyway uh also most
1953.279 -> likely go over the hour or like but yeah
1956 -> we'll see and yeah so like with uh you
1958.96 -> can fetch data uh using guest static
1961.279 -> props you can also do server side
1962.72 -> rendering where you fetch data and then
1965.679 -> you return
1966.96 -> so like when you make a request to the
1969.2 -> server the page gets rendered on the
1970.96 -> server with
1972.399 -> um like the data inside it so you can
1974.96 -> use prisma and like guest server side
1976.72 -> props and we'll see how
1978.64 -> and
1979.519 -> yeah so like this is really it and you
1982.799 -> can also do something else where you can
1985.6 -> define api endpoints using next yes so
1988.399 -> you can say uh here you can define this
1991.519 -> folder it's called api
1993.44 -> and each file inside this api folder
1997.12 -> automatically becomes an endpoint so
1999.84 -> what we want to do is just say create
2002.64 -> dot yes so so next yes what it will do
2005.44 -> for us it will create an api endpoint
2007.519 -> for us and we can execute server side
2009.6 -> logic in this file so what this means is
2012.32 -> we can say import
2014.72 -> prisma
2015.84 -> from our lib folder and then we can
2018.88 -> define a function it's in a synchronous
2020.48 -> function we can say export
2022.559 -> default
2023.679 -> function
2025.039 -> it has to be
2026.559 -> async
2028.159 -> and let's call it handler
2030.24 -> it takes a request and a response
2032.72 -> if you're familiar with um express this
2035.679 -> is very similar
2037.6 -> and then inside this function we can say
2039.519 -> like try
2041.2 -> then catch
2043.44 -> and in case there are any errors
2046.72 -> and
2047.679 -> yeah and like here we can say in case
2049.839 -> there's an error we can say res
2052 -> dot status
2053.599 -> maybe like make it 400
2055.839 -> and then say
2057.359 -> json
2058.56 -> and
2059.44 -> pass in the error
2061.28 -> if we want
2062.72 -> so this is uh in case there's any errors
2065.679 -> and then
2066.72 -> we can fetch the
2069.04 -> like in the same way this is an api we
2071.52 -> can get the
2073.28 -> uh kind of like what the name from the
2075.119 -> front end the email
2077.2 -> uh the feedback
2078.96 -> type
2081.76 -> and we also can get what's
2084.639 -> the message
2086.159 -> from the requests body
2090.079 -> so that's how i do it and then i can
2092.48 -> just say
2094.159 -> um
2095.2 -> what do we want we want to create so i
2097.28 -> can just say
2098.8 -> um
2100.24 -> const
2101.76 -> maybe call it
2103.76 -> submission
2108 -> equals await
2110 -> prisma
2111.359 -> dot feedback dot create
2115.28 -> and again pass in my data object
2118.72 -> and then include an email i can so this
2121.359 -> will be the email coming from the
2123.04 -> request
2124.16 -> and again the name
2126.24 -> the feedback type
2128.32 -> and
2129.2 -> the message
2131.359 -> so
2132.16 -> yeah this is the submission
2134.32 -> and this will run and actually we don't
2136.96 -> need to store anything since this is
2139.04 -> just creating
2140.88 -> but
2142 -> like you say if if this endpoint you're
2143.92 -> reading
2144.8 -> data from prisma you would want to
2146.64 -> return the data in the response but we
2149.119 -> don't need to do that we can just say
2151.28 -> res.status
2153.68 -> 200 so like it's successful and then
2156.48 -> send a message that says
2159.44 -> constitute a message
2161.359 -> and say
2163.28 -> submitted
2166.24 -> successfully
2168.64 -> so this is an api endpoint and now from
2171.04 -> our front end what we can do is just
2173.52 -> call this endpoint using fetch and what
2175.839 -> will happen is
2177.28 -> well it will execute and we can save
2179.599 -> data in the database so if i go to my
2182.96 -> pages go to index
2185.599 -> and let's close this so i already have
2188.32 -> so like react hot toast this is host
2190.64 -> library that will show uh the message
2193.68 -> out so like as we're sending it uh this
2196.64 -> is just like extra for me like i like
2199.839 -> making things look pretty
2201.599 -> um so we have a question
2204.72 -> shouldn't you disconnect stop the
2206.24 -> connection after every query
2208.56 -> no so like with the seating i'm only
2211.44 -> like this is just part of the seating
2212.8 -> it's actually not required prisma does
2214.56 -> it for you
2215.839 -> and so you don't need to explicitly call
2218.24 -> it and then says prismaclient runs only
2220.24 -> on the server yeah so like prismaclient
2223.44 -> you would use it to access your database
2226.24 -> and to access your database you have to
2227.76 -> do that on the server
2229.68 -> otherwise technically anyone can access
2232.079 -> your database and you don't want that
2235.52 -> and yeah because well your database
2238.8 -> you have your environment variable which
2240.4 -> is loaded on the server
2242.4 -> and you make a request to your database
2244.24 -> so that's why prismaclient runs only on
2246.32 -> the server
2247.44 -> and yeah and like
2249.44 -> even if like you're talking about react
2251.28 -> there are there's like react server
2252.8 -> components uh which is has
2255.44 -> been announced i think early this year
2258.4 -> um and i wrote an article about it and
2261.44 -> like with reaction for components the
2263.44 -> components are rendered on the server so
2265.839 -> then using react server components you
2267.28 -> can use prisma but again it's on the
2269.2 -> server so you can't call prismaclient
2271.2 -> from your front end otherwise
2273.04 -> technically anyone can call it and you
2275.2 -> don't want that
2276.48 -> and yeah so like i have this
2278.64 -> asynchronous function it's called create
2280.88 -> and it takes a parameter called data and
2283.599 -> this data comes from the on submit that
2286.24 -> i have on the form so
2289.119 -> to remember if i go to
2291.68 -> my index route
2293.44 -> it's not running anymore so let's
2295.119 -> actually run the app
2298.56 -> and say npm
2300.8 -> run dev
2304.24 -> it's running
2306 -> and we refresh
2308.8 -> so
2309.76 -> [Music]
2310.88 -> like this form when i click submit i
2314.16 -> have like everything required i will
2315.76 -> show form validation
2317.28 -> but what will happen is when i fill all
2319.839 -> these forms and i submit i will have
2322.8 -> this data available to me uh this is
2325.04 -> because i'm using uh react hook form and
2328.64 -> it's it's a super nice library for
2330.079 -> working with forms
2331.839 -> and yeah and what i'm doing is on in the
2335.359 -> on submit uh handler i have i'm calling
2338.72 -> like this toast.promise which will show
2341.04 -> the toast as i'm sending as i'm
2343.44 -> submitting the data as just nice user
2345.68 -> experience and i'm calling this create
2347.52 -> function here
2348.72 -> so in this create function what i will
2350.48 -> do is i will add the logic for
2353.68 -> fetching the data from my endpoints
2356.4 -> and just one sec okay so i'll be just
2360 -> using the fetch api
2361.52 -> because this is just
2363.359 -> submitting data so i can just say fetch
2366 -> it takes a url so let's just write the
2368.32 -> full url i'll compost colon 3000
2372.24 -> yeah that's correct slash api slash
2374.64 -> create
2376.4 -> and then what i want since this will be
2378.4 -> a post request i actually want to pass a
2380.48 -> parameter so this is an object and
2383.839 -> inside the object there's the body
2386.24 -> and this body takes also an object so
2388.96 -> i'll just say
2390.359 -> json.stringify
2392.32 -> and say data
2395.599 -> and also
2397.119 -> requires as
2399.44 -> method will be post
2401.52 -> and then the final thing is the content
2404.16 -> type so specifying the headers
2406.56 -> and say
2408.96 -> content type
2411.28 -> and that it's json so i'll just say
2414.16 -> application
2415.839 -> slash json
2418.079 -> and
2418.96 -> yeah this should work so if i hit save
2422.079 -> and i go back and i fill this data let's
2425.2 -> make it something that we can easily
2426.64 -> notice put on like caps lock and say
2430.56 -> city js workshop
2433.2 -> and this is the name
2435.839 -> and we can say email is cityjs.conf.org
2441.839 -> i don't know i don't think that's a real
2443.44 -> email and let's say the feedback is
2447.04 -> let's make it a feedback and just say
2450.24 -> um
2451.2 -> i don't know
2452.48 -> this was
2454 -> awesome
2456.96 -> but then uh when i hit submit
2460.96 -> it should work
2464.72 -> right i specify this feedback
2470.16 -> and i call the function let me check so
2472.88 -> i have this create function
2474.72 -> i have on submit and
2478.48 -> it should work so let me actually check
2480.48 -> the network tab
2482.16 -> live debugging you know
2484.48 -> uh and i'll just
2487.28 -> and let's go to
2490.079 -> the network tab
2492.319 -> so let's refresh
2495.119 -> refresh right
2497.119 -> and we'll be able to see let's say you
2499.52 -> want
2501.119 -> and then test edge email
2504.319 -> doesn't matter if there's a typo
2506.64 -> and let's say message is like
2508.96 -> hi
2510.48 -> and then someone will add submit
2513.68 -> and yeah feedback submitted successfully
2515.359 -> i guess
2516.72 -> the issue was i needed to refresh i'm
2519.119 -> not sure so if i say feedback and
2523.28 -> i actually haven't
2525.04 -> fetched data from the database here this
2527.2 -> is just static so let's actually do that
2528.96 -> right now
2529.92 -> so
2531.2 -> inside
2533.2 -> like we'll keep the suspense going like
2535.359 -> did it work or did it not work
2537.2 -> so if i go to the feedback page
2540.24 -> what will happen is i'm just checking
2541.599 -> the time
2542.8 -> where where we have to
2544.72 -> and if we go to
2548.56 -> like right in the beginning
2552.16 -> i'm loading feedback here this is
2554.079 -> hardcoded from this folder and it's
2556.24 -> called data this is just an array where
2559.599 -> each item is a feedback and has a
2561.76 -> message and i'm showing our code of
2563.92 -> message because uh so that will able to
2567.2 -> know that okay this is uh hardcoded
2570.8 -> because in the database i had similar
2573.44 -> messages
2574.64 -> so now i can say
2576.96 -> um let's delete this stuff
2579.28 -> so with nexjs we mentioned different
2581.28 -> data fetching strategies
2582.96 -> uh we can create an endpoint and call it
2585.68 -> like feedback and make a request to it
2588.24 -> and get the response but then we'll have
2590.48 -> to deal with
2592.48 -> like states for so like loading states
2594.64 -> error states and we can use uh libraries
2597.44 -> for that so like there's react query
2598.8 -> there's swr which is created by uh nexjs
2602.88 -> like the team behind nexus versailles
2605.76 -> but we can actually inside each page you
2608.8 -> can do what is called get service high
2610.319 -> props so get server side props you can
2612.48 -> just say export const
2615.76 -> get server side props
2621.04 -> and it is correct equals async this is
2623.52 -> an asynchronous function
2626.64 -> and inside this function
2628.72 -> this is the logic that gets executed on
2631.44 -> the server so here you can do whatever
2633.52 -> you want you can make calls to a
2635.44 -> database
2636.72 -> to an api where the api has secrets and
2639.599 -> you don't want to expose these secrets
2641.52 -> uh but for us here uh we want to call
2643.76 -> prisma now get server-side props returns
2646.4 -> an object inside this object there's a
2648.64 -> props object and the reason it's called
2650.8 -> get service high props is that if you
2653.52 -> make a request on the server
2655.839 -> you fetch your data and then this data
2658.96 -> goes back and you can access it as props
2662.48 -> like what we'll do is we'll just say
2664 -> feedback
2665.28 -> right here and what will happen is we'll
2667.44 -> be able to render it like
2670.079 -> so like we'll be able to render data
2671.76 -> that is fetched from the database like
2673.68 -> that so like this is really nice
2675.2 -> experience um
2677.28 -> and we don't need to kind of like make a
2679.68 -> request and wait for it to load and like
2681.76 -> deal with states and all that stuff
2683.76 -> so
2684.96 -> we can just say here uh we can say
2689.44 -> this is like all feedback so let's say
2691.04 -> cons feedback
2692.64 -> equals weight
2694.8 -> prisma we have to import it
2697.599 -> it's not showing as an import
2700.48 -> what's that so if i go to the top and i
2703.2 -> say
2705.359 -> import
2706.72 -> prisma
2707.839 -> this is the one we instantiated
2710.079 -> beginning
2711.28 -> and
2712.88 -> let's go back
2714.4 -> and say away prisma dot
2717.119 -> feedback
2718.48 -> dot find many
2722.8 -> and we don't actually want to have any
2725.52 -> parameters we can just
2727.52 -> leave an empty
2728.88 -> and we then want to return this feedback
2731.04 -> as props so we can just do that
2733.76 -> and if we hit save
2736.4 -> data should be fetched from the database
2738.319 -> and it should work
2739.92 -> let's hope it works
2742.4 -> so i go back and okay we have an issue
2745.359 -> reading from map i think we have just
2746.88 -> have to refresh
2748.72 -> okay so this error is very common for
2750.96 -> anyone using prisma
2752.8 -> for the first time with
2754.319 -> nexjs
2755.599 -> and what happens is with prisma we have
2758.8 -> a created ad and an updated field and
2761.119 -> nexus by default doesn't serialize dates
2763.839 -> so there are two solutions either you
2766.72 -> cannot install a library it's called
2769.68 -> super json
2771.04 -> this is this was created by
2773.68 -> the creators of blitz.js it's a
2775.2 -> framework that
2777.119 -> also actually uses prisma it's built-in
2779.119 -> but it's like it's built on top of nexus
2781.68 -> and comes with really cool features you
2783.52 -> should definitely check it out
2785.119 -> but
2786.56 -> um yeah so like you actually we actually
2789.52 -> don't we haven't serialized dates so the
2791.68 -> solution like that we can do right now
2794.4 -> is just
2795.599 -> actually not return the dates from our
2798.4 -> prisma query so we can just say
2801.76 -> in five mini we can have this select
2805.04 -> so select when you hover over it we
2806.8 -> should get some docs
2809.119 -> actually say select
2811.2 -> yeah so we can we can actually see
2814.56 -> what type of data we want to just well
2817.359 -> select so if i say
2819.68 -> i want the email
2821.359 -> and we have to say true
2823.68 -> and we can say also
2825.839 -> message
2827.28 -> and you just have to say true
2829.28 -> and we can just say the name
2831.52 -> also true
2832.96 -> and we also want the feedback type and
2835.52 -> we'll include it so true so now when we
2838.16 -> hit save and we refresh and go back
2841.44 -> and to 3000 and it works
2845.92 -> so like this is the one that i just
2847.839 -> submitted so now it works
2850.8 -> and yeah let me just check if there are
2852.88 -> just any questions this is a moment of
2855.2 -> celebration
2856.839 -> and there aren't any questions if you
2859.76 -> have any questions feel free to ask um
2862.16 -> but yeah it's like so far like just to
2864.319 -> recap what we did yeah it was awesome
2867.04 -> thanks a lot and so what we just did is
2870 -> we created a full stack app i have a
2871.599 -> starter but that should get started with
2873.2 -> nexus you can just use
2875.119 -> um the nexus cli
2877.599 -> and
2878.559 -> yeah thanks everyone first time you see
2880.72 -> prism in action cool well uh hopefully
2883.599 -> you're convinced for like how easy it is
2885.599 -> to get started with it
2886.96 -> so i just have a nexus app
2888.96 -> that i set up i installed prisma i
2891.2 -> defined my database models and
2893.76 -> what happened was uh then i just created
2896.559 -> an api endpoint using xjs and or i can
2899.599 -> just make a request right away using a
2901.359 -> server-side props
2902.72 -> and
2903.599 -> yeah that's how easy it is to just have
2905.839 -> a full stack app now if you want to add
2908.319 -> authentication you can just install next
2910.8 -> auth so if you just google next auth
2914.48 -> it's like next.js.org
2916.4 -> they currently have the beta v4 and the
2918.72 -> documentation is set to v4 so when you
2920.72 -> install it make sure that you either
2922.559 -> install the beta or you're on like the
2924.48 -> bright version of the docs but next auth
2926.48 -> is just very easy to add authentication
2928.72 -> so if i actually just go to get started
2931.44 -> and you go to just an example
2934 -> all you need to do is like in your api
2936 -> folder you would go to pages api and
2939.599 -> create a new folder you call it auth and
2942.48 -> inside this folder you create a new file
2945.04 -> and call it just
2946.48 -> off like that
2948 -> off leave great next off
2951.92 -> and it's three dots
2954.64 -> dot yes let me just double check
2958.48 -> and yeah it's like
2960.48 -> this
2961.359 -> and make sure you don't
2963.44 -> do any typos because i do lots of typos
2966 -> as you can see
2967.44 -> but yeah so this is why you would do it
2969.68 -> you can also use it with prisma there's
2971.44 -> a prism adapter so if you want to do
2973.359 -> session-based authentication and store
2975.68 -> your users in the database you can do
2977.76 -> that so if you actually go to
2979.92 -> providers no not providers adapters
2983.119 -> and prism adapter
2985.04 -> you need to install the prisma adapter
2987.04 -> and you also need to have prismaclient
2989.44 -> along with prisma plus next auth
2991.119 -> installed
2992.16 -> and you then configure it configure it
2994.48 -> here and yeah you can then you have
2997.359 -> different providers you can use google
2998.96 -> github you can use just there's just so
3001.2 -> many
3002.079 -> like
3002.88 -> all of these i think yeah there's just
3004.72 -> there are a lot of providers you can
3006.079 -> even do uh magic link uh you can also do
3008.96 -> lots of cool stuff
3010.319 -> so
3011.28 -> yeah and i think
3013.599 -> i might like let's just add something
3015.839 -> once should you use the legacy one uh no
3017.92 -> you shouldn't and so like i believe
3020.72 -> kai you're referring to the
3022.96 -> um what's it called like the adapter no
3025.599 -> you should use the updated one not the
3027.359 -> legacy one
3029.119 -> and
3030.559 -> yeah so like the final thing that i
3031.68 -> wanted to mention and
3033.76 -> we can wrap up is if you go to
3037.28 -> like i have this folder that i haven't
3038.96 -> mentioned and it's called feedback and
3040.48 -> then there's this file it's called id so
3043.52 -> this is something that is just very cool
3045.52 -> about nexas and it's dynamic routing so
3048.4 -> if i actually go to here and i want to
3051.52 -> be able to just let's say this message
3053.92 -> was just super long and a user had just
3057.119 -> you know they just wanted to say how
3059.68 -> much they love this app so what will
3062.079 -> happen is we want to be able to just go
3065.2 -> to
3066.24 -> this
3067.44 -> individual feedback item
3069.359 -> and
3070.4 -> what we want is like so like each
3071.92 -> feedback item it has an id so what i
3073.839 -> want is when i say slash feedback slash
3076.48 -> id like a number for example so let's
3078.8 -> say one
3080 -> i want to display
3081.44 -> one of them so like i already have the
3083.44 -> setup so like it always returns hi there
3086.96 -> i'm a demo message
3088.4 -> but if i go back
3090.8 -> and
3092.24 -> i open this file so this is just a
3094.88 -> regular javascript
3097.2 -> like function we've just had like a
3099.119 -> regular react component and what's going
3101.44 -> to happen is well this
3104 -> depending on the id that i pass
3107.44 -> and i will just have a different page
3110.8 -> based on each id so like
3113.04 -> the id like so like i can i get the id
3116 -> from
3117.04 -> like the
3118.24 -> actual
3119.2 -> like parameters so when someone actually
3121.359 -> says okay feedback slash whatever id i
3124.4 -> can get that id
3126 -> and then
3127.04 -> look in my database using prisma to
3128.72 -> actually fetch that record
3130.559 -> so i can say someone open their
3132.4 -> microphone do you mind muting
3136.16 -> yes thank you so uh when what happens
3140.24 -> like i can get uh from the
3142.96 -> the parameters from the request so like
3145.359 -> from a url and then i can just call
3148.24 -> prisma here to return
3150.4 -> the individual feedback by its id like
3153.359 -> in just an individual row and then it's
3155.28 -> available to me as a prop and i can just
3157.599 -> see it so if i just say here um
3160.559 -> like what let's say const
3162.8 -> feedback item that's what i called it
3165.52 -> because i equals
3167.599 -> weight prisma
3169.359 -> dot feedback dot find unique this one
3172.8 -> returns an item by a unique identifier
3176.079 -> like for assets the id
3178.079 -> and you can see just an example here um
3181.28 -> you just provide a filter here and i'll
3183.119 -> be filtering by the id
3184.8 -> so
3185.76 -> if i just hit control you just say where
3190.559 -> and then you say id
3192.96 -> and i'm passing in the id
3195.119 -> from the context.params.id
3197.599 -> and
3198.4 -> that's really it and this will return
3200.559 -> the individual feedback item
3202.64 -> and you have to go yeah sure i'm
3204.079 -> wrapping up and then what will happen is
3206.96 -> i can just pass this feedback item
3209.44 -> like
3210.24 -> as a prop right here
3215.359 -> and
3217.04 -> yeah so like if i hit save
3219.839 -> and i have this feedback item coming
3221.28 -> from props
3223.52 -> and i can go back
3225.68 -> i'll be able to go to each one of those
3228.4 -> but they're undefined for some reason
3231.119 -> well like if i get if i can find the id
3233.2 -> so i click actually log this
3236.8 -> and feedback
3239.28 -> item
3244.48 -> and i go to
3246.8 -> just say i get the id from one of those
3249.52 -> here
3250.88 -> and i go to my feedback app
3253.599 -> slash
3254.96 -> id
3255.92 -> no
3258 -> didn't copy it wait one sec
3261.76 -> come on
3265.2 -> it's not copying for some reason well
3267.04 -> yeah so like what's gonna happen right
3268.319 -> now is if i just go to that id i'll be
3270.319 -> able to just load that item and yeah
3273.28 -> that's it so
3274.64 -> we kind of covered a lot of stuff and
3276.319 -> i'll be updating this uh repo right here
3279.04 -> with like all the steps so
3280.88 -> you don't have to worry if you're
3281.839 -> someone who just prefers reading uh you
3283.92 -> can just yeah like go through this repo
3286.72 -> and
3288.48 -> yeah thank you so much everyone for
3290.079 -> attending and watching if you have any
3291.76 -> questions
3292.559 -> uh feel free to ask
3296.559 -> one question this is oscar um i got the
3299.52 -> last 20 minutes because the timing was
3302.319 -> wrong that's why three people joined at
3304.88 -> 9 nine a.m
3306.319 -> um
3307.44 -> it said it was at 4 00 p.m greenwich
3309.839 -> time which was
3311.52 -> 9 p.m anyway but uh i got the last 20
3314.48 -> minutes and
3316 -> is a the recording available or what
3319.04 -> yeah this will be recorded i'm really
3320.319 -> sorry you dm me right
3322.48 -> yeah yeah you are now i'm really sorry i
3324.88 -> got confused also
3327.44 -> yeah
3330.319 -> and three other people just showing too
3332.799 -> so they missed it anyway yeah well um
3336.16 -> anyway if you have any questions feel
3337.599 -> free to land me any time uh sorry about
3339.68 -> like the whole time zones times decision
3341.04 -> is just confusing um but yeah like i'm
3344.319 -> at like on twitter i'm like uh this is
3346.24 -> mahmoud let me just underscore it and
3348.4 -> then the recording will be available in
3351.44 -> um
3353.599 -> where will be the recording available
3358.4 -> we will let you know after the thing
3360.72 -> sorry but we are very busy with the
3362.319 -> conference
3363.52 -> right right right yeah
3365.52 -> yeah for three of us we missed it but
3368 -> don't worry we will um
3369.76 -> don't worry
3371.28 -> okay no problem thank you
3373.44 -> you're welcome so thanks everyone for
3375.2 -> joining i'm gonna wrap up right now and
3377.28 -> if you have any questions if you reach
3378.72 -> out anytime and
3380.72 -> yeah thank you for joining
Source: https://www.youtube.com/watch?v=aim8Mk-ETK0