Build Blog App with Next.js 14 | Strapi v4 Headless CMS and Tailwindcss

hi guys welcome back to another nextjs 13.5 tutorial in this video I'll be using headless CMS called strappy and I would say it is one of the most famous and most flexible headless CMS out there to manage the content of your website and you can see it is supported by a lot of big companies like eBay IBM NASA Toyota and a lot more and it is open source and if I see the GitHub repository of strappy you can see that it is started 56,000 times it is foged 7.1 th000 times and it is a very big repository and it is contributed by almost 1,000 people I've already created a video how to contribute to open source repository you can check that out on my channel so this is the strappy CMS website you can go to its documentation I'm going to click on the developer docs and it gives us get started documentation how we can integrate our strappy CMS with a lot of different tools and how to use it all right so this is how the dashboard of strappy CMS looks like and it gives us a media library we have a different plugins we have the marketplace we have the different settings to generate the API tokens setting the different roles for the users setting up different advanced settings for the authorization and the authentication and this is the content manager when we want to create different content and I have created the five different blogs including the images titles descriptions and we can create a lot of different properties assigned to a collection called blog and I have created the category collection and this is the users collection and I've also shown you in this video that how we can make some relationship between the blogs and the category which I'm going to implement in this video so this is the small blog application built in nextjs 13.5 at the top you can see the three different categories and Below there is a list of blogs belong to a selected category if I click on the machine learning it will quickly show the blog belongs to the category machine learning and this is the debugging and I have created the detail page of it as well it's showing the title the description and when the blog was published the date and the time and I have used the different component based architecture of nextjs to show the list of categories this card for the blog and different route for the detail page of that blog and to share the data between the categories and the list of blogs I have used the context API so it is a small application but you will understand some new Concepts if you are new to nextjs and if you are new to strappy CMS I can assure you that you will definitely learn something new from this video so before getting started if I go to my channel and if I go to the playlists and I navigate to the next gs13 playlist on my channel you can see that I've created the crash course in next js13 you can learn each and every topic included in next year13 and I have already created a Blog application using the ghost CMS and I have created a video on the blog application using the sanity CMS and other than this I've created all the different topics included in next gs13 starting off with the state management using the Redux context API server actions the stand debugging creating different apps using the next j13 like weather app expense Tracker app typescript for Next xjs different ways to protect over routes complete authentication system including the registration of the user connection with the mongod DB and also I've created a e-commerce small application in nextjs 13.5 with the integration of the stripe payment and design with the Tailwind CSS so you guys can see that I'm putting a lot of effort creating these videos for you guys so it's just a request to subscribe my channel and like this video because it will encourage me to create more videos for you guys so let's get started with creating a new nextjs 13 project make sure you have the latest version the latest table version of node so this is a version I have in my system installed for node and npm all right to create a new nextjs project I will be writing npx create next app at latest all right I'll hit enter and it will ask me the name of my project so let's say nextjs blog okay so I'll go with the typescript I'll go with the es link Tailwind yes Source directory yes yes and no for this import Alia so it's going to create a new project you can see that and it's going to download the dependencies for running nextjs project so after 2 to 3 minutes the new project of nextjs is created if I go to the package.json file and here you will see that this is the version of nextjs which is installed for this project okay so I'm going to go open up this Source directory and I'm going to click on the app directory and this is the main layout. TSX file if you don't have any understanding of nextjs 13 I will try to explain each and every step in this video so this is the layout file it runs for every route that we create in nextjs and in nextjs the route is handled through the folder structure that I will be creating in this video there is only one route currently for the blog detail page and one home route for the homepage okay and the Home Route file is already created and it is inside the page. TSX file it is already considered as a Home Route because of this it is added directly inside the app directory so first of all I don't need anything like this that is already added in this file okay I'll be creating a simple UI on my own so I'll just save it and I'm going to open up this layout. TSX file and this file runs for every route and it is the body and inside this the all the child components all the child routes are rendered in this particular body element through this children property which is being passed to this root layout over here all right so first of all I will first add few divs outside this children and I'll write div and I will be creating another div inside it okay and uh let's cut it from here and paste it over here and I'm going to add few Styles because the Tailwind is already configured while creating a new nextjs project so I'll start off with writing Max Auto Max W and then the screen large okay and then I will be adding some classes in this div as well so I'll be writing the flex Min height screen and then I will be writing the flex call items Center and and then I will be writing the p24 all right and later on I will be wrapping this div inside the context API for sharing the data between the categories list and the blogs list components okay so I'm going to open up this page. TSX file now and uh in this file we don't need this main as well so I'm going to replace it with div element okay and inside it I can actually write the jsx or TSX directly over here but I'll be creating a different components for loading the list of the categories and loading the list of blogs on the homepage okay but first of all let me add homepage and I'm going to run this nexts 13 project let me go inside this folder of nextjs project and I'm going to run npm run Dev if I go to the package.json file you will see that this is the command which I'm running so I'll hit enter it's going to run my next js13 project on Local Host 3000 and I should see this homepage text on the Home Route okay so let's open up the Local Host colum 3000 on browser all right you can see the homepage is written over here let me zoom in and it is on the center because I've written the Tailwind CSS in my layout. TSX file and it has a very nice margins and paddings as well all right so our application is working it's time to create new components for loading up the list of categories and the list of blogs first I will be creating the list with the constant data then I will be integrating that data with my strappy CMS so let's create a new folder inside the source directory I'm going to name it components inside the components folder I'm going to create a categories component so I'm going to write categories. TSX all right so let's add RAF I'm using the vs code extension for creating these Snippets you can create that as well so categories categories and this is already created uh this is to save our time okay so first of all I'm going to add few classes in this div so I'm going to write class name and I'm going to add the flex because I want to show the list of categories uh in the row okay so I'm going to write Gap six to add the space between these components for different category a single category actually and I'm going to write margin bottom eight to add some space between the list of categories and the list of blogs okay so I'm going to remove it and hit enter and inside it I'm going to I trate through the different list of different categories okay currently I don't have a strappy CMS so I'll be using the constant data so let's add the div okay and inside this Dave I'm going to add the cards of each category so for the card I'm going to create a new component for that so let's create a new file and I'm going to name it category. TSX okay so I'm going to write ra fce hit enter so it is created and uh currently we have this div okay so I'll be adding the on click event as well later on and uh I need to add some classes to it as well so for now let's add the default classes so let's add the class name pedding 4 and then I will be adding the Border rounded rounded large and then I will be writing the shadow MD and then I will be writing the cursor and then the pointer okay and inside this we have the title all right so that's pretty much it we need to do in this file but there are few things we need to add uh to dynamically add different classes we will be adding the on click event to it as well so for now I'm just adding it like this to avoid any kind of Errors above it I will be rendering uh and sharing the data using the context API okay so for now inside it uh let's load and uh I'm going to add different categories and load it over here so I'm going to write the category which I have created over here so I will be writing the category hit enter so it is loaded and I'm going to save it let's see how it works but first of all I need to add the categories component in my home route which is the page. TSX file so inside this div rather than adding the homepage I'm going to add the categories component okay so let's add this let's go there seems an error so I'm going to open up this category. TSX file and I'm going to add the use client at the top in nextjs 13 if you have not seen my PR previous video all the components are by default loaded from the server side in order to make it a client side we need to add this string at the top of that particular component okay so let's save it at the bottom you can see the error is gone now if I refresh you can see that this is the category which is showing over here I'm going to add the different category in my categories like this and see how it's looking like so like this and let's see all right so now you can see that we have this title being loading up and uh let's go to the category. TSX file and uh we can add the background color as well by default in order to make it look nicer so I'm going to add the BG and then I'm going to add this s AF 853 okay this is how we add the different colors in Tailwind CS s let's go and see all right so this is how it's looking like but it's not loading in the form of row let's see how it goes so actually we need to wrap each category within its own div okay so I've wrapped each category inside the div let's go and now you can see that it's looking cool in the form of row now let's create the components for the blogs so I'm going to right click components and uh I'm going to write the blogs. DSX R fce and this is the list of blogs I'll be creating another component for a single blog card okay so here first of all I'm going to remove this text and I'm going to add the class name to it so class name I'm going to write grid grid calls one and then SM grid calls to MD I'm going to make it responsive so if we have a large screen or a small screen I'm going to make some changes in the the row so in the large screen the row will contain the three cards in the small screen the row will contain the two and on the mobile screen the row will contain a single card okay so this is to make it responsive so MD and I'm going to write the grid calls and then the three Gap equals to four to add the space between the different cards so I hope that this is pretty much it for the grid cards and then I'm going to add a div okay so inside this div I'm going to load the blog card and obviously I'll be modifying it when I'll be integrating it with the strappy so let's create a different component for a single blog card so I'm going to write a blog and I'm going to write blog card okay so ra a f c this is going to contain some uh UI stuff and uh I'm going to write the div and inside inside this div I'm going to add a link of nextjs coming from the next slash link you can see at the top it is already added because we want to click each blog card to navigate to the blog detail page okay so it actually require the HF by default let me add this one okay and uh I'll be modifying it later so inside this da we'll be having another div okay so inside this div I will be having an image class of next s which is coming from the next slash image okay so it is going to take up the layout equals to fill and then it is going to take up the object fit equals to cover and then I'm going to give it the URL for the image which will be coming from that uh strappy so let's leave it like this for now and then I will be giving it an ALT t tag which is required so let's give an empty string for now and I can give the alt tag coming from the strappy uh CMS okay and finally I will be giving it a class name so I will be giving it a rounded T and LG okay so then I will be coming out from this div I will be having another div for the title and the description of that blog post okay first of all let's add a class name to it and uh this class name will be having a pedding of two okay so inside this div I can add the title of H2 so this is the title of blog okay and uh then I can add the description within any element of HTML I'm going to write the P tag so let's add the class name to it so I can give it a gray 600 color okay okay so this is the description this is the description okay so I can add the class name to it as well uh to actually increase the font size I can make it the semi bold and then I can write the margin bottom of two and uh overflow hun ellipses all right let's save it and uh I can add some classes to the main div as well so this is going to be the rounded hyphen large and I can add the shadow as well so Shadow MD and then I can add the P hash4 margin bottom four overflow I can add the hidden border and then the Border gray 600 100 cursor pointer all right so let's save it and uh let's see how it's looking like it's not showing it yet I need to add it over here inside this div okay so I can write the blog card like this okay so let's save it and see how it's looking like it's not showing over here so what we need to do is we need to go over here and Below categories I need to add the blogs component in our main Home Route okay so let's save it and let's go all right so you can see that it's looking great currently um it's showing some kind of error uh because the image does not exist okay because I've not given the exact correct URL for the image but that's fine for now uh I will be adding the real image URL coming from that strappy CMS okay but for now let's go to our blog card and I'm going to add another d to see how it's looking like so all right you can see that it's looking great if I try to decrease the width of it you can see that we try to make it responsive and this is the Mobile screen it is a iPad screen it is a desktop screen so it is looking great it is responsive as of now so I can actually click on each of the blog card okay and I want to navigate to the blog detail page which I'm just going to do now so I'm going to uh create a new page. TSX file and in order to make a new route I'm going to name it blog and inside the blog I'm going to create another folder because this is going to be dynamic I want to show the ID of that particular blog in the URL and that's why I'm wrapping that ID within the double square brackets okay so it's going to be like Local Host column 3000 SL blog slash the ID of that particular blog okay so but inside it I need to create a file with the exact same name it cannot be a different name for this particular routing files we can have a different name for components but not for the routing file so this is the page. TSX file it's going to show the detail of a single blog post okay so I'm going to write the ra fce to generate the Snippets and um inside it first of all I will be designing it a bit and I'm I'm going to write the class name so first of all let's add the max W 3XL and MX Auto and the padding equals to 4 okay so this has been added and inside dat I'm going to add a link for navigating back to the Home Route so I can write a link just like I added in my blog card component which is coming from the next slash link okay so this is going to take h ref and href is going to take the home route we want to navigate to the Home Route because Home Route contains a list of blogs okay so after this inside it I can wrap it uh like this back slash and then the back and close it like this okay so after this I can add a div so inside this I can have an image okay so just like this I can have the image let me copy this stuff from here to save some of our time okay so this has been added we have the layout object fit we have the source and we have the alt um I don't want to add any class to it in my detail page okay so after this I can have the different classes to this T so I can name it relative width full I can give it a height of 96 I can and hide the overflowing image and I can add the rounded large and margin top hyphen 5 Okay so this has been done and I'm going to come down outside this div to show the title description and the date so inside this div I can have the title within the H1 element and um let's add the class name actually over here so we can have the class last name let's increase the size of that text and I can add the font semi bold and then I can have the class name margin top hyphen 4 okay so inside this H1 I can show the title so this is the title this is the title of blog which I will be modifying later uh which is coming from the strappy CMS okay so then inside the P tag this is the description all right so I can have the class name to it as well so let's add the text Gray 600 margin top two okay just to give you an idea that I have installed the uh intelligence Tailwind extension of vs code that's why while I'm designing some stuff in my components it helps me uh by showing the list of all the classes available of the tail Min okay you can actually install the tail let me show you as well so I'm going to go down so this is going to be here so Tailwind I'm just finding that out so this is Tailwind CSS intellisense you can install this extension to get help from the Tailwind CSS while writing the code okay so outside this P tag I can have a div this is going to show the the data of the published date okay so class name and this is going to be a smaller text okay so inside this div I can write the published on uh let's add some space and after that it is going to be a new date I can actually modify that all right so but I will be modifying it later on for now I can simply add uh some random date to it okay so now let's some add some styles to it as well so margin top four I can actually Flex it as well and I can add the items Center and I can have the item gray and then the 400 okay so I think that's pretty much it we need to do we just need to modify the content and make it Dynamic with the strappy CMS and also we need to add some logic as well at the top we need to call apis of strappy CMS to fetch the data of a single blog post as well but for now I want to see how it is looking like but before that I need to go to the blog card and when I will be clicking on this whole card I want to navigate it to this page okay so let's add uh some Styles So currently we have this particular URL for this thing so to make it Dynamic we can have slash blog and then after this I can have an ID as well we don't have a real ID coming from the strappy for now let's add a 23 after that and let's see if we are able to navigate to that page and see the UI for this as well currently image won't be shown up so let's go over here let's click on it all right so I've clicked on it and you can see that the image is not available and this is the title this is the description and this is the date the UI is looking good if I'm able to click on the back and yes I'm able to click on the back and our basic UI structure is done for the different components so now it's time to go ahead and create a new strappy project with the given commands provided in its documentation and uh configure the strappy CMS and fetch the data using its apis in over this next justs blog application so if I go to the documentation of strappy click on the quick start guide and uh it is giving an advice about the versions of node and npm needs to be installed in our system so if I go down we can create a new strappy project using this command or using this command if you are using yarn so I'll be using npm I can copy this command and I'll be creating a new project I'm going to create a new terminal so in the terminal I'm going to navigate outside the nextjs directory and inside the main folder okay so I'm going to copy that command and I'm going to change the name name of the project of strappy as well so let's change it so I'm going to name it strappy blog okay so I'll hit enter so it's going to install few dependencies and creating a lot of different files that I showed you in its GitHub repository so it's taking some time let's see how it goes yes so it's installing few dependencies now it's going to take few minutes all right so it took more than 5 minutes to complete the installation of strappy and by default when it completes the installation it will automatically run the project for us locally on our system it is on Local Host colon 137 SL admin but if I go to the strappy code this is the code that we have cloned using that command and if I go to the package.json file this is the command it runs to run the strappy project npm run develop okay and we can also use this use this to build and also uh the other commands all right so first of all let's go to that URL which it automatically loads which is on the/ admin sl/ register SL admin okay so by default when it runs the project first time we need to create a new user in order to use the strappy dashboard so I'm going to create a new user by giving the name email password so let me do that so I have updated the form I don't want to click on this checkbox let's click on the let's start all right so we are navigated to it's dashboard it's so simple and we can easily use it if I go to the settings first of all in order to use it in our next JS application we need to create an API token but first of all I'm going to open up this content type Builder and I'm going to create different collections one is for blogs other is for the categories by default it automatically creates this users collection and each user collection contains these kinds of properties we can also add few more properties if we need to add for this user and we have the different list of plugins if we want to integrate it with and uh we have the 158 plugins that we can use it all right so I'm going to navigate to the content type Builder and I'm going to click on this create new collection type okay so I'm going to create blog this is going to be a name of that collection this is the singular and the plural and I'm going to click on advanced settings and I'm going to click on the continue and first of all in order to create that we need to add at least one field for this particular collection so for this blog we need to have four kind of fields so first of all I'm going to add the text and this is going to be the title this is going to be the short text I'm going to click on advanced settings this is a required field this is a unique field and uh I don't want to make any change to this Min length max length so I'm going to click on the Finish finish I'm going to click on the save okay so it's actually restarting the project if I go to the project structure and here you will see if I click on this SRC and uh I'm going to click on this API and you will see that it actually restarted the project because it had to create this folder for the blogs here as well and automatically it creates a different folders for the content types controllers routes and services to handle this particular CMS okay okay so I'm going to go over here skip the Tour all right so this is the default collection is added and I'm going to create few more fields for this blog so click on this add another field from the top and I can add the description using this text but I want to use the rich text box here okay so click on it and I'm going to name it description Let's see we don't want to make it required maximum length default value is nothing and I'm going to to click on the finish so it's added let me click on the save so it's also restarting the project as well because it needs to update the code here in our project so I'm going to add another field this is for the media and I'm going to name it image uh media and I'm going to click on the single media over here and uh let's click on let's see what we have here we can uncheck it we want to only allow images from here okay so I'm going to click on the Finish let's click on the save all right so these three Fields actually are required for the blog and I'm going to create another collection here as well so I'm going to name it category okay so this is the category these are the categories let's click on Advance let's click on the continue and for the category I only want to add the text here so this is going to be the title of that category click on this this is a required field and this is a unique field click on the Finish so this has been added and also I want to add another field to make the relationship between the categories and the blogs so I'm going to click on the add another feed this is a relation and uh I hope that you have some understanding about one to many many to one and many to many relation and to add the many to many relation I need to click on this many to many relation means that uh multiple categories can belongs to a multiple blogs okay so I'm going to click on the finish I'm going to click on the save it's restarting and uh it will be adding these blogs and I can click on this blog and uh here you can see that this field for the categories is automatically added in the blog as well and in the category as well so because I checked the men to manyu relationship so it is automatically created okay so now we need to add some data in this content for the blog and the category I'm going to click on the content manager on the left side and I can add the data and here I can see the different collection types are added so I'm going to click on the categories and I can add a new entry to it so for the categories I can have a different entries let's say uh machine learning and uh I can actually select different blogs that which blogs belong to this category currently I don't have any blog that's why I'm not able to add different categories so machine learning is the category added let me click on the save so this is added over here and this is the default created ad and updated ad automatically added over here so this is the def draft but um I can actually uh publish it once I'm completing all the categories over here but first of all I'm going to click on the blogs and I can click on the create entry and I can create different blogs for that so let me add these blogs uh by copying from my notes so this is the title of the first blog for the code do documentation and I'm going to add the description for it and you remember I checked the reach text box that's why it's showing these kinds of options I can make bold italic and have different options is this if I had to select the text box it would just be similar to the title so that's why I added the reach text box now I need to select the categories from here and also because it's the menu to menu relation I can select the category for a Blog over here as well as I can select the a Blog while adding the category okay so now I need to add an image for this particular blog for the documentation so let's click on it and currently there is no image I can click on the add new asset and I can browse file from my system to add the images so I can click on the docs I can open it up and I can upload one asset and I can click on finish and our image description and title is added and I can select the categories but the machine learning does does not belong to the code documentation so I'm clicking on the save and I can click on the publish directly as well so I can actually click on the blog so you can see that this is added and it is published as well and just like I've added one blog and one category I'm quickly going to add more categories and more blogs to save your time all right so I've added all the five blogs including the description and the images and uh I'm going to click on the category and I've added these three categories these are not published yet I can click on it and click on the publish for every category that I have created so let me do that so these are published and now from here I can actually assign different blogs to this particular programming categories from here so let's see this is for debugging this is for data structure let's add that and uh build scalable web application with micro Services um so let's add this as well best practices for code so I'm going to click on the save and uh let's go to the blog and from here I'm going to assign these blogs to the category from here as well so this is for the debugging and I can add the debugging category from here click on Save and click on the blog and from here I can click on this machine learning and I can assign it a category of the machine learning all right and if I click on any other it is already assigned to the programming because because I added it directly from the machine learning uh the programming category all right so we are done with creating our collection and adding the data to those collections now it's time to get the data using apis and in order to do that I'm going to click on the settings and I need to create an API token for that so I'm going to click on it and I can name any API token to it so let's say that nextjs uh blog this is the name you can name anything to it unlimited token duration and this is I can select the full access that will be having the write and update access as well but currently I only want the read only access and I can click on the save and after this it's going to give me this particular token which I need to copy and I won't be able to see it again I will have to create a new token so I need to copy it in my notes so that I don't lose this token later on once I save it okay so also once we add different token we can manually add different permission using it uh by going over here but I don't want to do that for now I'm going to click on the save and if I click on API token this is already created okay but first of all um I'm going to give you an idea um that if I go to the roles and uh click on the public from here we have this public access to this apis as well if we want to have publicly access this data for the BL blogs and the categories okay so I'm going actually select the find and the find one by clicking on here using the get request and for the blogs I can actually get it publicly if I click on Save and now I will be able to fetch the data publically without using the API token this is just to show you but I won't be using it I will be using an API token to fetch the data but first of all I'm going to click over here you can see that we have this Local Host colon 137 and I can click on the forward slash and I can click on/ API SL blogs I'll hit enter because I have given it a permission to have a find and find one so now it is returning me the details of all the blogs using this public API it has this ID and it has this attribute attribute contains the title created at updated at published at description uh and these things Okay so so now uh we can actually fetch the blogs uh populate all by clicking on it we can fetch the single blog as well like this and uh I think we can fetch the images as well so I can write question mark populate equals to All by adding this one static now you can see that it is returning me the image data as well that is associated with this particular blog and using this image attribute we can go to this data. attributes and Dot URL okay so this will be uh the key that we will be using to show the image in our frontend UI okay so now let's go to our code and here I'm going to be using uh that API token in our front end application to fetch the data for the list of categories first okay so I'm going to open up the next blog I'm just going to move it down let's run over nextjs project as well by npm run Dev and here first of all I'm going to create a new file EnV and inside this file I'm going to create add that token which I just copied so I can name it strappy API uncore token equals to and this is where I can copy that token which I have copied so I'm just going to copy it yes so this has been added let's save this file and let's close it now we will be using this token to fetch the data in our nexts blog so I'm going to open up that categories and inside it I'm going to call that API to fetch the data so instead what I'm going to do is I'm going to open up the page. TSX file and I'm going to call an API over here and pass that data of categories from here in this Cate categories component okay so this is a server components I hope that you have some understanding about server and client component in nextjs server components loads uh the data and loads the component from the server side and whenever we have some interaction like the Click event on the user that is we have to convert that into a client component just like when we added the onclick event on uh this category uh it has this on click event that's why we had to use the used client component okay whenever we need to call an AP to load the data in that case uh it's always a good practice to leave the component uh from the server s okay so here in this I'm going to create a new function so I can write the async function and I can name this function fetch categories and inside it let's add some options I want to add the token before calling an API so I'm going to add the headers column and then the object and it is is going to be the authorization and this is going to be the [Music] beerer dollar sign and then I'm going to write the process.env strappy let me copy it from that EnV file uh so I don't make any mistake in naming it so this is how it's it is looking like so we have these options headers and the authorization so after this I can actually add the tri block and I can write the const res equals to A weit and I can write the Fetch and I need to call that URL to fetch the categories so our backend strap PCMS is running on this particular URL let me show you Local Host colon 137 but sometimes it gives us some cause issue so there is another URL that is also representing the local URL in our system so this this is going to be the HTTP column and this is going to be 127.0.0.1 and I'm going to write the 137 SL API SL categories okay let me verify this if I'm able to fetch these categories so categories and now you can see that because from the dashboard I need to uh add different roles to the publish to fetch the these categories I can click on the find find one save and now I'll be publicly able to access it to test it on my browser all right so this is how it's looking like we have the data and data is giving us and also it is giving us this meta information to handle the pagination if we want to do in our front end okay so here we have actually called it and after that I need to pass the token so but here we have already made these apis public we don't need to pass this token now but in case uh in real word application you don't want to make these apis public that's why I'm showing you how you can create token and use uh to fetch that data in your any application the front end application so we have this res and after this we can get the response equals to await response. Json it is going to be res. Json over here and uh then I'm going to return the response from here so we have to add the catch error as well so I can simply log the error so let's save it now and uh in this home component I'm going to call that function the fetch categories at the top and pass the data to the categories component so I'm going to write the con categories equals to await fetch categories from the top okay and also whenever we use a weight we need to add the async and we have these categories we can pass it to the child component categories and then the categories currently it's showing an error because we need to receive it in our child component which is the categories so here we can receive it by writing the uh categories and now the error should be gone from there um it is showing the type error here you can see error is gone and we are able to access these categories okay so now we need to remove this thing and I'm going to iterate through each of these categories using the dot map function using that categories which is being passed from the parent component so I'm going to write the categories. data. map and this is going to take the category of type object or any you can pass it to it and inside this I need to cut this and paste over here okay so let me also add the any data to it so this will require a key as well otherwise it is going to give us a warning in the browser so category do ID okay so then I'm going to pass a single category to the child component as well to load the title okay it's giving an error because we need to receive the cat in the child component as well so I'm going to write cat of type any okay so here we have this title and I can show the title which is being fetched from that strappy CMS so cat if I go over here we have this uh data we have already iterated through it and then we have do attributes. title so I'm going to write attributes dot title okay so now I hope that it will show the title on the UI let's so it's not showing any list of categories let's see what we have here and where we have done something wrong all right so here we are calling an API to fish the data it is being passed to this with the name categories so we have this there is a spelling mistake categories over here let's see if this was an error let's save it and I'm going to navigate to theow browser back it's still not showing let's see so we have this categories map and the categories and then um okay this is the mistake that I do quite often that we don't want to add this curly braces instead we need to add the parentheses instead of adding this curly braces okay so this has been added now let's save it and let's go go to the browser all right so we are able to fetch the titles of all the categories coming from this content manager I'm going to go over here so these are the titles which is coming from here and we are able to fetch the data from that CMS of strappy okay now I want to fetch the list of blogs from that CMS so I'm going to open up the page. TSX file and I'm going to copy this let's paste it over here and I'm going to change the name of the functions to fetch blogs and uh this is going to be the blogs from here as well okay so here we want to fetch the blocks but along with that we want to fetch the images as well I just showed you on the browser how to fetch the images populate equals to static so it's going to return me the list of blocks with the images as well and here I'm going to fetch the blogs as well so I'm going to write the fetch blogs this is going to be the blogs and I'm going to pass these blogs to the child component so I'm going to write the blogs equals to blogs all right so let's go to our blogs component and here I want to receive those blogs over here so in order to receive that as you know I've already done we need to add the curry braces and I'm going to add these blogs any okay so I'm just going to remove rest of two stuff I'm going to I trade through these blogs to pass the data down to the child component of the blog card okay so I'm going to first of all I can actually uh I trade through it I also need to filter out based upon the category but that is what I will be doing it using the context API for now I'm going to render all the blogs in this component so I'm going to add the filtered blog maybe so I'm going to write the blogs question mark Dot and then I can add the data question mark Dot and then I will be writing the map and then the blog okay so this is what I will be adding these parentheses and then I can actually pass the data to the child component let me cut this out from here and this is has to be of type any and uh this is going to take the blog equals to blog okay so this is being passed it is showing some kind of error let me hover this out missing key yes I need to add the key to it so key equals to blog. ID all right so this is being passed to the child component I need to fetch it over here so blog of type any we we can actually create the proper data type for this data but just to save your time if you want to learn the types script adding the interfaces and the types I have a separate video for the typescript in nextjs check out my channel playlist nextjs 13 tutorials you can learn everything about the typescript in nextjs okay so in this card I can actually fetch the data like the title description uh to show it uh on that card okay so first of all I need to fetch the image so I can write uh the source here as well so I'm going to first of all I can actually add the title and then the description so here is the title I can add the blog. attributes. title so it is showing make sure you add the Capital Title this is our name in the strappy CMS and then we have the description but what I want to do is sometimes the description is too large on this particular card and you can see that uh it's already iterating there are five blocks in the CMS and it's already loading the five blocks so over data is successful F being fetched all right so now if I just save it there seems an error because the of this source so now you can see the title is loading up as well and now we need to show the description but I want to add the ellipses at the end of description after specific length Okay so I'm going to truncate the description at the top and store it in the variable first so I can actually write the uh truncate blog description equals to I can write the blog. attributes dot description okay and I can first check if the length is greater than 80 then I can actually write the blog. attribute. description do SUB string and I only want to show the first 80 characters okay and after that I want to show the dot dot dot okay and then I can add this and I can add the blog. attributes. description simply fully description I want to show to it let me copy this and I'm going to add this over here so this will be visible on the UI let's see yes you can see that we have uh this description and after 80 characters it's showing these three dots so our truncation is working fine now we need to show the images which is coming from uh uh that back end so but here uh you if I go over here I want to show the uh blogs with the populate question mark So populate equals to static all right so this is the URL that I want to show uh but before that I want to append it with the actual ual URL if I directly add this URL it will append The Local Host colum 137 I don't want to do that I want to add this URL over here okay so what I'm going to do is let's go over here I'm going to create another variable so I can write the image URL equals to and here I can write the HTTP column and I can write 127.0.0.1 and 137 okay and after that I can append blog. attributes do image. data. attributes. URL so this is what I'm navigating from here so we have this image then attributes then attributes have another URL okay so let's copy this one and and let's paste it in the source so let's save it let's go to the UI and we have this one all right this was expected we need to go to the next config file and in this file we need to add the different base URLs from where we are fetching the images it can be the real uh google.com it can be the any um image website that you are using any public URL as well so I'm going to add the images and then I need to give the domains the list of all the domains from where I'm using the images in my nextjs application this is the nextjs specific thing so I will be writing this one so let's save it now and uh let's refresh and it should work fine now because I've changed the config all right so it's loading the images but these are too big let's see uh if we are able to add some CSS to it for this image maybe we want to add it over here so yes we needs to add I'm going to add the class name and here I can write the relative and width full and height equals to zero okay and uh if using the Tailwind CSS we want to add Uh custom styling without Tailwind CSS we can obviously add the styles to it directly let's add the pedding bottom just like we do it in our react so we can add the 100% okay so let's save it and let's see yes you can see that our cards for these images are loaded pretty well and uh we can click on it currently this data is not Dynamic which we are just going to make it and now we need to make some click uh on on these categories and based upon the categories I will be loading these categories uh the list of blogs actually uh but first of all let's pass the data of these blog post to the child component uh on the different route for the blog detail page okay so here I'm going to open up this page. TSX file here uh there is a drawback if I pass the data from that component to another component even if I use the state management system uh to actually load the data in other component and try to F the data over here if someone go to this URL directly uh without navigating to the homepage then that list of block data will not be able to fish but instead what I want to do is I want to call Api directly on this page so that if someone directly opens up this URL he should be able to fet the data of that particular blog based upon the ID of that blog which is added in the URL of that browser okay so now I'm going to add and call the API in the page. TSX file as well okay so I'm just going to copy that whole function for fetching the list of blogs I will be modifying it a little bit so open it up so I'm going to paste it fetch blog and it is going to receive an ID from the component of type number okay so I'm using the same token and here it's calling that blogs so to actually fetch the data of the single blog uh I'm going to use this character and after the blogs I can add forward slash dollar sign and here I can pass that ID okay and let's add this character over here as well so it is going to return us the data of the single blog based upon this ID and uh it is returning this now in this component page I can also change the name of this as well uh but it's not required so I can get the blog blog await and I can pass the fetch blog and I need to pass the ID okay so in next yes 13 there is a way to get the data of uh the dynamic uh params in the URL and we just need to add destructure the params property over here like this okay and I also want to change it to async because we are using a wait over here and using that params I can pass the ID to that function which I have used over here all right so now using this blog I can get the data of the title image and the description for this particular blog but first I want to test if we are successfully able to fetch the data from the API from strappy if I refresh uh it's showing not found so means that we are not able to fetch the params doid properly so what I'm going to do is first of all let's go to our list of blogs actually the blog card and here we are actually passing the static value which is the 23 and we need to make it Dynamic using the blog. ID okay so I'm going to add the dynamic value to it let's add this character first of all and then I'm going to write the dollar sign blog. ID okay so let's refresh now and uh I'm going to go back let's refresh it first of all and then I'm going to click on any of these blog cards let's click on it and we are navigated to slash3 ID if I go over here and now we are successfully able to fetch the data of a single block post post that we can bind in our page okay so now I'm going to bind it with the title then description and then the image first of all I'm going to open up this one the blogs list blog card actually and I'm going to copy the image URL let's click on it let's paste the image URL and uh it has this image URL let's copy this and paste P it over here it will show the image and also I want to show the title here as well so I have this blog dot attributes um where is it let me go over here so we have that uh data. attributes actually so blog. dat. attributes. title and just like this we want to show the description as well so it will be be coming from the blog. data do attributes do description let's go to our browser and see so we have this error of undefined uh so we have this blog. data here okay so let's see uh there is no error now currently it's showing some kind of warning about this particular property it is actually deprecated but that's fine for now so let's save it let's go all right so we are able to to face the image we are able to face the title and then the description all right so we can go back I can click on it and we can actually get the data for this particular blog and if I refresh it it will be called again you can see I have refreshed and this data is fetched again from that API and we are able to fetch the data let's modify this published date as well so we have this published on um I'm going to write this thing so I I can actually add the space after that and then I can load up the data so space and then this curly braces is going to format the date but if I show you the date format in the terminal uh we have this this this format okay I want to convert this date into a proper date and time uh so in order to do that we can use the buil-in Constructor in Java script and I can write the blog. data. attribute dot [Music] publish at okay and after that I can convert it to two local string this one let's refresh let's save it let's go all right you can see let me zoom in and it is showing a proper date and proper time when this blog was published in our strappy CMS and just to give you an idea the reason I try to add these question marks in these uh over here you can see these question marks and I add the question mark um in other files as well like the list of blogs like the list of categories as well um so if I add the question mark then it will not throw these kinds of undefined error even if the data does not exist in the database in the backend API so it's always a good practice to add the question mark I've not added yet in in here but um I would recommend you guys to use question marks whenever you want to fetch the object properties all right so here we are able to fetch that one thing is left in this blog application is to load the list of blogs based upon the selected category and for this I will have to create the context API there can be a lot of ways you want to handle but just to explain you an idea of context API sharing the state the data between multiple components we can use the Z stand Redux context API I've already created different videos on these topics in my next yes tutorials playlist so let's go ahead and create the context API to handle the data so I'm going to create a new folder first of all here and I can write the context and inside it I can create uh different file so I'm going to name it category context you can name anything to it okay so inside this I can actually U make it use client because I will be using a hook inside it uh that will be the create context and the use state for using hooks our component needs to be the client component we cannot use the hooks in the server components in nextjs 13 so I'm going to import that create context from react and uh use state from react okay so this is going to be from and then react all right so after that I can actually export const category provider which I will be wrapping my layout and then I will be passing all the children to it from that layout file and uh this is an arrow function curly braces and then I will be creating a state for the selected category I can set the category I hope that you already aware of these States from react okay if you don't know I've already created the videos in my react playlist the best practices of uh use State hook use effect hook um and how to avoid different kinds of Errors using it by default the value will be null okay and then let's add a function change category equals to cat this one and then I can add the set category and I can give it the value which is passed from here okay so inside this context we want to return something so return parentheses and I will be returning it category context uh this is something which I have to create at the top so I will be exporting that context so category context equals to create context and I'm not going to pass anything to it so I'm going to use that create context and it gives us a provider function and we have to actually pass the value to it and I'm going to allow all the components to be able to access the category variable and the change category function okay so inside it I'm going to wrap the children all right so I think that's pretty much it we need to do in this particular context now I need to go to the layout. TSX file and uh here and I'm going to wrap that context uh provider which I have created over here which is actually this category provider Okay so here within this div I can write the category provider actually I need to maybe I need to save it let's go over here let's save it okay so category provider like this and let's cut this from here and it's not imported so we actually need to import it at the top by default I'm not not sure why it's not finding actually it's the part of vs code so I can actually fetch it uh using the category provider so let's add the category Provider from I'm going to write at context SL category context okay this is the file so now why I have done it actually I have here I'm actually allowing this particular context provider wherever I'm wrapping this particular provider I will be able to access both the category and the change category function so whenever from the UI uh I will be clicking on any of these categories I will be setting the updated category over here and wherever I'm fetching the list of blogs I'm going to fetch the list of blogs actually filter out the list of blogs based upon the selected category uh using this okay so I'm just going to remove it and uh in my uh categories I'm actually going to get that context over here so I can write that uh change context which is going to be from use context hook this is automatically imported and I can write the category context you can see at the top it is being fetched from that context provider and use context now change context actually gives us the data of uh that context file the category and the change category function as well okay so now I'm going to use another hook so use layout effect which is another hook of react this actually runs before this return function we can use use effect as well but use effect runs after it Returns the value it can cause a bit flicker as well okay so now this create actually this is going to be the change category which is coming from that context file so inside it I can use the change category and then I can write uh the categories categories which is being passed from the parent component question mark data0 do attributes so by default whenever our application is going to get started I'm going to by default assign the first category to that context because um this is what uh makes the application a good user experience okay so attributes. title okay so by default it is going to assign the value uh this one okay so let's save it uh there seems an eror error over here use layout effect from this one uh you are importing a component that needs a use layout is only works in a client component all right so we need to make this component client as well okay so let's save it and uh here it's actually just showing the warning for that Source Legacy property which we can ignore for now and uh now it's time to go to the category and we need to add the click event but first of all let's try to refresh this uh and uh I'm going to fetch that category property from that context and we want to fetch the change category property from that context and I'm going to use the use context hook and uh then I'm going to pass the category context Okay so so this is going to be added over here change context and uh here I'm going to actually call that change category function in that context provider and I can pass the updated category title attributes do title okay and then what I'm going to do is I'm going to check if the category selected I'm going to change the background color of the this card this gray one and change the text color to Black for this so for that uh I'm going to add the styles from my notes which I'm just going to explain you here you can see that the class name is dynamic here I'm checking if the category which is being passed from that parent component is actually matching with the category which is already stored set in our context file if it is equal to that then I'm going to change change the background color of it to White and text color to the black otherwise it will remain to this yellow color and these are the default classes which will be applied in any of these cases okay so let's see what we have in the UI all right so we are able to change it this is the default one and I can click on the debugging I can click on the programming and it will be automatically changed over here but it's not getting changed let's see okay so it seems like that this change category function is not getting triggered I'm going to open up the category context and I'm going to add a console log here just to test that if I'm passing the string for that category or not so I have refreshed it if I click on any programming it's not printed here because it's the client component I need to click and open up the browser go to console and uh I can click on it but the problem is that that function is getting triggered but the machine learning the the first one is automatically getting called so I think the problem is over here we are actually it's getting triggered again and again so what I'm going to do is I'm going to add this empty array over here so let's refresh let's refresh here as well and this is the default I can click on debug yes now that was a problem it was rendering again and again we need to add the dependencies I can click on programming and now we are able to uh change the category state in our context now one last thing we need to do is based upon the selected value of this category in the context this value we want to filter out the blogs okay so first of all let me remove this console log from here and uh I'm going to open up these blogs and uh I'm going to filter out the blogs based upon the selected category so in order in order to do that first of all I need to fetch which selected category string is stored in that context okay so category equals to use context and then I'm going to give the category context okay and then I'm going to add the filtered blogs equals to blogs which is being passed from the parent component dot data do filter and then blog of type any Arrow function Curry braces and inside it I'm going to return the blog dot attributes dot categories dot data and then I'm going to use the JavaScript function called sum okay and inside it I can actually fet that single category and I can write the arrow function again cat do attributes do title equals to category which is being stored in the context okay so let's save it and uh this is going to store the filter data based upon the title is matching with the string of category stored in the context I hope that it will work fine and uh the attributes include the categories as well let me Show You by running uh this one and we have the data do attributes and if I go down you will see that it is showing the categories the relationship between blogs and categories can be found over here categories. data and it is an array again okay so this blog is actually belongs to this particular category now uh I want to copy this one and I want to replace it with with this blocks and I don't need this data for now all right so let's save it now there seems an error uh so we I think we need to make it used client because we are using the used context hook okay so let's save it now and there are no error in the terminal let's go to the browser here and I think it's already started working fine this blog belongs to this machine learning and this is the debugging which belongs to this particular blog we have the programming these three blog post belongs to this and uh now I can actually navigate to a single blog post let's click on that and yes we are navigated to it we have the title description let's go back let's click on debugging and we are navigated to it and uh these are the different warnings let's try to remove these so I'm going to open up the page. TS x file it's asking to remove this object fit cover if I remove it let's see what happens uh let's refresh all right so it was actually cropping out the image currently it's not cropping and it's showing it completely and uh it's not showing that particular error but now it's showing another error please add the priority property to that image let's try to add that I'm going to add the priority let's save it and uh let's refresh and yes there are no errors now in our console this is the single one uh image with Source has a legacy property layout we can actually remove that uh as well so here it's also asking to add the priority to the different image uh element that I'm using over here in the blog card so I can write the priority here as well so let's add let's refresh so there are pretty less errors sizes and the layout you can fix that yourself uh so guys I think we are completed with this simple small blog application but I think uh the major feature of uh integrating the strappy API in our next J 13 application is completed I hope that you have got an idea how to work with strappy how to make the apis public in strappy how to create API token and how to add the content add the relationships and use those content using the apis in our nextjs application with the different components different layouts and different uh categories relationship with different blogs adding different routes for the blog detail page if you have any question you can comment below this video and do subscribe my channel because I'm putting a lot of effort creating these videos for you guys your interaction with my videos through comments through liking my videos and through subscribing my channel really encourage me to create more videos for you guys thank you guys so much for watching see you in the next video

Channel: Programming with Umair

Views: 11,649

Keywords: nextjs 13 strapi blog, strapi, strapi v4, strapi vs sanity, strapi crash course, react, javascript, nextjs 13 blog, build blog app with strapi, tailwindcss blog app, Learn strapi v4 project, build project with next.js 13.5, apis with strapi, strapi cms with nextjs, how to deploy strapi on vercel, next js 13 tutorial, design blog app with tailwindcss, context api with strapi v4, strapi v3 cms tutorial

Id: g5UiXp4AbeE

Length: 80min 58sec (4858 seconds)

Published: Mon Oct 23 2023