Getting started with Contentful and Next.js tutorial

hi everyone my name is brittany walker and i'm a developer advocate at contempo today we're going to create a starter blog using next.js for the front end contentful for our content and we're going to deploy it via versailles so let's get started the first thing you want to do is create a contentful account i have a new space in my account called next.js blog and it's an empty space once you do that we're going to head over to the terminal so the next thing we're going to do is create a new next js project using create next to app so i'm going to type npx create next app and then example and this is going to use our example code so cms contentful is example project and then the last argument is whatever you want to call this folder so i'm going to call mine cms contentful app and once you do that it's going to create the project for you using the template code all right it has installed a project for us make sure to cd into the folder that you created so i'm going to cd cms contentful app and i'm just going to clear it so we can go back to the top and there you go so i'm inside of my project now um so now we're going to need to grab some items from our contentful account some ids and tokens so that we can connect our template code to our contentful account so head over back to your contentful account so we're going to need a few things we're going to space id and we're going to need some api tokens to find those items head over to settings and click on api keys so the first token we're going to need is the content management token so you can find that in this section here and your content management token is very important that you do not share this token with anyone it is read and write so people could delete all of your content get access to your account et cetera so make sure you you keep this token secret uh to create a token you click on generate personal token and then type a name and it'll generate your token for you again don't share this token once you create it make sure you save it in a safe space um so i am going to show my token in this video but i will delete it afterwards so don't worry about that so create your token and save it in a safe place and then you can also go to the content delivery preview tokens tab and create a new api key this is going to give us our space id and also some other tokens we're going to use later so if i click on create api key it creates an access token page for me here's my space id which we need right now and we also are going to need this content delivery api token and this content preview api token later as well so i can go ahead and leave this open so the next thing we're going to do is import our a template content model into our account so we create a content model for you and we're going to import it into the account this is why we need the content management token so let's go back to our terminal and we're going to type a pretty long command but bear with me here so we're going to start with mpx cross env and we're going to put contentful space id equals and then we're going to go grab our space id which is right here and just another tip the space id is also in the url as well if you need to grab it and you don't want to go to the api page so i'm going to put my space id there and then we're going to do space and then we're going to go contentful management token equals and this is the token that i've said do not share with others i'm going to share mine here in a second but i will delete it there it is and then we're going to do npm run setup and we're going to run this and see what happens alright so after that runs it has you can see in your terminal it's done a lot of things it's basically imported a template content model into your account so you don't have to create it manually so let's go see what that looks like so if i head back to my contentful account and click on content model you should now have an author and a post content model created for you if we look at post there are seven different uh fields created for you with validations and all that so you don't have to do it manually and these all match the template and so yeah you should have an author and a post and let's go to content you might have to refresh the page let's go ahead and create a few template blog posts i'll create one here for you together and then we'll take a break so you can add more yourself so first i'm going to click on this add entry button and add a post now for my blog i think since i'm wearing this really neat dinosaur sweater that i'm going to make a dinosaur themed blog so for my first blog post i'm going to write party like it's the mesozoic era oops spelled that wrong and this uh t-rex that has this blog is a you know lifestyle blogger so they're writing about how to throw parties how to decorate your house so i'm thinking for this blog post uh we're gonna get some tips uh saying are you turning into a thai ranasaurus wreck trying to plan a fun dino party here are my top five dinosaur themed party ideas for you to enjoy there you go and i'm going to copy this and put this in our expert excerpt as well and then we need a cover image so i'm going to add a new asset so now we're in the asset view and i have a image of some dinosaurs with party hats there we go let me grab that image party dino make sure you publish everything as you go so i'm going to publish this my neat little dinosaur image and we're back at my post now and i'm going to say this was written on the 17th and then i'm going to add an author so we don't have any authors yet so i need to do add new content author and the author for all these posts are going to be mr t-rex and i'm going to add another new image and this is t-rex's headshot there you go and let me grab the headshot and once again make sure you publish each step so i'm publishing the headshot so now i'm back in my author post publish that one and now i'm back in my post so all the fields have been filled out so i'm going to go ahead and publish and now if i go back to the content tab we can see my post was published and my author was published so i'm going to add a few more blog posts and i'll meet you back here in a second all right so i've added two more posts and i have a three post total and one author so now we're ready to add these posts to our blog on our local machine so we're gonna go ahead and head over to the code for this project so i'm going to go to my terminal and i'm going to open this project using the vs code command just open it in whatever text editor you prefer to use all right so i've opened my project in my text editor so now that we've done this we need to tell our project that we want to use contempo and now we're going to be using the other api tokens that we created before so in the root of your project you're going to want to create a new file dot env dot local and there is a dot env.local example you can go ahead and copy these items in here and copy them into your env.local file and here you can see we need the space id the access token preview access token and preview secret so again if you go back to our account and go to settings and click on api keys and you click on your content delivery preview token tab this time here we have our space id so let's copy that there you go and we need our access token this is asking for the content delivery api access token so we can copy this and this token is uh read only so it's okay if it's shown and then we also need the content preview access token grab this one right here and then the preview secrets just needs to be a string that can work in a url so i'm going to just put dinos here and there you go so now our project knows that we need to use these items from contentful and it's connected to our contentful account so let's go ahead and go back to the terminal and i'm going to clear this and we're going to run npm rundev so it's going to open localhost 3000 so i already have it open here let's refresh and see what shows up and there we go my dinosaur um items are showing here great i actually want this blog post though to be the first one and it looks like it's ordered by date so the most recent one is first so let's go back to our space and i'm going to go here to my content and i want party like it's the mesozoic era to be first so i'm going to go down here and change the date to the 26 and publish that now if i go back and refresh the project wow my changes happened immediately so now our contentful account is connected to our project locally that's great awesome so at this point now you can edit your blog post or edit the template change the styling you can modify the content model but just remember if you do that you need to go into the api.js file and modify the graphql queries to match your new content model you can change the components whatever you like so i'm going to um make this blog look a little bit more fun um so i'm going to do that and i'll meet you back here in a second all right i'm back i've dynified my blog i've changed a lot of the styling i've changed the layout a little bit looks great everything's great so now i'm done and you're presumably also done with your changes so what you want to do is make sure to commit your changes so let me go to my terminal i'm gonna go ahead and stop my server and i'm going to do git add hit commit initial commit and let me just check get status okay everything looks good and then we're going to need to push it to github or gitlab or bitbucket whatever you prefer so i have already created a repository on github i haven't connected it yet to my local so i'm going to go ahead and do remote add and then go ahead and push this code to a repository so once this code is pushed i can now deploy this to versailles so now my code is on github let's go ahead and refresh to make sure that it worked awesome so now what you're going to want to do is go to vircell and log in via github bitbucket etc and then once you are logged in you can click on new project here click on new project and then depending on what you logged in with your repository should show up in this list here so i dyno blog is the repository that i just made and i just pushed my code to so i'm going to click on import for that because that's the project i want to deploy so i'm going to import that and then you're going to get some configurations the only thing we need to change is the environment variable so remember those items that we put in our emv.local file we need to also add them in here so that versailles knows that we need to connect to contentful so i'm going to go ahead and do that and i'll be right back all right i've added all my environment variables so here i have my contentful space id and the value you don't put the equal sign and now i can click on deploy so super excited let's see let's go ahead and click it and yay once it's deployed versailles will throw you a little party with some confetti and now my website is deployed so i can click on this or you can go to your dashboard i'm going to click on this so we can see the site live and there you go now my website is live i have a versailles url here all of my content is here and i can send this to other people to view and that is it so we've built a new next.js project we're using contentful for our project and we deployed it via versailles um if you have any issues or questions make sure to reach out to us in the contentful slack and we'll try to help you out and that is it for this video

Channel: Contentful

Views: 12,003

Keywords: nextjs, next js react framework, cms, api, contentful client, react, contentful delivery api, contentful, next.js

Id: S-NsDgoaCTo

Length: 13min 10sec (790 seconds)

Published: Tue Feb 08 2022