All of the code shown in this tutorial is also hosted in our GitHub repository.
1. A Webiny Project
First of all, make sure you have a working Webiny project set up.
When setting up a new project, currently, there are two project templates you can choose from:
cms. Both include the Headless CMS app by default.
2. Content Delivery API URL
The Headless CMS app exposes data via the Content Delivery API, which is a simple GraphQL API that dynamically updates its schema on content model changes that you make.
Once you have deployed your API stack (using the
yarn webiny deploy api command), you should be able to find the Content Delivery API URL in the console output:
3. Content Delivery API Access Token
In order to access the data via the Content Delivery API, we'll need a valid Access Token. These can be created via the Access Tokens form, which you can reach via the main menu:
Create a new token and make sure to copy the actual token string. We'll need it soon.
Creating our first content model
Now that we have all of the prerequisites out of the way, it's time to create our first content model. Let's open the Models section of the Headless CMS app.
Let's create a new content model named Blog Post. Click on the "plus" icon in the lower right corner of the screen and in the dialog that's about to be shown, enter the following:
For the content model group, we'll use the
Ungrouped, which is the default group that comes out of the box with every Headless CMS app installation.
Content model groups give you a way to organize the content models inside the main menu, allowing you to build logical sections for your content editors. You can click here to learn more.
Once we have submitted the form in the dialog, we should be redirected to the Content Model Editor. Let's add two fields:
title as a
body as a
Rich Text field. They will match every blog post's title and body (content), respectively.
Save the changes by clicking on the Save button in the top right corner of the screen.
Now it's time to create the actual content. Proceed by clicking on the View content button, located on the left side of the Save button.
You can also reach the content area by clicking on the newly added Blog Post item in the main menu:
As mentioned, navigate to Headless CMS > Ungrouped > Blog Post and create a blog post or two. Feel free to unleash your creativity. 😉
Once you feel happy with the blog post, you can save the changes by clicking the Save button, located at the bottom of the form.
The next and final step is to publish the blog post, which will make it actually visible in the Content Delivery API. To do that, click on the Publish icon, found at the right side in the form header.
Now that we have covered the basics of creating content models and managing content, we can move on to the Next.js part of this tutorial.
Creating a new Next.js app
We can create a new Next.js app by running the
npx create-next-app command. We will use
my-blog as the project name, and the
Default starter app template with it.
Ideally, you should create your Next.js project in a folder outside of the Webiny project.
Now that we have a new Next.js app ready to go, let's see what it takes to make a simple page that renders a list of all blog posts that we have just created.
Fetching Blog Posts
We're going to start off by installing an NPM package -
graphql-request. This will help us with fetching the actual blog posts from the Content Delivery API.
In your Next.js project root, run the following command:
Once we have these ready, we can jump to the code. The following snippet shows the code located in the
Previewing the page
yarn dev in our Next.js project directory so we can see our page in action:
We have have successfully created a simple page that displays a list of all created blog posts, all powered by Webiny Headless CMS and Next.js React framework.