Next.js | Fetching Data with Contentful CMS Client

[Applause] [Music] what's going on guys in this video i'm going to show you how to set up the contentful javascript client so that we can fetch data from the content from delivery api in our next gis application we are going to create a new content model and generate the api keys from the content full console and then set up the javascript client in our next js application remember to subscribe to the channel and let's get started okay this is the code of our index page in our next js application where we are basically showing the list of shops that we get from this data file so now i'm going to create a new content type in contentful using the same fields that i'm using here and instead of getting the data from this local file we are going to use the content for client to fetch the data using the contentful delivery api from the content full administration panel i'm going to create a new content model or content type so i'm going to click on content model and now i'm going to click on add content type i'm going to call this content type shop okay i'm going to click on create and now i'm going to add the fields by clicking here on add field this will be a text and the first field of this content type will be the title of the shop then i'm going to add another one that will be the location of the shop and then i'm going to add the company field and the language field company and finally language field okay now i'm going to save this content model okay this is our shop content type with the title allocation and company and language i'm going to click on content and i'm going to add the records that we have here within this data file here i added these three shops that we have within this data file and i already published this content because we're going to use the delivery api so we need to publish the content to be retrieved by the contentful delivery api now we are going to create the api keys so we need to go to settings api keys and we need to click on add api key i'm going to call this next js shop app and then we click on save and i'm going to grab the space id and the access token for the content delivery api and i'm going to test this first from postman so let's go to postman and let's create a new environment so the vitamin name will be let's say content full dev and let's add the space id variable and we're going to paste the value that we grabbed from the con full console the next variable will be the access token and i'm going to grab the value from here i'm going to paste it here and i'm going to click on add and now i'm going to select the environment and i'm going to click on send and we're going to get the list of shops that we just added using the contentful console here we are calling the entries endpoint from the contentful delivery api and these are the records that we get from that api so here we get the items property and within these items array we get the three records we get the signal node engineer this integral interior role and the senior python engineer role as well and some other important fields here are the identifier that is an identifier generated by contentful that we get here within this sys property so from our next js application we're going to access this identifier from here and also the fields using this fields property okay now i'm going to install the contentful client for javascript so this is npm install content full okay and the content from client for javascript requires two environment variables that are basically the contentful space id and the contentful access token and i'm going to grab the values from the administration panel so i'm going to copy the space id and i'm going to paste it here and i'm going to copy the access token for the content the library api and i'm going to paste it here okay now let's go back to our shops page and here instead of importing this shop's array from the data file let's create a variable actually a constant const const shops and here we are going to use the contentful client so we are going to create that client here so this is const client and here we can do require content full and here we can do create client and here we need to pass the two environment variables so this is a space equals to process dot and dot and let's grab the values from here this is contentful space id and the other one is access token and again this is process dot n dot content full and this is access token and here we can use the client to get the list of shelves from the contentful delivery api so this is client dot get entries this is the method that we need to use and this is a promise so this should be a weight like this okay and here we need to make a few changes so here this prop that we are passing to our shop card will be actually the fields property that we get in the response from the api so if we go to postman actually this is the property that we need to pass to that component so let's go back and here we need to pass shop.fields and the identifier of the shop that's about postman the identifier of the shop is this id property that is within this sys element so let's go back and this is shop dot sys dot id and i'm going to make another change here this will be get static props because we are getting the data from a cms so it makes sense to use a static site generation approach in this case and here this is shops.items if you go to postman this is the element that contains the array of shops let's go back and now let's try this npm run dev okay now let's go to the shops page in the browser and as we can see here we are rendering the three elements that we have as part of the content that we created here from the content full administration panel that's all i have for today thank you guys for watching and i see you in the next video take care bye [Music]

Channel: Pragmatic Reviews

Views: 6,200

Keywords: Server side rendering, ssr, getStaticProps, Rest api, rest api routes, rest api next, Next js react framework, Next, React, Next pages, Next routes, Next Links, jamstack, json, bson, javascript, js, web, coding, static websites, Node, Node js, nodejs, react components, react component, Link, Next router, Next Link, react js, reactjs, framework, react framework, typescript, contentful, contentful cms, cms, contentful delivery API, api, contentful client, react, react server side rendering

Id: j7p6l4AZ6no

Length: 8min 34sec (514 seconds)

Published: Mon Jan 04 2021