Strapi Next.js 14 Component Tutorial - Build a FAQ

today we will build a new component within strappy but then also render it in the nextjs frontend and the component that we will build is an fq component so let's start so let's think about an FAQ so one thing that we definitely want to be able to do is to create multiple FAQs so an FAQ mostly consists about questions and answers and then an fq obviously can have multiple questions and answers so for strappy that would mean that we want to be able to add an FAQ to a page as a component so we're going to need an FAQ component that we can put into a dynamic Zone and then uh FAQ component that will have a relationship to an actual FAQ within uh the collection as a collection type uh and then an FAQ collection type will have multiple question and answers components and then a question and answer will basically just have a question field and an answer field and then maybe the answer might be a rich text and then the question will be just a simple text field okay so I guess that's a pretty decent plan uh so let's start so in order to not start from scratch we will be using the Headless content starter kit that I've been building over the last couple of months and build the FAQ component based on that so to get started we will first clone the repository and we will name that FAQ component and then we will set up the Headless stra backend so after cloning we will open this in code Visual Studio code so this gives us an xjs and a strapy base project to strappy and then install the dependencies and after we run the init script and then we start the project so the back end is running and then we can open the admin stra and create a user and now we can go into the content Builder and then start to create our FAQ component as we see there's already quite some things uh here here because of the starter kit that we are using um but now let's have a look into the FAQ so we said that we need is on the lowest end is uh questions questions and answers uh component that consists out of a question and an answer so let's go ahead and build that one first so this is question and answer so we put that into the elements category because this this is just a dependency and not used by its own then maybe we use the question mark as an icon and then we go ahead and add text and this will be the question it will just be a short text then we will also have a rich text field which contains the answer and then the next thing that we need is the FAQ collection type so we will name that FAQ and then the FAQ as we said will have uh component and then we use an existing one and we use the one that we just created which is the elements question and answers and then it will be repeatable and we will name that questions and that's it and then we need a component that we actually use in the dynamic zone of a page and for that we create a new component which we name faq's that will be in the content area and then this will just have a relation to and fq and then this basically is just a wrapper that indicates okay we want to have that rendered on the page okay so there it is so and then what we need to do is we need to make the FAQ available in the page so the page has uh components Dynamic Zone and here we put the FAQ component so we see under content and then FAQs you just add this one and save and now it's available okay so next we want to start the nextjs front end so for that to do we go into the Headless nextjs and install all the dependencies and then we also run the init command and then after the init command what we need to do is we need to create an API token uh because we don't want to have the strappy end points being available publicly um but just via an API token and that's actually possible because of the react server components in nextjs 14 because then you have all the access to the data from strapy uh being done via the back end and there you have the API token available but in secret so for that we head over to strappy we go to the settings and API tokens and then we create a new one we'll call it front end and then we make that uh unlimited because we don't really want to uh have the access restricted suddenly of course you can Implement times that the token will be recreated over time but we definitely won't want to implement that right now and the token type will be read only and now we copy that token and then go over to our nextjs code and in the Headless nextjs what we see from the init script there is an N created and then we put the AP stripy APA token here so we don't care about the other uh Secrets now because that's just a local explanation for the tutorial and we won't deploy that okay great so we did that and now what we going to do is actually build a page and it should be the homepage so we will create in strapy a new page with the path being just the home so we create a new page this is the path and then we call it maybe home and then we add something like World here make sure that we publish it and now what we can do is we can just start the front end so we start the front end now by running mpm run Def and then it's up and running on Port 3000 so let's have a look and there it is so this is our first page so the next thing we need to do is we want to put our FAQ component here so we head over to the the page and then in the components in the content section we see our FAQs and we don't have any relation because we don't yet have any FAQ created nevertheless we will store that go to the FAQ and then create a new one so what questions do we have how late is it it is evening time what day do we have it is nearly Christmas and then we will also have that one in bold okay so we just have an FAQ we'd also publish that actually the publication we don't really need here so let's change that so we don't want the FAQ itself to be publishable because um the page that it is being being used on will be publishable and that should be good enough okay perfect so now we do have an FAQ and we can add the relation in the component to this FAQ so now if we reload the website we see this no type name so this indicates that we have another component that should be rendered but we actually don't really know anything about the component in the nextjs frontend yet so let's change that so the first thing that we need to do is we need to create a query so we are using graphql and then what we need to do is we need to define a fragment for this FAQ content uh component and we do that by creating a new FAQ fragment from gql and then we say fragment and we call that FAQ fragment is on the components content fa Q to the component and then in order to understand how exactly the data structure looks what I tend to do is to look into the GFF gu API so we just head over to report rql there we have the playg on and now we can do uh query and then we want to have Pages whatever page and then the page has uh this structure data uh attributes and there we have the components and then we can say on and then we would already see component content FAQs and now we create the we can see what exactly we we would need so we want to have the ID we want to have the type name and there's the fq which is the relationship and then we also have the attributes and there we have the questions the name is not important we want to have the question and the answer so this then is our fragment so to say so we copy that over and then we put that here and now we have our component uh our FAQ fragment done so the next thing that we need to do is we need to put this fragment into the query that gets the data for a particular page so there is a get page query and here we more or less render all the fragments uh for the components so the components is the union type in my previous videos I talked about that a bit more and then we add that at the right place so component content FAQ that should live here and then we say component content FAQ and then we put the FAQ fragment here so now what we need to do is we need to create a new terminal window so now we have to actually create the graph documents and for that in the nexts project we have a script called mm Run start codent so that that basically watches the graphql documents and then autogenerate the graphql documents for us now we have an exception here as you can see component content FAQ is not noun uh it's actually FAQs so we have to add the S here and then also here and then let's see it automat automatically recreate the documents and everything seems to be working so in our project itself we going to open reload the website again and now what we can see here is a different message it says component component content fq was used but has not been implemented yet so this is actually the component renderer which is the mechanism that is being used to render the dynamic zones in the starter kit and it tells us okay the component content FAQs is not being implemented yet so that that's the next thing that we need to do now is to actually implement the FAQ component in the front end and then how we're going to do it is at first we create a new component in content and we call that faq's and this is the faq's component and then what we need to do is we need to register this component and this we can do in the component map so the component map is used for the component renderer in order to map the components in the dyamic dynamic Zone to the actual react components so we need to register the component content FAQs in this component map and we do that by uh just mapping that uh the basically the type name of the component from graph to the actual react compon component so once we did that let's have a look what is being rendered as we can see this one is rendered here so this is our new component so we don't want to have the component being rendered like this in the default we want to have the component being uh centered so what we can do is we can just wrap this in the component map already and just use the container component and then we will just forward the props like so and then with that um the component is aligned a bit better uh centered uh matching to the to the layout okay so let's implement the FAQ component now so the interface that we will be using is also generated by graph field automatic basically so we have the graph Q FAQ fragment here and then we can see what all we get so we get obviously the FAQ and then let's destructure the FAQ we would have uh data attributes and this is what we what we actually need so we want to have the attributes so let's go there there data attributes and there we have the questions okay so that's what we actually need and then maybe let's say if we don't have any questions we would just return n but then if we do have questions what we want to do is we want to map through them and then maybe to get started we want want to let's take a div and then we need to give it a key and then we leave that the ID and then maybe we just print out the question for now so we go over all of them let's see and here we have it so we do have the questions here and then of course we also want to only show the question but also we want to show the answer and then maybe we want to have this as a headline um so the headline is also a component that comes with this St kit but of course you can just use whatever component you want to let's say it's an H3 and then for that we use the paragraph and then let's have a look so now we would have that so what we actually want is to have this expandable so what we can use for that is the um headless UI which also comes with the starter kit and we want to use I guess the disclosure would be exactly what we need so let's see how the disclosure would work so we have a disclosure a button and the panel and that's what will be one questions or to say so let's head over here again so now we would like to use this and import the disclosure now this needs the key gets the ID and then we want to have the question as the button text and then hidden here in the panel we want to have the answer so let's have a look oh that looks really bad so what's happening here is that the disclosure is using for example US state or uh some activity so what we need to do is we need to make the FAQ component a used client or a client component that does not mean that it is not pre-rendered on the server but it's not a server component anymore and now let's have a look and as we can see it kind of works already so now maybe we want to make a diff around that and we put the key to the div and then maybe we want to have a little bit of margin between those and now that looks already not too bad so we can now improve that a bit so for example here we have the Chevron right icon which we can use in the button and let's use this option and then the disclosure actually has a render prop uh now let's see where we need to close that one so it needs to have been wrapped around fragment because that can only have one okay and there you go that already looks pretty bad so we're going to make that flex and then we also want to make this one to be much smaller and how we can do that is by wrapping that like so and then we say the width should be something like for example six and height six as well and then maybe we want to have a little Gap here like two and now we can see that already looks quite decent of course you can extend and improve on the UI quite a lot which I will definitely do before I put it into the starter kit but I hope you found something uh out of it and now what we can do is we can essentially just add as many questions and answers as we want so let's maybe just do exactly that we have our FAQ we just add another question how are you I am fine thank you save it and then once we render it we see that one here as well so that's it how you would Implement a simple FAQ component in strappy using nextjs with the starter kit it's quite simple but of course it works in any setup that you have using strappy and xjs I hope you found that useful if that's the case please consider to subscribe there will be more videos in the future and of course like the video thanks a lot and B

Channel: Manuel Schoebel

Views: 139

Keywords: Strapi CMS, Dynamic Zones in Strapi, Headless CMS tutorial, GraphQL data fetching, Next.js development, Component-based web design, Modern web development, Interactive web page creation, Full-stack JavaScript, API-driven web development, nextjs

Id: 7UpGCPHZYuw

Length: 21min 3sec (1263 seconds)

Published: Fri Dec 22 2023