Next.js | Fetching data from Strapi REST API

[Applause] [Music] what's going on guys in this video i'm going to show you how to consume the strappy restful api so that we can fetch data from the strappy headless cms in our next js application first we are going to add a new content type using the strap administration panel and then we are going to create a custom javascript client in our next js application don't forget to hit that like button and subscribe to the channel and let's get started this is the shops page in our next chase application where we are rendering the list of shops that we read from this data file so now we are going to add a new content type in strappy that is going to be the same data structure that we are using here and then we are going to replace this file with a javascript client that is going to allow us to fetch the data from the strapy rest api okay now i'm going to open the strappy project i'm going to put the link here to the video so you can understand how to set it up here i'm using strappy with mongodb atlas so now let's run the strap administration panel this is npm run develop our strappy application is up and running so now let's go to the strap administration panel and let's add a new content type here we are going to add a new content type this will be a shop with these fields so let's click here on create your first content type and this will be shot and now let's add the fields we want to have a title we're going to have a company the location of the shop and finally the programming language for the position i'm going to click on finish and i'm going to click on save okay now we are going to allow to consume the get endpoint of the strappy restful api so we can access the data of the shops from our next series application so let's go to settings now let's go to roles and let's click on public and here we need to click on here on the find method so we allow to get the list of existing shops from the strategy restful api i'm going to click on find and this is the endpoint that will be public and i'm going to click on save now i'm going to add a couple of shops the same data that we have within this array so let's go back and i'm going to do that really quickly okay here i already published these three entries now let's go to postman and let's test the get endpoint to get this list of shops so that we can use that endpoint from our next chase application let's go to postman and here i'm going to perform a get operation on the shop's endpoint and as you can see here we get the list of shops okay now let's go to our next trace application and let's set up a custom javascript client for the strappy restful api okay let's close this and first let's add a new environment variable that will be the url of the strappy restful api so let's call it strappy api url and i'm going to grab the value from post one i'm going to copy this and this will be the endpoint localhost 1337. let's close this and now let's add a new folder i'm going to call it lib and here i'm going to add a new file where i'm going to put the stropy client so this is strappy client dot js and here i'm going to create a class export class this is default and the name of the class will be strappy client i'm going to add the constructor and here i'm going to add a method to fetch the data from the api so this will be async fetch data here we're going to receive the path that will be the endpoint of the restful api so this is path and here first we need to append the path to the base url that we have within this environment variable so this is const this is request url here i'm going to use template literals so this is process process dot n dot and i'm going to grab the name of the variable from here this is strappy underscore api for url and here i'm going to append the path of the endpoint okay and here i'm going to use the fetch function from javascript to call this endpoint so this is const response and this is a weight fetch and i'm going to pass this request url from here and here we're going to get the data from the response so this const data equals await and this is response dot json and we're going to return the data okay now let's go to the shops page and first we need to remove this and we need to import the strappy client this import strappy client from and this is sleep and this is i'm going to set a constant here this is client and we're going to create a new instance of the class that we create new strategy client and we're going to use it here so this const all shops equals to client dot fetch data and we're going to pass the path that is slash shops and i forgot to add a weight here this weight and i'm going to set this value to the props and this is the list that this page is going to get here and that we are going to render here within this shortcut and here i need to change this property if we go to postman here we are going to see that the identifier that we get from this api is underscore id so i'm going to use that one so this is underscore id here we're using get a static props because we are consumed data from a cms and we are able to access data before we get any request so it makes sense to use this approach here okay now let's run our next application this is npm run that okay and now let's open the shops page and let's see if this works as we expect and as we can see here we are showing here the list of shops that we get from the strategy restful api that's all i have for today thank you guys for watching and i see you in the next one take care bye [Music]

Channel: Pragmatic Reviews

Views: 7,206

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

Id: --zWnl9AgME

Length: 8min 20sec (500 seconds)

Published: Mon Jan 11 2021