What is a Headless CMS?
If you're wondering, how does a headless CMS work? In this video, I'll explain it and I'll show you by putting together a working example in just 10 minutes.
Firstly, a headless CMS is really just made up of two things. The CMS, which is your content management system, often found on the back end and a repository of all your data that's often interconnected. And secondly, the headless part, which is essentially being able to access that data without any sort of overhead, often through an API. This allows you to build your own ecosystem on things like React or PHP or Python.
The point of a CMS, which is headless, is to give developers the freedom to manage their data without having to lock it into any specific front end. It also gives you the freedom to access it via multiple apps and systems. With that said, let's build a basic headless site.
Setting Up the Next.js Project
For this part of the video, I'm going to create the React app that's going to be hosted on the Next.js platform and I'll fetch a data from an independent CMS through an API. While that sounds complicated, it's really only five or 10 lines of code. Let's begin. I'm going to assume that you already have the things like Node and NPM installed. So, we'll begin by installing Next.js by simply running NPX create next app at latest in our terminal. Let me open up VS Code and do this now.
It'll ask you what you want to name the project. For this example, I'm going to call it headless CMS Next.js. I'll use the recommended settings such as TypeScript, Tailwind CSS, and the app router. And once it's been generated, I'm just going to browse into that specific folder on my VS Code instance. With that done, we have React up and running. I can run NPM run dev to make sure that it runs okay on a local host server. And here it is.
Creating the CMS in Wix Studio
Now, we'll create the headless CMS. We'll use Wix Studio. They have a page dedicated to creating headless sites here, which I'll link in the description. And this is probably the best way to do it, but I'll also show you a way that you can create a headless site if you already have a site on their platform. Just go through these four steps. For this, I'm just going to say that I'm using it for a personal project as a developer and I'm just going to use the CMS part.
I'll call this project headless CMS using Wix Studio. This will take us to the dashboard where we can head over to the left here for CMS and start creating content. Let's do that now. I'll select create collection and for this collection I'm going to generate it using AI since we're just doing this as a draft. I'll call this a collection YouTube videos about headless CMS and for the description something like topics or tutorials about headless CMS. The AI suggests what sort of fields I should have for this and starts creating some template data for me to use so that we can actually test this out.
Configuring Headless Authentication
Now I'm going to configure the headless CMS OAuth so that we can connect to it. Heading to the main setup page we're going to head to headless settings and here I'm going to select to create a new client. For this client I'm going to select web and I'm going to name this Next.js since that is what's going to be utilizing this connection.
There's one more step which asked me what stack I'm using. In this case I'm just using JavaScript but you can select React as well. Most of these have the same SDK which they use which is the package from Wix here for SDK and data. We're going to install this later in VS Code as well as look at this sample code to make sure it's all working. Now I'll click continue and view setup and it's going to give me an API code which I can use later on as an environmental key so that I can access this on Next.js.
Preparing the VS Code Project
Now it's time to update our project in VS Code to utilize headless CMS. First I'll need to install those two packages from Wix. So this is the Wix SDK and Wix data packages which I'll install here in the terminal using npm install. Next I want to create an environmental key that we can grab the client ID and pass into our project.
I'll create a file called .env.local and I'll grab the key that I have just over here and add it into that file. I'm going to call this variable something like Wix Studio headless CMS client ID. This way we know exactly what it is and it's the best practice way to use it as a reference.
Fetching Data from the CMS
Now, I'm going to call the headless CMS data. Here in Next.js on app router, I'm going to delete everything in the page file and I'm going to add my own content in here. Right now, I'll just do some text and I'll make sure that npm run dev is running so that we can actually see this web server once more. And here it is.
Now, to establish the connection and import our packages. I'm going to import items from Wix data and I'm going to import the create client and OAuth strategy from Wix SDK. Then, I'm going to set these up. First, let's set up the client connection. Here, I'll pass in const my Wix client is equal to create client. I'll pass in the modules for item and I'll pass in auth with the OAuth strategy passing in the client ID from our environmental key. Now that we have a client, we can call some data. So, let me create a const data items list. Here, I'll await a response from my Wix client from items.query.find.
Here, under query, I need to query the collection I want to get data from. In this case, I'm going to call it from this collection here, which is the YouTube videos about headless CMS. Just make sure you check the collection settings because the collection ID might have no spaces like it is over here. And so, it needs to be exactly the same when we query it. I'll paste in the screen just here.
Displaying and Styling Data
With that, I should be able to pull out the data now. Since we should have access to this server side now, be able to show this in our React client. I'm going to create a map here where we map through all the items and I'm going to retrieve and showcase the title and description. Just like last time, make sure you go to the actual CMS and view the fields because this one here, for example, is called a video title, not title. So, we need to make sure that we're referencing the same variables. Let me copy this as well as the video description in over here and use this inside of the React component and let's see if all of this now works.
I'm going to hit save and open up the website and here it is. It's looked through all the articles in the CMS and showcased them on Next.js. Now to add a couple more fields and make this look a little bit better. I'm going to add the image field here which will pass in a URL for the image. I'm also going to give it a container which has flex so that everything is aligned by a column. Instead of using an image tag which might have a variable height, I'm going to put this image inside of a div which will use a background image that is covered and centered so that it looks nice on the design. And I'm also going to add some styling to the H2 block and the description block and then nest everything inside of a container. With that done, we have our headless CMS content here inside of our Next.js app and all of this only took 5 minutes.
If I head to our CMS now and say change the title here for our YouTube videos, then head back to our website and hit refresh, you'll see that the title updated. And that would apply the same for images and other content.
Deploying to Production with Vercel
Now to deploy this headless CMS to production, I could simply run npm run build and host it myself. An easier way is just to use the in-build Vercel Next.js hosting platform. I'll create my package here inside of GitHub and push it out to be a repository that's in the cloud and then inside of Vercel, I'll click start deploying. Since it's in GitHub, I can now add it as a project in Next.js. I'm going to select it right over here and import it and all I have to do now is select deploy.
There is one step here I missed out which is setting the environmental variables and because of that, I think it's going to crash when it deploys. So what I'm going to do is set those manually after we have this project up and running. Here inside of the project, I'll head over to settings, head to the left here for environmental keys, select production, and then add an environmental key. The best way to do this is usually just to copy paste it out. So I'm going to copy paste the Wix Studio Headless CMS in here, as well as the key. Now, it's nice and secure, and all I have to do is redeploy.
Final Result and Conclusion
It only takes a few seconds, and now it's up and running. Here it is on this online URL. I can always host this on my own domain name, and that's more or less the entire process from start to end.
As you can see, headless CMSs are easy to set up, and they can be used for a number of things, such as bookings, blogs, e-commerce, session management, events, and pricing plans. There are some quick, easy templates, which you can check out in the link below, as well as additional documentation. I hope you guys enjoyed this video, and see you in the next one. Thank you.
