Beginner Next JS Website Tutorial With Strapi CMS (Hosted)

hey there so today we're going to be building this fully responsive next js website and we're actually going to be hosting it as well now this website is also driven by a headless cms so all of the content you see here is going to be driven by a back end that we're going to configure and host on heroku you can see that back end just here so although it's a simple website it has a really cool feature that i just really quickly wanted to demo if we want to add content to the live site all we have to do is simply come over here add some dummy content in our back end hit publish and immediately on a refresh you're going to see your content appear you don't have to rebuild or rehost the website or any of that inconvenient stuff but anyway if at some point you find value in this video or you like the content at all please do leave me a like it helps out tremendously and if you have any questions leave them in the comment section down below okay so now we're ready to start like all good projects we just start by making a new directory you can call this anything you like i just call my next tart demo and then just drag and drop it into an instance of visual studio code or whatever your favorite code editor is then we're going to actually start coding so first thing we're going to do is run mpx create next app and i'm just going to call mine front because it's the front end and all this is going to do is just create as a starter project using next that we're going to be able to build on top of as you may have guessed it's quite like create react app okay that will probably take a while but once it's finished we're going to go ahead and get started with the strappy project we're going to go to the quick start guide just here and just grab this line of code here uh then what you're going to want to do is just edit it so the my project section reads whatever you want to call your project i'm just going to call this one back and then we just paste that into the terminal and it's going to create us a strappy starter project once again this one will probably take a while okay so once that's all installed you'll be greeted by something that looks like this and it will actually run the server for you straight off the bat as well so all you have to do is press control and click localhost one three three sevens forward slash admin and you're gonna be greeted by something that looks like this just here so you can see we're already running our strappy cms and it's going to prompt us to create an admin now before we go any further though because we're going to be running two servers at the same time we're going to be running the development server for the front end and the back end what i want to do is just open two instances of visual studio code so it's really clear when i'm putting in commands for the front end and when i'm putting in commands for the back end so we're going to go back to vs code and we're just going to close this instance of vs code down then we're going to get two completely fresh windows of vs code so i've got two windows of vs code just here and then once again you can just go to wherever you've saved your directory and then what you're going to do is just drag and bought drop back into one of these windows so we're opening up back in one of the windows and then we're going to drag and drop front into the other one all right so if we press control comma on windows we can bring up another terminal or we can just put go up here and press new terminal like this and we're in the front end now okay so in order to run the front end development server the command is npm run dev that's the command for next js to start its development server and you can see that's now running on localhost 3000. so if we go ahead and control click that it'll open up a new window in our browser at localhost 3000 and you should get this next starter website and then if we go back to that other instance of vs code that has our back end and you can see over here it says back again we can just press control speech mark and we get the terminal up or you can open it using the ui and then the command for strappy is actually npm run develop so just try and remember that if you're in the front end you run npm round dev to run the development server and if it's the back end of strappy it's npm run develop and we've just run another instance of our strappy back end on localhost 1337 forward slash admin so what we've got now in our browser is our front end running on a development server and our backend running on a development server and we're now in a place where we can start configuring our backend okay so we're going to start by creating an admin user on our strappy cms and you're going to notice it's going to redirect us to forward slash admin which is like pretty much where we're going to want to go if we want to do any editing so localhost 1337 forward slash not admon admin is where like all the business is going to be done in the future okay so if you get lost that's what you need to be so all you need to do is fill out this form with your details and yeah click the let's start and then it's going to bring you to this view here which is um your strappy cms but anyway before we begin with any of that we have to go to the plugins section because we need a bunch of different plugins in order to make this a more fully featured cms and don't worry i'm going to explain what all of them do individually but just for now we're just going to go ahead and install all of them really quick get it out of the way get our cms up and running okay so first thing we're going to do is actually install a graphql api plugin from strappy and so we're just going to come over here to the marketplace and for this one it's really easy we just click download just here and then if you come over to your terminal for your back end you're actually seeing that the terminal is going to be installing graphql after you've clicked that button and this is going to take a while but once it's finished you're going to have the graphql endpoint in your backup okay so once that's done installing you can check it's installed by coming down here into plugins and you should see this little graphql icon here now the next thing to do after this is to install cloudanary and for this we're going to need to go to this url which i'll leave in the description and we're going to install this npm package we just need to click just here and it's copied to our clipboard and then it's important you go to the back end now and you're going to press control c hit yes to terminate here paste that in and we're just going to install it at the root level of the back directory while that's happening what you're going to want to do is go over to cloud and airy as well which is just like a image sharing website and it's got a nice free tears that's why we're using it and go ahead and sign up and create an account because we're going to need some api keys and stuff in order to make all this stuff work with our cms okay so once that's installed you're going to want to go back to the npm website just here and follow the instructions on here so what we need to do is make this plugin.js file at this level of the directory so we're just going to take this here and we're going to the config folder and we're going to create a new file and name it plugins.js paste in that exact information we got from over here and once again i'll link this down in the description if you can't find it all right and you can see it's referencing like these cloudinary emv variables so what we need to do is actually make those emv variables so when you logged into cloudnary you should have seen that there's like a dashboard to the top left of the ui if you click that it gives you all your cloudinary details here so all we need to do is create an emv file that contains these three variables just here so let's go back to vs code we need a cloudinary name a cloudy key and a cloudinery secret and they have to be exactly this so we're going to go to our emv.example we're going to rename that just.emv uh open that up and then we're going to paste in all of those emv variables we see in these quotation marks here then we just need to get the values from our account so i've just pasted mine in yours going to be unique to you so you need to go ahead and do that and then if you press ctrl speech mark again we're going to want to run the server with npm run develop and now when we go back to localhost 1137 and we click on media library we should be able to upload some assets so if i just grab any old image let's go with the thumbnail of my last video if we click upload on that what we should see is that it not only gets uploaded to the cms but it's also going to get pushed to our cloudnary account and this is important because strappy doesn't have any way of storing images as such so it needs like a third party in order to have these images stored here and then it's going to be able to serve them to the front end that way so if we go back over to cloud and re and this time we click on media library you should see that there we go we just uploaded a bunch of different sizes of this same image here so um cloud re actually like splits up into small medium large et cetera so it can serve with the most optimized image and that's pretty much it we've linked our cms to our cloud marine okay so now we've configured most of our strategy backend all that's left to do is to start adding actual content to it so to avoid this being really boring and you just watching me copy and paste a lot of stuff into it what i've done is i've created a github gist that you can find at this url just here and i will link that in the description and this contains all of the copy for the website and all of the images for the website as well and that's where we're going to start we're going to start by scrolling down and what i want you to do is just download all of these images so just right click save image as on all of these different images that i'm using or you could source your own it doesn't really matter as long as they're the right resolution once you've gone ahead and downloaded all of those i want you to come over to the media library here that we set up with cloud mary and as you can see i've already uploaded a bunch of these images and i'm just going to show you how to do one so we go ahead and click upload assets we click browse files you'll probably be in downloads but mine are in just like a folder on my desktop and then you're going to select whichever image you want hit open and then click upload to the asset library once that's finished you should have a selection of images that look roughly like this and then we can start actually creating content types next so for that we go to the content types builder and essentially what content types are are there like a structure that your content goes into they're like the shape of your content so what we do here is we click create new collection type and we're going to keep the names really simple the first one's just going to be called blog post with no spaces no capitals like that and then the first field on it is just going to be a title and that's going to be a short text field you can then go into advanced settings and hit required field if you want that'll save you some errors later down the line and then go ahead and hit add another field next field is going to be a rich text so you click rich text i think i called it blog body and once again you can go and hit that it's going to be a required field hit add another field this one again is going to be a text field called description you can make that required if you want to hit add another field next one again is going to be a text field this time it's going to be a slug and then our last field is going to be a media field and we're going to just call this one splash and again i've gone ahead and made all of those fields required by clicking advanced and going to require just there then we hit finished and that's our blog post done if we hit save on that our server is going to restart and we'll have that content type available to create instances of that content with cool so once this restarted you can test that it worked by looking at your collection types just here and you can see that there'll be a blog post you can enter stuff into there's one more content type we need though and it's really simple so we just hit create collection type this one's going to be about content once again just no spaces really simple and this one is literally just going to have a rich text field that we're going to call body uh we're going to go ahead and make that required again hit finish hit save the server will restart and you should have both of those content types available cool so now we can actually start adding that content and i'm just going to show you how to do one of each because it's pretty much just copy and pasting from the gist so we go to blog post we hear add a new blog post and then like i said all the information is in the gist but what you have to pay attention to is there are some embedded images within the bodies of these so we go to blog post one and we're going to grab the title and then you you know you copy and paste it across but i'm just going to show you the blog body because that's like a little bit different so we're going to take the blog body from blog body one we're going to copy that across and you're going to notice that there's these links to images now these are specific to my cloudnery so you can't really use these i don't think they'll work so what you're going to need to do is just make a note of the name this one's mark uh jonah units and then just get rid of that link and then go ahead and hit upload image and you should have an image in your image library that matches it the marquez one and then you're going to hit finish and it's going to give you an embedded link that's specific to your cloudary if you've uploaded them all into your media library so that's really the only bit that can trip you up with this um blog post thing is that there's some embedded images within the body cool so i've gone ahead and filled out the other fields just by copying and pasting from the gist and the last one is just the splash so you literally just have to click this one because it's a media field then it gives you access to your media library and the image i used for this one is unsurprisingly the how to become a web developer one you hit finish on that and then you should have all your fields filled in and you just hit save and then i also want you to hit publish as well that is important make sure you hit publish cool so that's how you add the blog posts um the about content is really similarly simple just hit about content on the left hand sidebar hit add new about content go over to the gist uh should be the first thing this time just copy and paste everything because this is all markdown uh go ahead and paste it in and then you're gonna be looking for the links in it there's just one in this one and once again just make a note of the name and then go ahead and embed an image from your library in there honestly it doesn't really matter which ones you use because these are all pretty similar dimensions they're massive um so you they're pretty interchangeable you can use any image you want in any of these places i think i used this one on it though so we're going to go ahead and select that one once again hit save and hit publish and that's how you create your about content and your blog posts there's one more blog post for you to add on your own that you can find in the gist but once you've done that there's just one extra step to do so if we go over to localhost 13337 and we go to slash blog posts that is actually where our blog posts should be found and we should be seeing some jason show up here but what we're actually getting is that it's forbidden because we're just on like a public user um that's not authenticated or anything like that and we don't have access to request this information so we have to tell strappy that we want people to be able to access our blog posts and our about content content types via that url so what we do for that is we just go down to settings here we go down to roles and there's two roles there's an authenticated and a public we need to do this for both of them so on authenticated we need to find our about content collection type and we want to click find and find one as available and then the blog post as well we want to click find and find one and hit save and then we just need to do the exact same thing for the public type as well so we go find and find one on about content find and find one on blog post hit save and now if we go to that same url we get a bunch of json we've got our blog posts and we can also do this for about content and again we get a bunch of json and that's pretty much it for our backend we're going to go on to configuring our front end now okay so now we're going to go to the front directory and the first thing we're gonna do before we start writing any codes is make sure you have the same snippets as me so i have next js react snippets by ijs you can come over here into extensions and then just search for this and you should be able to find it and i also have something called react snippets by running coder highly recommend you get both of those before we start um okay and then when we do start first thing to do is come into your explorer go to the root level and create a new dot emv file and we're just going to have one variable in here called strappy base url all capitals and then just an equal sign and then what i want you to do is just go to your cms and then just grab the first part of the url there and paste it and that's what you want so you want it to be something like http localhost1337 and we'll just get rid of that trading slash okay so now what we have to do is actually request things using graphql from our strappy backend and we're going to start by doing that in index.js and this is what you should have just from your create next app you should see something like this so first thing we need to do is introduce you to get static props so all i want you to do is come to the top here type gsp and press enter and if you've got the same extension as me it should write something out like this and it's basically just an asynchronous function that's going to return something that will be accessible in your props in this component so with graphql we just use fetch and we're always going to make post requests but it's a little bit different because we're going to post like a json object and we need to know what that json object is before we actually are able to make that request so to do that there's some handy tooling that strappy provides so what i want you to do is go over to localhost 1337 forward slash graphql and you get this graphql playground and if i just get rid of like my query here what we can do is write query pretty much everything starts with query and then you open it up like an object and now because this is linked to your cms you have access to everything that you've written in your cms so you can press control space and it will give you all of the different content types and stuff you defined so we're going to go to blog posts and then obviously there's something inside of blog posts so we want to open up these brackets control space again and we want the title we want the blog body we want the description and we want the slug as well and then lastly we want the splash and with the last one that splash there's actually stuff inside of the splash so what you need to do is open it up with control space again and you can see you can get like width id all of this good stuff we probably just want url to start with and then that is our query if you go ahead and press play i've already done it but you're going to get something like this that contains all of your blog posts with all of those things that you've got on it so what we want to do is just copy everything from blog posts down to here we don't need the query wrapper and that's going to be the thing that we post to our api and that's going to be what tells it what to bring back for us so let's go ahead and code that in the front end so first thing we need is a constant called fetch params and this is just going to be equal to an object and this is going to be where we tell strappy that we want to make a post request we want the headers to be content type application slash json like it always is with this kind of thing and then lastly we want the body the important part to be json.stringify we need to send this as a json object and then inside of this object here we need a parameter that's query and then that needs to be a template string so you're going to put a back tick and then just go ahead and paste your query in there and that fetch params variable should be everything you need to send in a fetch request to tell strappy to get our blog posts so that's kind of the next thing we need to do we need to do that actual fetch request so we have a console called res and we're going to await a fetch and obviously the first parameter effect is always a url and we have our url in our emv so now we're just going to bring that in and the way we do that in next.js is i usually just go to the top of the file and we have a constant i'm going to just call this url and then the way we access the emv file is we go to process dot emv dot variable name so this one was strappy base url right and that should bring us back this string that we have just here so that first parameter of fetch we want to have another template string so backticks and then dollar sign curly brace to put our variable of url in there and then all these requests just get made to slash graphql and then the second parameter is our fetch prams and that's gonna bring us back some json we need to unpack so uh we're gonna have a const just called data that's equal to res dot json uh and we need that one to be await as well cool and that's our fetch to graphql that should be bringing us back some data but we still actually need to get that data into our component here and we do this with the return statement just here so instead of just returning like an empty object what we want to do is return data right and we do that by just returning data like that now we should be able to put a variable like props for example or we could just call it data for simplicity and we should be able to console log out something interesting okay so that returned an error for me um and what it ended up being was i just missed the opening pair of brackets in the query here so if you get a similar error to this all you need to do is just add a pair of brackets just here so now if we go ahead and refresh our localhost 3000 in the browser again and check our console we can see that we have a blog post object cool so we're actually getting something back from our api now but we need to extract some stuff from this to do anything interesting with it right so we can see that it's on data blog posts okay so data has an object inside of it called data and there's an easy way to solve that what we can do is just go to props and say okay we want data off of data so that saves us having that extra layer of uh data on our object so now if we refresh our server there we go we get something that's a bit more interesting we get blog posts and we've got a bunch of different stuff on it we've got an array okay so just so we can just display something in the ui all i want to do is just come to here [Music] uh i'm just going to stick an h1 in for now and inside of that h1 all we need to do is just go on to data dot blog posts uh we're going to go to index 0 on that and we're going to go dot title and this is a variable so it needs to be inside of jsx so it needs to be inside of brackets like that cool and then if we go back to our browser there we go right at the top how to become a web developer the ultimate guide okay so now we fetch that data we actually have to start making the website look a bit more like finished project so if we just go back to it you'll notice that it looks pretty similar to the starter app and that's because i've just reused the css from the starter app and i've just like scoped it to different components and made it a bit more uh usable in like a full featured website so what we're going to do is we're going to work through this page and basically turn each of these elements into a component that we can then reuse on the about pages and the individual blog pages which will come to build in a second so we're going to start off by building that header so if you go back to your front directory you'll notice you have a styles directory in there with home.module.css file and pretty much all the css we're going to be using is contained within this file so it's literally just a case of like copying and pasting this out into a different file and scoping it to the components we're going to build and we're going to start with this container class just here we're going to need to use that in multiple places so instead of repeating ourselves with lots of css files we're just going to build one component with one css file and reuse that component in lots of places so what we're going to want to do is go to the top level and create a new directory called components and then inside of components we want a new file called content wrapper dot js and this is literally just going to be a react functional component so we type rfc and press enter and we get a function component we can keep it as content wrapper that's cool and then in brackets all we want to do is get children as our props and then we want to give the just renders those children and that's literally it and all we're going to do is just put some styles on this div and then that's going to be our contact wrapper really simple so let's create that css file we're going to want to call it content wrapper again and it's going to be module dot css because we're using css modules and all this does for like versus a regular css file is when um you inspect the class like in the browser it's going to have some crazy like unique identifier and it's just so you don't have like two class names and different css files clashing uh and then we're just gonna paste that class in that container class which once again i just got from like line one to nine of home.module.css uh and then all we have to do is just apply this class to that div in our content wrapper component so to do that we just import uh usually people call it styles we can actually call this anything and we're importing it from dot dot slash styles forward slash content wrapper dot module dot css cool and then we just need to give this div a class name that's equal to styles dot whatever our class name was and in this case it's container and that's basically how css modules work you import like a variable from the file from the right like path and then you go on to the different objects in it which are the different classes so if we had one that's like called dot example for example you could go and go to styles.example and you'd get those styles instead cool so that's our content wrapper component and that's obviously going to wrap all our content inside of index so what we're going to do next is apply that in index and you can see that the div at the top has styles.container already on it that we're importing from home.module.css so all we need to do is just replace that div basically with our component so we're going to import content wrapper from dot slash components content wrap up cool and then we're just gonna use that instead of this like top level div easy peasy and we don't need this class name here because obviously we're already applying the styles and then the last div i've got a cool extension called auto rename tag um which you might want to get it's kind of cool and that's what just happened there just renamed that bottom one for me but you might have to do that yourself so just make sure the top and bottom div are now your content wrapper and i'm also just going to get rid of this h1 that's like rendering some of our blog posts because we're gonna do something better with that in a second and then if we save that and go back to our browser you're gonna see that nothing has changed but now we have a component that can be reused on those other pages so after that the next thing to do is to build this like header navigation bar okay so the first thing we need to do is go into the components directory create a new file uh call it header.js and then we're gonna press rfc and press enter again to get a react functional component and we're going to import two things into this we're going to import link um so if you type i m lnk it will come up with the intellisense for import next jslink and then you just press enter and you've got the import statement for the link and then we're also going to want some styles again so let's go ahead and go to our styles directory and create a header dot module dot css file don't need anything in it just yet and then go back to our header component and we're just going to import just like before styles uh from dot dot slash styles forward slash header dot module dot css and then because this is a header we're gonna use the html header tag so the way links work index.js is you just use the link component that we've imported and then inside of the link component you give it an a tag and the a tag is where you apply the styles but the link component is where you actually put the href so you'd go href and this one we're going to call this one like home so we'll just have it as a slash and then we'd apply some styles in this a tag which we'll do in a second and then if we just copy that and then we want the second one to go to about and we're gonna have a slash about root that we'll create in a bit and then what we should have is uh kind of the right hand side of what's in my browser this home and about and we'll style it up to look like that in a second so we just need to make that button as well uh so that one's gonna be a little bit different we're gonna have a but a div um that's actually gonna wrap our link tag and again the href goes inside of the link and this one's just gonna go to home again and then inside of that again we want an a tag always needs to have an a tag inside of a link tag and then inside of that we're gonna have a button like a regular old html button that will style up nicely and this button is gonna say dev dot io because i'm kind of unoriginal but you can call this website whatever you like obviously all right cool so now that's done we just need to apply um some actual class names to this so let's go ahead and write that css okay but before we go and style it let's go ahead and look at how this looks in the browser currently um so let's go into index.js and we can just bring this in so if we come up to the top we want an import header from slash components forward slash header cool so now we have that available we can just render it want to go under the head tag from next and we'll just render a header like that nice and simple it doesn't take any props so should be good to go and then let's have a look at what this looks like in the browser cool so it looks kind of bad right but we have our button and our two link tags and if we hit him we end up going to slash about and we end up going home and home cool that's what we want that's the behavior we want let's style this up so let's come into header.module.css um and you can see i've got a dot header class in here now and basically all it is is a flex box and this width and margin stuff here is uh the same as the content wrapper class so it's just gonna make it like line up nicely so the edges are right uh so what i suggest you do is just uh pause the video take a look at this copy it out or you can just like pull it out the github repository okay cool but we actually need to apply that don't we so let's go to our header tag here and we want a class name and that's just going to be styles.header cool so if you come back to our browser now what we've got is something that looks a little bit more like a barn and a nicely spaced top bar um it's a little bit wonky but so we're going to fix that okay next thing to do is the actual button styles so all i've got here is like some styles for the button container um just to make sure it stays to the left hand side i've put a line itself select start and giving it a width and then these button styles here are just using the nexus color and then there's some stuff to just make it look a little bit prettier and then i've put like a hover effect on it where the colors just change when you hover on it so once again pause the video take a look at those styles copy them out or just take them out of the repo and then of course we actually need to apply those classes again they were buttoncontainer.btn.btn so we need to go into header this one's going to be our btn container so we give it styles.btn container and then obviously the button and then obviously the button is going to get the styles.btn class then the last styles we need to apply are going to be to these link tags and they're all going to have the same one so uh when you apply styles to the link tags this outer wrapper is where you put the href and all the routing stuff that this inner a tag is actually what you're going to be styling so we're going to put our class names in here at this level and we're just going to call it styles.lnk and then take that same class name and just copy and paste it into all of the other a tags on the page and then we actually have to write that css so let's go back to header.module.css and then these are the styles for those link tags so just take a look at those styles copy them out or again just like pull this whole file from the repo if you like all right cool so all those styles should be applied and we should have something in the browser there we go that looks a little bit like the end product but it's still a little bit wonky and i'm going to show you how to fix that just now okay so here's what it looks like in the browser we've now got our menu in and then we're gonna work on getting our blog post displayed in the ui like here and i'm just gonna show you the finished product so we want something that looks like that so we've just kind of converted these little things into our blog post so what we're going to do is we're going to go over to our front directory again and we're going to think about the data that we've been fetching so if we go ahead in the console we've still got logged out this blog post right and we're going to make one small optimization just to make this a little bit easier so instead of destructuring data off of data here we're actually gonna do it just here so we're gonna just already destructure data so what we return is just going to be um this object here instead of having to do it in the props so essentially what we've done is we've moved the destruction of data from props just here to our variable up here and then what we can do is we can actually just destructure off blog posts in our props so instead of getting like an object with blog posts on it we're just getting the blog posts array now so when we console.log blog posts you should see that change down here so now we just have an array which is blog posts and all of our stuff in it so it's just a little bit neater just a slight optimization and then we're going to take out that console log because we don't need it anymore um we're going to come down to the h1 and we're just going to change this to like dev dot io right and then we're actually going to start thinking about displaying this data so we already have these nice styles that next gs has given us and we're basically going to make a component out of those first and then map over all of our blog posts and display one of those components for each of them so basically how we're going to start this is we're going to copy one of these a tags here it doesn't really matter which one just copy that because we want the styles.card and we want this rough structure in h2 and ptag and then we're going to go into our components directory and create a new component called blog.js right then we press rfc tabs create a react functional component and we're just going to return that to start with just that a tag but we're going to change this a little bit as we go along so first off we need to think about the props that this actually needs to take and if we go back and look at like one of the items in these array you can see we've got title blog body description and slug now we don't want to display the whole like blog body because it's just the overview we just want to display like the description and the title is our actual content and the slug is what we need to direct it to the right place so we're going to take description title and slug and if we go back to the ui in the browser basically like what we want is for this top bit here is obviously our title that's the description and then it's going to route us using the slug to the correct page all right cool so there's the props that we need and then we also need this to actually link to things so when you're linking to external things um within nextgeners you can use a tags like they have here so that's fine because they're linking to another website their own docs but we want to link internally so we have to use their router again so we're going to need to use next router so we just type rn lnk press enter and we've got link again and then what we're going to do is just wrap this a tag in unlink and then once again because this is next.js the href actually lives on the link and the styles any styles you apply go on the a tag so we're going to do this href here and instead of going to like this external website we're going to make this a variable um and we're going to go to slash posts forward slash and then we're going to add on to the end of that like whatever our sluggers oops not s dogs log and that's going to take us to whatever our slug is so like in the case of this one it would be ultimate guide and then we just have to start rendering like the things we actually want in here instead of random text so we're going to put a title in here obviously and then the p tag is going to be for our description and that's it that's pretty much our blog component the last thing we need to do is actually apply these next.js styles so we're going to need our own style sheet for that so we come over into our styles directory and create blog.module.css make blog capital why not all right and then the styles we need for this are the styles.cards so what we need to do is find that dot card style in home.module.css and that's line 81 all the way down to line 109 and we're going to take that and we're going to put it in blog.module.css which will give us all the like fancy card styles and hover effects and that should all be applied now so now next thing we need to do is import styles from uh dot dot slash and then use the auto complete styles and then use it to go to blog.module.css and now that should be applied to this so we have our component that should be styled like i showed you in the browser so the next thing to do is go to the index go all the way to the top and actually bring in this component so we're gonna go just under content wrapper actually you know we're gonna go just another header and we're gonna bring in blog from dot dot slash once again we can just use the autocomplete to navigate to components and then blog.js okay so once we've imported that we're going to have to do some tidying up with this code because there's a lot of stuff in here we don't want anymore so first thing is we're going to come down to line 54 to 57 and get rid of that p tag there then we're going to want to keep this grid just here because that gives us some nice styles that are already imported and we're going to get rid of every single a tag within here because these are all like hard coded and we don't need them anymore because we're just going to render a bunch of different ones from our list of stuff that we're importing from so then we add some jsx and then we're gonna go on to our blog post variable right which is an array so we're gonna go blog post.map map takes an arrow function like that so that's how you open it up and then it takes a couple of arguments the first one is going to be like whatever we call each item in the array and the second one is going to be um the index of that item so i just called them blog and i and then because blog is each individual item of this array as it maps over it so it's each of these objects we can destructure things off of it again so we go const and then we can destructure off the items that we need so we're going to need once again the title the description and the slug and they're all coming off the blog and then what we're going to do is use those to feed our component that we've imported in and then we need a return statement and what we're going to do is we're going to return a blog component and that has the correct prop so title is going to be title and these need to be like jsx variables description is obviously a description and slug is going to be luck all right cool so now if we come back to the browser you should see that we've got both of our blog posts displaying in the ui like that now it's at this point i should know that if you didn't add all the blog posts from the gist you might just have the one that we added together so it might be a good time to go back and do that and now the next thing we're gonna do is just make them stack on top of each other instead of side by side just because i like to look better okay so to do that all we do is we go to blog.module.css and we come to dot card and we just change this to width 100 save that and then there's one extra thing i forgot in index as well um when you return these blog items um you should really have a key you should always have a key when you're like rendering a bunch of components from an array and we're just going to make that the second argument in our map so if we go ahead and save all of that and we come back to our browser we should have them stacked nicely like that but unfortunately when we click one of these links obviously we just get a 404 so next i'm going to show you how to actually route to a proper page okay so we want to come into the pages directory over here and then we're going to create a new folder called posts and inside of there we're going to create a new file called squarebracketslog.js and what this does is it indicates the next that this is a dynamic route so essentially what we're going to do here is we're going to query strappy for like a bunch of different slugs and then we're going to get get started paths to return a different route for each of those slugs that we fetch and we're going to display something custom on each of those routes and this slug just indicates next there it's a dynamic route like i said but also it allows us access to this variable the slug so if we press rfc tab and bring up the react function component we're not going to call it uh slug obviously we're gonna call it content uh and then we're gonna get rid of the react import statement because we don't need it then the first thing we really want to do in this file is deal with that get started path so if we probably type gsp and go to get starting paths press enter we get this cool boilerplate and we actually don't need any params for this we're just going to need to fetch from strappy so we're going to follow the same pattern we did before by creating a variable called the fetch params which is an object inside of it we're going to have a method key and it's always post because we're using graphql and then we're going to want headers and this one's going to be an object that contains content hyphen type and then application.json just like normal application json sorry and it's giving me a little error here because you want to make sure you put a comma after each key in our object so we just put a comma after headers there uh and then lastly we actually need our body so we're gonna json.stringify an object and this object is gonna have a query key and inside of here we're gonna have our query this one's pretty simple so i'm just gonna write it out we're just going to open up some brackets go on to blog posts and then just grab the slug because we want every slug for every blog post uh yeah and that should be our fetch brands and then we need another cons called res where we await a fetch request and we're obviously going to fetch to our graphql endpoints so it's at this point we need to bring in our m variable for that so if we scroll up to the top of the file and we're going to want a const here called url and that's just going to be equal to process [Music] dot emv dot strappy base url all in caps so if we go back to line 21 where our res is we should be able to just have like a template string and then we're going to have our base url inside of that variable and then we're going to be going to slash graph ql because we want to hit our graph and then we're just going to give it fetch params as the second parameter and that should be good to go and last thing we need is just to destructure off those posts so we'll await res dot json and then finally we need to look at the boilerplate and the kind of structure it's got its paths in so what this should return is an array with a bunch of different slugs in it and what we want to return as paths is an array with something that looks like this it'll be like params with the key inside of it of slug and then that'll be equal to like whatever our dynamic slug is so if we're an ultimate guide it should be ultimate guide right and we want to have like a bunch of these inside of our paths array like that so i'm just going to go ahead and like copy one of these examples and get rid of the others and we're going to create this like paths array ourselves so we're going to go const paths is equal to and then we're going to go on to posts it's usually an object called data so we're going to go into dot data which should get us the array of blog posts so we're going to map over that array and map takes an arrow function which we open up like that and we've got one parameter called uh i don't know like blog and then inside of here for each blog we want to return something that has that same kind of structure we just nicked out the boilerplate except instead of slug being ultimate guide we're going to want slug to be blog dot slug and i'm now realizing that post makes more sense here so i'll change that to post and then change that one there to post as well and then what we should be able to do is instead of like having paths return this array we can just give it our paths variable here and then all we need to do is stick a comma after it and we'll go with fallback true for now which i will explain later and that should be our get stag paths um all right so let's go below that and then we're going to get static props so if we type gsp and then hit enter we should get a boilerplate for get static props and for this one we're actually going to want a params prop because on this params variable here we can get onto like dot slug we're basically going to fetch the strappy and say we won just the response for whatever slug we've got and we're going to get that slug off this dynamic route so basically when you click on like ultimate guide for example the variable in here on params.slug is going to be ultimate guide and then we fetch by slug for ultimate guide and if it's something different it'll be something different so it's going to be that same kind of fetch pattern so if we go back up to line six and we'll just take fetch params down to line 23 down to posts and we'll take all of that and just paste in here all right cool so let's just go through this um we still want the method to be post we want the headers to be content type application json um but we are going to change this query quite a lot so let's get rid of this query and let's go to our browser and then if we go to localhost 1337 forward slash graphql we get the playground uh and i've already got the query out oops but i'll run through it with you guys so if we hit query and open up this bracket and then press ctrl space we're going to want to go on to blog posts and then here's where it gets a little bit interesting if we open up some brackets like this we get this where option and then it's kind of like a key so you put a colon and then you get an object inside of it and we're going to say it's where slog is uh and we'll go with ultimate guide cool and then if we open this up we should if we control space be able to get a title um let's get a bunch of stuff let's get description let's get all the stuff we're gonna need uh and i think we want blog body and we also want the splat yeah and then obviously we open splash up to get url as well all right cool so let's see if this query works yep that looks like it's working and let's just try it with another slug to be safe so we can change this over to what is next and we should get the stuff for what is next so basically this uh little where thing just means we can filter our responses off blog posts by some variable and we're going to use slug here because like i said we have access to that so let's go ahead and take this query copy everything except that like little query bit at the top head on back to our front end and then paste that in there now obviously we don't want to fetch what is next for every page because like i said this page generates all of the pages for our blog posts so we want this to be dynamic so we're going to get rid of this and we're going to put a variable in here and it's going to be params.slug and it's at this point i should tell you that if you decided to name your file something different so if you named this like i don't know post.js in the square brackets it would be like params.post for you and the name of the variable here on params is controlled by whatever you call this all right cool so that should be the query we need and then we're gonna fetch the graphql again with our fetch params and we're gonna unpack it so at this point we should probably check that we're getting what we want so let's console log posts uh we've got error get started props has already been declared um oh okay so i've got like a weird import statement at the top just here on line one uh so if you get that error that might be what it is there we go let's just delete that um and then i'm also realizing we should probably return something down here um so let's just return hello why not and there we go let's get back to the index page and i'm gonna click on one of these blog posts and there we go we get hello rendering out and we should if we open up our console yeah there we go there's our log so we've got data with our blog posts on it and that's coming from the get started props that we just wrote um all right cool so let's go back to that how about instead of calling this post online 57 why don't we just go straight for that data object so let's destructure that off and then we can see in the terminal again we've got like an array with our objects inside of it so what we're going to want to do is go on to data dot blog posts and there's only ever going to be one item in the array so we're going to return the zero index of that and then get rid of that log and then we should be able to bring that into our component and we might as well destructure offer it so we might as well get like title blog body and splash off of it uh and then instead of rendering hello here let's just render title to see if what we've got is working okay cool so there it is there's our title so if we come back into slog.js the next thing we want to do is basically display a header here and a footer here and wrap it in our content wrapper so it actually starts to look like the other pages so if we go ahead and bring in the components we have we already have a header right and we get it from dot slash slash components forward slash header and then we also have content wrapper which comes from the same path but content wrapper so we can go ahead and go back down to here and we can change this react fragment into a content wrapper component and then we can stick a header just here above title uh and then let's go back to the browser and there we go we've got it wrapped in our content wrapper and we've got a header and we've got our main content and then we now need a footer but unfortunately we don't have a footer component yet so let's go over to index.js and then i just want you to take line 61 to 72 and get rid of that we're not going to use it anymore and then we're going to go into components and create footer.js press rfc tab um to get outfits.js and then in the return statement just stick all of that stuff and then you can see the only two things we actually need in this whole component are image from next.js and these styles here so let's get rid of that react statement and then we imim g and press enter let's get import image and then we're going to import dials from uh dot slash styles forward slash footer.module.css which we're going to go ahead and create so i want you to come to the styles directory and then unfortunately i did this off screen but what you're going to want to do is go into home.module.css which contains the first styles you need just like control f for footer and then you're literally just going to create a footer.module.css file and inside of there you want to have dot footer dot footer a and logo looking exactly like this again you should be able to find those three classes in home.module.css and that's it that's everything we need for our footer component to work the way we want it to so last thing to do is just go into index.js here and then we're going to render a footer component we're also going to want to stick that just here in our slug.js file as well so now we can just render footer components everywhere so it auto imported into my slug.js file that's really nice and i didn't check the import for index actually i should check that there we go it auto imported as well but just in case it didn't make sure you check yours all right so compiles and then we can go back to the browser take a look and there we go we should have a footer on the ultimate guide page and we also have a footer on the homepage just like normal okay so the next thing to do is get blog body disturb playing properly now blog body is actually what's called markdown so what we need to do is have a package that just converts that into html so if we bring up our terminal close down the server and then we want to run npm i react dash markdown and while that's installing we can scroll up to the top and then we're going to import react camel case markdown from react markdown package we just installed and then literally all we have to do is just take this component and instead of wrapping blog body and jsx we're going to wrap it in this markdown component just here and then if we restart the server with npm run dev when we go to the browser we can see we've got all this markdown here and there's just a few things we need to do css wise to get this looking decent the first thing is to just go into the global css and make sure you've got an image with 100 in there just at the bottom and then the next thing to do in the existing css is go to content wrapper.module.css and this container you just want to get rid of the min height and the height values because we're not going to need those anymore and then we just have to create our own css module uh with a couple of styles just to constrain this width here and we should be good to go so i'm going to come into the styles directory and i'm going to create blog page camel case dot module dot css and then inside of here i'm just gonna paste some styles and you guys can get these just out of the repo but literally like the most important thing here is it's a flex box and we're constraining the max width and then we're just adding some margin and padding really simple stuff and then let's save that go back to slug.js and we're going to go ahead and import styles from that css module we just created so blogpage.module.css and then we're just going to go down here just below the header we're going to wrap all this stuff in a main tag so your markdown should look like that now just with your h1 and your react markdown in this main tag and then in here we're just going to give it that class we just created which is on styles dot grid i believe it's called and then if we go ahead and save that and go back to the browser now we've got this our nice article styles and if we go back to the home page we can go on to the other article and it's styled nicely as well and now the last thing to do is just get this about page in because it just says hello at the minute and then we're done with the front end okay so let's go to about.js first thing we need to do is bring in the content wrapper from our components and the header as well and we're also going to want the footer and then we can already start building in our return statement something that looks a little bit nicer so we can start off with just a header and footer wrapped inside our content wrapper and then we're also going to want a div that's going to contain like our body of the about content because if we go back to the back end you can see on about content we've just got this one thing we want to get we just want to get body and that's it so literally all we're going to do is just have a get static props go get that and then we're pretty much good for this page so let's go into slug.js again and let's take the get started props from line 70 all the way up to 40 and we're just going to paste this in and pretty much all of this is okay we do want it to be a post uh the headers are all good it's just this query that needs replacing so let's go ahead and take that out and then if we go to localhost one three three seven forward slash graphql and type query open up some brackets and press ctrl space we can go on to about contents and then open up another set of brackets control space again and we just want to get that body right and that gives us the data that we want so all we do now is just take that query and put it exactly where we took that query out of on line 14. uh let's just remove these params from the get static props and then the only thing we need to change is this return statement so if we go back to our playground we still have data and then we have an array called about contents with our thing on it so what we want to do is still destructure data here but instead of going to data.blog posts we need to go on to data.aboutcontents so if i just take that about contents and paste it in here we still want the zero index and then in our props we should be able to destructure off body because once again if we look at our data structure you can see we've gone on to data we've destructed that off and then we've returned about contents zero and then we destructure off body so we should just be getting like this now in our actual component and then because it's markdown as you may have guessed all we need to do is just bring in those same packages that we had in slug js so if i just go and grab that import statement react mark down i'm going to bring that in and then i'm just going to take that component then inside of this div i'm gonna return that markdown component with my body inside of jsx inside of it okay that should be pretty much good to go the last thing we need to do is um because we're fetching to our url variable we obviously need to bring that in so if we go to slug again let's just take that const and bring it at the top so we've actually got our url variable available to us all right cool and then if we go back to the browser there we go and once again we literally just need to do the same thing we just need to constrain this to a nice width and we're good to go so let's go back to the front end into the styles directory and we're going to want to make an about dot module dot css and then we're just going to create a classical body content with that max width and the padding that we want and the margin that we want then back in about.js we import styles from about.module.css which we just created that is now i've realized that i've misspelled that so let's just go ahead and change that hopefully you spelt it right um cool and then back down in our return statement we just actually want to give this div a class name of styles dot body content go ahead and save that and then back in the browser we have our about page looking pretty nice really simple okay that's pretty much it for our front end but there is one last thing to do at the start of the video i mentioned that you don't have to rebuild the website every time you change the back end and we can do that really simply by just adding the revalidate prop to our get started props return and we give it a value of 10 why not now all this revalidate prop is going to do is basically all these pages are statically built at build time but all this revalidate page say it does is it says okay if there's new information on the server i will request that new information as and when uh maximum of once every 10 seconds so we're just going to stick that into our get started props in slug.js and also about.js we also want to go ahead and put that revalidate in get started props in index as well and then we should be good to go we should be able to update the back end and have this front end um go and request that information even when it's hosted okay so now we're ready to deploy our backend to heroku first i'm going to start by opening up a terminal in the backend directory and also a terminal in the front directory and i'm just going to do these in the integrated visual studio studio code and terminals the next little prerequisite for this is if you don't already have a heroku account just search for heroku on google and then go ahead and sign up for an account and also i want you to click on this cli option just here and then go ahead and download the 64-bit installer for windows because we're going to use the cli for this once you have the cli and you're signed into heroku there's a couple little changes we need to make in the actual back directory so we need to go inside config create a sub directory called emv then inside emv create another subdirectory called production and then inside there you're going to make another database dot js file and then essentially we're following like the strappy docks for the deployment so um i've got the link in the description for with this link um but you want to come to strappydocs and you want to look for uh heroku install requirements and then you're gonna scroll down to step four and we're going to take this file here and that's the database.js file that we just created inside of back you can go ahead and paste that and everything's dynamic in here so we don't need to correct anything but you will notice that it requires a package called pg connection string so if we just take that we're actually going to install two packages we're going to mpmi pg and that package pg connection string and go ahead and return on that okay so once pg and pg connection string have installed we should be good to actually start like deploying to heroku so we're going to start with heroku login press any key to continue and then it gives you this string here go ahead and follow that hit login and you should be good to go on your cli you should be logged in next we're going to go ahead and hit heroku create okay so once that's created your application come back to the docs go down to set step 7 and you want to have this command here and what this is going to do for us is it's going to add an add-on that gives us like a postgres sql database on our production all right that looks like it's worked and now all we have to do is um initialize a git repository if you already haven't with getting it then use git add dot to add all of your files then we're gonna git commit dash m with whatever message you want i'm just gonna put like pushing just before we push though i've just realized that if we go back to this heroic add-ons command we actually haven't added a dash a flag and the dash a flag tells it which application it's gonna add that add-on to so if you see here i was kind of stupid and i did it without it and it added it to a different project the one we just created so what you want to go ahead and do instead is use this heroic add-ons command with the dash a flag and then copy and paste your new created heroic repository here if you have like a fresh heroku account you probably don't have to redo this by the way because you probably just got like one project but um this is what you have to do if you've got multiple products all right cool so we've added that and we can see all right awesome so we've added our postgres sql add-on and we can see it's gone on the right project this time now where did we get to so we got to get our door and git commit last thing is to actually push so what we need to do is add a remote for that so let's go back to the strappy docks and you can see here in step six it's it's kind of confusing it's not in the deploy step which is kind of annoying but you can see here in step six there's a tip you want to go ahead and take that and then we paste it into a terminal and again it's got that dash a flag but it's just got like a random app name so you want to take your app name go ahead and paste that in there and then we've added our app as the actual remote and then we can go to the docs again and step 11 is the deploy step and the command is get push heroku head main go ahead and take that paste it into your terminal and what you should get is like this deploy step showing up in your terminal here while it's deploying we can go ahead and go to our heroic gui in the browser go ahead and click the app you just created and we're actually going to set up the emv variables for this so we want to go ahead and go into settings and then we go down to real config files and this is where you add your environment variables and you can see it's already created like a database url for us which is kind of nice so let's go back into the back directory let's go into our emv file and we just want our cloud rename and key and secret in here i'll just add one so you see how it's done so i get cloud rename and the key and then i just hit add it's as simple as that and it's done and there we go i just went ahead and added our emv variables once again you're going to want to use your own emv variables for this step okay awesome and then it looks like i deployed deployed successfully if you look here it will tell us the url that it deployed to and let's take a look at what that looks like in the browser awesome so it looks like our production strappy back end now it's worth mentioning at this point um when we added that extra postgres sql database what we're not using is the sql lite database that we used for our local development environment so some of the stuff that we've done already we're unfortunately going to have to redo and basically how it works is like the content types that we created have carried across but the users and the actual blog posts and about content we're gonna have to read them so if we go to slash admin we're gonna have to create a new user all right awesome so i've gone ahead and done that and then we click let's get started and then first thing we want to do is go straight to settings because we've got to reset our permissions up so we go to user roles and permissions hit roles go into authenticated down here and about content just hit select all and select all for blog posts as well and go ahead and save that and that gives an authenticated user permission to like access our api and then same thing settings roles public and we want to give people permission to get find one find and count because we don't want them like changing the data save that so that's our permissions done and then we need to go ahead and create a user i just created like a rando user and put confirms go ahead and hit save on that and then the most annoying thing is we have to re-add all the data for about content and blog posts and we also have to re-upload all the images so i recommend you go back to my gist which i'll link in the description down below and go ahead and just take it from there so the about content for example we're just gonna copy that add a new about content paste it into body hit save hit publish and we're good to go and we're obviously gonna do the same thing for blog posts but i'm not gonna show you that because it's a little bit boring and we've already done it okay so i've gone ahead and filled one out and i've just realized there might be one area that gives you some minor problems and it's the images so i'm gonna go ahead and click save on this i'm gonna go into media library and upload some assets um i want you to go ahead and hit browse files go to the um folder that hopefully you created from the images in the jius go ahead and like select all of them and hit open and you should be able to upload them all at the same time to save you a little bit of time now if this isn't working for you if it says something like internal server error almost certainly what has gone wrong is you forgot to put your environment variables in to heroku or you've got your environment variables wrong so just make sure you go ahead and double check those if you're getting an error at this point hopefully that all went well for you though and your media library looks something like this and so off screen i went ahead and added all the data types as well so now what we should have at this point is our hosted backend and all of our content in it and now we can go ahead and point our front end at this api and we can actually consume it which is pretty cool and all we have to do to point our front end at this is actually just come into the emv file in front and then point it at wherever our back end is deployed so mine's even tiger but yours would be like whatever your app is called and just make sure you get rid of that trailing slash at the end because remember like we're doing url slash graphql so you'll have two slashes if you don't get the trailing slash and then if we run npm run dev we can see that our website looks the same as if we were pointing at our back end when it was hosted on the local development server and now we have to do is deploy this front end and first thing to do that is just come to gear and create a new repository uh you don't have to add any readme or anything and i just call mine dev.i o then we're gonna go ahead and just copy this line to get our remote for this repository uh come back to our front terminal close down development server uh do a gear add dot do a quick git commit and then we're gonna add our remote origin then go ahead and run git push dash dash set dash upstream origin main then if you go back to the browser and refresh you should see all your files just here and then the next thing to do is go to vasel.com and sign up for a vasel account then what you're going to want to do is go ahead and hit new project and you're going to come to your git repos you can see dev.i o just at the top here we're going to go ahead and import that and then we just have to add some environment variables right we just have to add our strappy base url so let's go ahead and take that and then whatever we reset it to the name of our deploy blackened add that environment variable and then go ahead and hit deploy and there we go once that was all done you should get the confetti from vasel and you should be able to visit your website by just clicking like the picture of it and there we go there is our deployed dev to io and you can see if we go into the articles they look the same as in development once they load up and the about page as well looks the same as in development the real test of it though is if we can add a new blog post and see it show up so let's take it out i've gone ahead and filled in all the fields and then just hit save hit publish and then after a couple of refreshes on our front end we get our new blog post check it out we didn't have to rebuild or redeploy the front end at all it just shows up because of that beautiful revalidate prop that we've got in our guest static props anyway i hope you enjoyed the tutorial i hope you learned something and got something from it and yeah thanks for watching

Channel: Code Creative

Views: 25,477

Keywords: Next JS tutorial, next JS beginner tutorial, next JS website, next JS beginner website, next js and strapi, beginner react projects, react project ideas

Id: 9l3r0EFp9ow

Length: 72min 44sec (4364 seconds)

Published: Sun Feb 13 2022