Next.js with AWS Amplify Admin UI Crash Course

in this video we're going to look at how to use the new amplify admin ui to build a backend for a next.js front-end the next.js app is going to be a blogging app with a detail view and a list view so we'll have a list of posts and then we want to drill down into the detail and this is going to be built using static site generation so we're going to be using ssg but we're also going to be taking advantage of ssr by implementing fallback routes and revalidation so hopefully you get a good idea of how to build with the new amplify admin ui this is going to be a fairly short video we're going to try to keep it at less than 30 minutes so i hope you learn a lot and you kind of build something based on what you learn here today so let's go ahead and get started so the first thing i'm going to do is go ahead into my terminal and create a new next app and while that is creating we'll go ahead and jump into the web browser and from here we'll go ahead and go to the aws console and we will jump into aws amplify so here in the console i will search for aws amplify and here when we um load up the amplify console in the menu we now have this new link for creating an app back-end this only used to exist for creating a front-end so this is kind of new so for the back end we want to say something like next blog and then we will click confirm deployment to go ahead and deploy the um the backend now this is going to kind of deploy our amplify app we still need to go in and model our data and we'll do that in just a second but for now let's go ahead and change into our new amplify blog this is our next app and maybe we'll open it up in our our text editor and get that ready because we're going to be writing some code of course in just a moment and we'll also go ahead and install whatever dependencies that we're going to need now we're going to be allowing users to create blog posts using markdown so we'll install react markdown and we'll also install aws amplify aws amplify whoops i need to add the add in there so with the aws amplify these are just going to be the apis to interact with the back end and react markdown is going to be um the way that we render the markdown and we're going to allow the users to create markdown and right now we're going to be using this new cms within the admin panel for writing the markdown which you'll see in just a moment so with that created um and we have our you know our project here up in our text editor we'll go ahead and open app.js and index.js these are going to be the two files that we're going to be working with and now we'll just jump back into our amplify backend and wait for this to finish deploying once our backend has been deployed we can go ahead and click on open admin ui to go ahead and create our data model and the data model that we're going to be working with is going to be for a blogging app so we'll have a post type and the post will have a couple of fields fields for the content and the title of the post so to go ahead and create that we'll go over here and click on content and we'll click create data model for the data model we'll click add model the type is going to be a post we will add a field for a title and then we will add a field for content and that's really all we need um this is not going to be an authorized api so we don't have any way to kind of deal with user information at the moment but since this is going to be public we want to go ahead and maybe add some rules to allow people to only read and create because we don't want anyone to be able to delete unless they are an admin here in the admin panel so i'll go ahead and click on this post type itself which will open up these options here and for the rules i'm going to uncheck update and i'm going to uncheck delete this way people can only create and read and if you want to update and delete you have to kind of be an admin so to save and deploy this i can go ahead and click on save and deploy and then i'll click deploy and this will go ahead and deploy the back end and once this is done deploying we will go ahead and jump it back into our next app and start writing some code once the api has been deployed we can now start interacting with in our next app so one interesting thing is that we can actually click here into local setup instructions and kind of see how to pull this app down into our next app so there's two things we want to do we want to go ahead and pull down the app itself which is going to give us some ways to interact with the back end and then we also have code snippets here for each model that we've created and our example we only have a post type so here we can see operations for all the different crud operations so create read update and delete so the first thing i'll do is i'll click here and i'll go back to my terminal and i'll just paste that here and this will say amplify pull with the app id and the environment name and this allows us to then sign in if we were a different user so let's say that we were a user that was outside of this actual original account this would allow another developer to kind of come in and and pull this app down so once we do that we can walk through the setup instructions so i'll choose the text editor is visual studio code javascript and react for a next app the the source directory is actually the root directory so i'm going to change that from src to just the root and then i can accept the rest of these defaults and then next i will um given be given the option to whether i want to modify this back in so you know it's up to you but um in this example i'm just going to say no because mom updates are going to be made through the admin ui so after we've done that we'll see that we have a couple of new things that have been pulled down one is this models folder and one is this aws exports.js both of which we will be using in just a moment so let's go ahead and open our next app and we're going to go into app.js and configure amplify so typically you would just import amplifier from aws amplify you would import your configuration from the aws exports file in this example it's actually going to be up one directory here in aws exports and then you would call amplify.configure passing in the config now in this example though since we're working with next.js we want to spread over the config whoops and then we also want to set the ssr flag to true because we will be taking advantage of some ssr support by enabling fallback routes so that is all you really need to do as far as the configuration process when we're interacting with the apis we'll also see how we can kind of make those apis ssr aware in just a moment now the next thing we might want to do is query for post so to do so i'm going to go ahead and clear out a lot of this boilerplate here and the the thing i know that i'm going to need is going to be the apis from react for managing state so i'll go ahead and import those so we'll go ahead and import from react we're going to import use state and use effect whoops so we have use state and use effect and we're going to be working with an array of post so i might go ahead and create a post array and i'll have a set posts and set that to use state with an empty array and then we'll have a use effect hook and use effect is what we're going to be calling the api to go ahead and fetch those posts now we'll have a function called fetch posts that we'll go ahead and create here we'll make this async and this is going to be where we interact with our backend and then once we have our posts we might say posts.map and then for each post we might return like a div and we might have something like post.title now what we're going to need to do is navigate to this post and that's going to be how we kind of do the dynamic page generation so to do that and also just to actually drill down into a single item view for ssg let's go ahead and import the link from next link and then using the link we can wrap our actually we don't even need a div we can just say and an anchor tag whoops and then we'll just wrap the anchor tag like this and then for the link we want to have an href and this is going to be to the actual post that we're going to be working with in this example it's going to be something like slash posts slash id and i think we can just do something like post dot id and then this will um allow us to kind of hyperlink to the posts and of course we we don't have this post directory we don't have this file yet we're gonna be creating that in just a moment but we're kind of just setting up the main list of posts so to kind of fetch these posts let's go back into the amplify admin and i'm going to click on query here and i'm going to copy the imports to my clipboard and then i'm going to copy the actual query and i'm going to paste it here into fetch posts this is going to go ahead and fetch our our posts so i might call this like post data and then i can call like set posts passing in the post data now this is going to kind of set up our basic you know loading so the app's going to load it's going to fetch the posts it's going to then set the post and then the last thing we need to do is just invoke this function so we'll call fetch post there so and i think we need to make sure that we're importing the post from the models directory one level up so looks like we have all that stuff set up properly so the next thing we might want to do is just test this out to do that we'll go ahead and run npm start actually we're going to run npm run dev since we're in the next app and then we're going to go ahead and open up localhost 3000 now when the app loads we see nothing which is kind of right because if we go back into our code we will see that we are not displaying any ui at all so the thing we might want to do is just have something like an h1 actually like posts and there we go so now we need to kind of like add some data so um we can do that by going into the amplify admin panel so i might just move this over here and i will go to our content and i will click create post and i might call this like post one and then for the content i will actually edit this in markdown i will say hello world and then i might have a little bit of code here or whatever and then we'll go ahead and say thanks for reading and we'll go ahead and save this and now if we refresh we should see that uh we have our post now if we click on this it's actually not going to do anything because we haven't created that page yet but uh what what we can also pretty easily add is actually though the ability to do real-time updates so if i go to the amplify docs and i go to datastore and i go to real time i can actually just use this line of code here to go ahead and add that so i'm going to go ahead and we'll just add that just for the heck of it because it's pretty simple to add i can say datastore.observe passing in the um model that we like to desert observe in this example it's going to be the post and then anytime a post is modified or created then this function is going to fire and then all we have to do is just call fetch posts again so in three lines of code we've added real time functionality so let's go ahead and save that and test it out so to test this out we will go ahead and create a new post and then to make this a little more interesting i might even go to dev.2 and copy some markdown from you know one of my posts this seems to be taking a little longer than usual there we go so i'll go ahead and um just click edit and then i'll like maybe copy this and then i will go back here and i'll click edit and markdown and there we go we have a little bit more content there and then i can go ahead and save this and then what should happen is when we say this we should see that show up in real time there so let's save it and there we go we see it show up in real time so we have the real time working we have the the basic query work and the last thing we need to do is implement our static site you know implementation which is going to be using get static props and get static pads as well as a fallback route and setting that up means we're going to need to create a couple new files or maybe just one new file so under pages we'll create a new folder called posts and this is going to be matching you know this route here and then we're going to need to have a new file here called dot js and this is going to be where we kind of have our component as well as our get static paths and get static props so for for the export for the default export we'll have this function called post component that's going to be our main export we're also going to have get static pads and get static props so we'll have that and then we're also going to go ahead and need to import some stuff so i think we're going to need to import the model from posts our post model i think this needs to actually go up one more directory and then we're also going to need to import some apis from amplify now what we did earlier was we imported data stored directly from amplify but since we're going to be working with ssr we need to actually make this component ssr aware so to do that we can import with ssr context and depending on the api that you're working with this will work with different you know apis within your system that you're working in so for instance if you're working with off it will take the identity of the caller when you're working with that with ssr contacts off of the session rather than local storage in our example since we're working with a data store it's going to be reading the data from memory as opposed to reading it from indexeddb so we can see how this works in just a moment but we need to go ahead and import that now let me think what else we're going to need um i think we're going to need use router from next router because we're going to need to be implementing the fallback route which is going to look something like if i can go ahead and just paste some code here something like this where we're going to say we want to use the router and then we want to say if the router is fallback we want to return a loading you know indicator and then if not we're going to return our component so let's go ahead and write that code the component is going to look something like this we're going to have our div we might have an h1 with the post.title whoops and then we're gonna need our react markdown so let's go ahead and import that and i might just call this like markdown and we can just say okay for our markdown we can just render markdown and then the children is going to be set to posts dot content so where is this post coming from the post is going to be passed in as a prop here so um when we when we work with get static props we're going to be returning that that post type it'll be it'll be available here and then we can kind of just render it there so that's all we need as far as the actual component itself we still haven't worked with any of this stuff yet here so let's do that now so when we're working with um you know these apis we'll have like this this um you know argument coming in we'll call it the request and what we're going to basically need to do is for amplify to work with we're going to need to destructure datastore off of the request using width access with ssr context so what we're going to basically need to do is something like this we're going to say const data store is equal to with ssr context passing in the request and then we can now use data store here so i'm going to go ahead and copy and paste that code there and there and then for this with forget static pads we're going to need to return an object that looks kind of like this where paths is an array and each item in the array looks like something like this where we have an object with the paths i'm sorry with the params and then the id is going to be set to like something like post.id or something like that so we need to have an array of pads that looks like that so the way that we're going to do that is we're going to go ahead and say const posts is equal to and we can actually copy this right here we're going to await datastore.query passing in the post type and then we're going to say const paths is equal to posts.map and then for each item in this array we want to return this object that has a params property with an id set to post.id and i think that's it i think i think this will go ahead and fetch it'll fetch the array of posts we'll then create a new array of paths that is going to have a post id um set as the parameters property and then we're just going to return those those params here and then finally we're going to set fallback to true meaning that we're going to build this statically you know during the build phase but if we create a new post we can still access it dynamically and it will create on demand next we'll go ahead and jump into git static props and from this function we want to return an object that looks something like this we're going to have props and then here we're going to have a post set to something and then we also want to optionally maybe set re revalidate and if we want to do this we can kind of set how how many seconds we want to kind of refetch our data so here what we want to do is make another call to data store and we're also of course using with ssr context and we need to go ahead and get the params off of the request so we'll go ahead and get the params off of the request we'll go ahead and get the id off of the params because the the id is what we're going to need to query datastore and then we're going to say const posts is equal to datastore passing in the posts and then the second is going to be the second argument is going to be the id and we need to make this async so we'll say awaits so we're having the id coming from here and we're going to call it datastore.query passing in the post and the argument for the ideas id so now we're going to have the post that's going to be available here so what we basically need to do now is return this but the way that datastore returns the data means we need to kind of you know deserialize it in a weird way so i'm going to say json.parse and i'm going to say json.stringfi passing in the post so this should allow us to go ahead and um you know return that post and then this post should be in the right format for us to read it here so i'm going to save and go back to the browser and we refresh and we'll go ahead and click on a post oh and there we go we see that the post is rendering and we're kind of like navigating to the post it's kind of slow so let's go ahead and try to run a build so i'm going to say npm run build and npm start and this way we'll kind of run a real build and we'll see that it's faster and then after this we're going to test out our fallback route to kind of make sure that's working so we'll give that a second to kind of build out and then we'll give it a shot and then we're also going to need to maybe create some new data in just a moment so i'll go ahead and click create post and i'll have like new posts and then we'll test that out in just a second so it looks like our server is running now so we'll go ahead and refresh and now we click on each post that we see it's a lot faster and if i go here and i create a new post and then i create another new post so we've created two new posts and i should be able to navigate to these even though they were not part of the build and uh everything is working as expected which is good so um that's kind of that's kind of it really that's really all i wanted to show off in this video we kind of built a next.js app using a lot of the next.js apis that a lot of people are really interested in we did that pretty fast we built the back end on aws using the new amplify admin ui we used datastore we used ssr support from amplify so we used a lot of different things and we did so in a pretty short amount of time we got up and running pretty quickly so i hope you enjoyed this video i hope you learned a lot if you did please share this video and subscribe to my youtube youtube channel and keep an eye out for my future videos and thank you for watching

Channel: Nader Dabit

Views: 8,823

Rating: 4.9774647 out of 5

Keywords: next.js, aws amplify, aws, react, serverless, jamstack, full stack

Id: bQ1Giqn5G38

Length: 23min 9sec (1389 seconds)

Published: Fri Dec 04 2020