How to Setup NextJS 14 and Contentful

hello my friends and welcome to another video where we will see how we can set up nextjs 14 specifically with contentful just so we can have CMS uh with our next JS app and make updates content updates a lot easier so let's just go ahead and start setting up our project if you like the video please just leave a like And subscribe to the channel because that is going to be a massive help so let's just go ahead and start our project so let's just go and create our nextjs project by running npx create next app latest I'll name that test content full app uh we won't use typescript we won't use Link we will use tell in CSS and we want to have the source directory and I don't want to have the app router and no so that's it so let's just install that quickly and it's all done okay so let's let's now run um our project by running npm randev and we just have the initial um nextjs project so if we go now inside the source folder and inside the pages and the index page we can just go and remove well we can remove all of it we just keep the main um and let's have an H1 there here we'll go our title and then let's have um let's just have a paragraph for now here we call our description and let's just have a a URL for now our URL goes here and let's have an HF which for now will just be oops will be this one and well we need to delete the justifi between for now and let's just add some sizing so let's just increase the size of the hero um which will be oopsie text let's just do that five Excel let's just do the text to Excel and let's just do the to excel as well see there we go and this is what we have let's just add in and M2 for now there we go okay so here we will have a title here we will just like just add the description and here we will have our URL um so if we go for now and just go inside our um project and just create a new file called in. loal so basically here we will just keep our um contentful variables so the first one would be a contentful space ID oops space ID variable um we update in a second and here we will need a contentful access token and then we will need as well uh the entry ID I'll explain uh let's just have that ENT I'll explain with that in a second um and yeah entry ID goes here okay so now the next next step is to just go on content to go in contentful and just create our space um and yeah and just create our entries if you don't have already an account you just go here get started and you're just uh creating an account for free um if you have an account you just simply go and log in I do already have an account so I will just go and log in um and then we just need to go uh up here and create a space um I will create a free space so you can just uh buy a license or create a free of course we'll just go for the free one for now uh let's just create a test and then we click continue it just tells us that we are going to have three environments unlimited roles and 25 content types now you really need to be careful for example if you want to have a homepage for example um you really need to be careful with the content types so if for example you want to build a page let's say you want to build a portfolio page I would suggest just go and create a home um the homepage um or just created the pages and inside there add all your um entries rather than just go and create let's say one entry for the button one entry for um I don't know the hero the image it would be so much better just create a page and just create everything there and that way you're just saving yourself content types and there were situations before where I didn't think that way uh and I was running out of content types and it's really expensive to to buy I yeah it's quite to buy some more content types with containable so just be aware of them uh and then let's just confirm and create so once the space has been created the next thing we can do is we can just open the space and we can go inside our content model and we can just create for example the things that we want to display so the models that we want to display so if we go design content model um let's just name the hero for example for now and you can even add the description if you want that is useful for later on when you go back to the project so uh we going to add a field so what we need is we need to have a title A descript destion and a URL for now and so we can go title here so it's good as well to have an internal title uh just in case if you have many uh different uh content models just it would be um good to have that so you can just separate it uh but for now we will just have a simple title uh which we will use so this will represent the entry level H always you need to have uh one which represents the entry level and you can set it if you want as a required field as unique field uh you can limit the character count uh you can make a specific pattern for example if you want to have an email address or a regular expression um you can accept specific values uh and also you can obviously we will have a single line uh for that uh but you can even have a URL if you want to drop down you can have a radio button or you can have a slug uh we will leave it as a single line for now uh and we'll confirm then we can go and add another field which this one will be the description and you can have it as a short text or you can have it as a long text um so the short text is limit to 256 characters Max while the long text you can even have it 50k characters that is useful for example if you have a blog or a blog post or something like that or a case study and we'll keep it for um short text for now and click continue uh we don't need that to be an entry level but we will set as a required field and we click confirm and then we need to have just a URL uh and again we keep that short and we keep it as required and we press the URL here so if we click confirm and we can save now the next thing that we need to do obviously we create our model but we need our content so we are just going to the content Tab and we go add entry and we add a new entry so here is the title uh that we want to display um on our page so let's say this is our title um and description I'll just copy paste that one for now see um test description let just fix that as well and as a as a URL I'm going you see I just went to save automatically but uh it justes doesn't let me um so I will just go add a URL let me just refresh that one second and see yeah it's still here let me just um go and add a URL so I'll just put Google for now um and that's it and then the next thing you need to do uh you just need to go and publish now if you want to display for example this um content uh and connect obviously with next uh you will see here each content uh type uh has well each cont each cont entry I should say it it has an entry ID um so this is what we will use uh for our yeah for here um so I'll just copy and paste this one for now we don't need actually this one the brackets so no I need live them there um so yes so this is the entry ID and then we will need the contentful access token now in order to get the contentful access token and the space ID we need to go into general settings uh so this is the space ID which goes here and the access token we are just going to uh someone yeah API keys and you click add API key and you just called whatever you want this one and and you add the API key you will see you have here as well the space ID and you have the um content delivery API which I'll copy and I will paste in here and I will be right back okay so now I copied all my variables so the next thing that we need to do is we just need to uh connect our contentful with our next JS so first thing first we just need to go and install content F something that we forgot to do um so we need to go and install contentful and we need to import contentful as well so import as contentful from content F and we need to create a clent variable NV do content F so basically these are the variables we are just created so this is the space ID and we have the access token contentful access token and this is it so now we just need to go down here and just create cre a function well export as well a function export think uh and use get static props we need to create a results which will be actually um our entry we get the entry that we just created uh client get entry and here we will actually use let's just copy this one for now oops and this will be the entry ID okay and we need to go and return our props which one is the title and that is result result Fields Title or blank and then we've got the description which is result oops result Fields description or no and we call the URL as well uh which is result fi description sorry FS Euro uh or no and this is it this is [Music] complaining oh yeah because I misspell of course function and now we are good to go so now if we go in here for example and just uh go and first of all we need here props and then if we go here props title so if we see uh oh because we need to restart let's just restart first um uh so let's just uh go and check yes so this is got passed and here if we check for example the hardcoded here will go our description um and if we go and do similar things so if we go um props do description and let's just do that as well uh which should be Google um and this will be oops props uh URL so yeah so this is our contentful test description um this is our Google um URL so this is more or less how you can um use contentful with h with next um of course you can add a lot more you can do a lot more it depends how simple or complex um your project is but this very basic um setup um it's very straightforward and is very useful as well because uh you can for example if you create a portfolio you can easily go and create it with contentful um so every time you want to update something you can just easily um go in here you do have many content models um as well um you content types that you can uh you can create um so you can create so many uh different things you can even um have Rich Tex which Rich Tex is getting used for blogs and you can just uh have number specifically uh you can add images videos PDFs and anything else um so for example this is if you want to upload something rather than using a URL um location dat and time booleans Json object and this is the reference this is for example if you have a blog post or something similar where you have an author and you want to reference all the blog posts or the opposite and so is yeah a blog post can reference it authors and similar concerts uh but yeah this is um more or less how you can set up um nextjs with um contentful I hope you find this helpful let me know um down in the comments uh if you want to see anything else um relating to contentful or anything else um and I will see you to the next video thanks for watching bye

Channel: Code with Rita

Views: 1,458

Keywords: nextjs, nextjs 14, tailwindcss, contentful, javascript, learn nextjs, how to

Id: Ui8Gw2bjq5s

Length: 20min 25sec (1225 seconds)

Published: Mon Dec 18 2023