25 August 2023
Learn how to connect your Next.js v13 app to one of the popular choice for headless CMS - Contentful. We'll start by defining what a model and an entry are in Contentful, then create a basic model and its entries, and finally display them on your Next.js app.
For our example, we will convert the highlighted section in the image below to dynamic data using Contentful and Next.js.
Nextjs initial display when you run create-next-app app
Contentful account. If you don't have an account yet - sign up here. It's free!
Next.JS v13 app. For our example, I just started a new app using create-next-app. You can follow their official installation guide if you haven't set up one yet.
Let's first define what a model and an entry are in Contentful. A model is a blueprint for an entry, defining its structure, including the fields and their properties. An entry is an individual piece of content, containing the values for the fields defined in the model.
Now, let's proceed with creating each.
To create a new model, in the Contentful dashboard, click on Content model -> Add Content type. You will be prompted with a modal. Enter the details below and click Submit.
Field | Demo Value |
|---|---|
Name (required) | Link |
Api Identifier (required) | componentLink |
Description | - |
After creating the model, you will be redirected to the field creation page of the model. Create the fields with the following details:
Field | Field Type | Demo ID |
|---|---|---|
Title | Text | titleSt |
Description | Text | descriptionSt |
Href | Text | hrefSt |
You can exclude the Ids suffix - "St". It's just my way of naming Ids in Contentful. The suffix indicates the field type. For example, if it's a rich text then I uses "Rt" e.g. descriptionRt.
Now let's create an entry of our new Link model. To create an entry, click on Content -> Add entry. Select Link. Fill up the form. Just copy the texts from the Next.js initial code and do this until the 4 links have their own entry in Contentful.
Screenshot of the first entry of the Link model
After filling out the form, click Publish Changes. A Published text should appear above the button to indicate that you have published the entry. The button text should also change to Change status.
If the status is Draft, you will not be able to pull this. If the status is Changed, this means that there are changes to the entry that have not been published yet. If you try to request this, you will fetch the last published data.
Now to our Next.js app. Let's first install contentful library. This will help us to easily access our entries and models in Contentful.
We will then create a client that connects our app to Contentful.
/app/lib/contentful.js
You can get your Space ID and Access Token in the Contentful Settings -> API Keys.
Now let's start getting the Link entries. Below is the basic way to get your entries. Compare to the old versions of Next.js, you can now make a request without using any side-effects since every file under /app directory is a server file by default.
/app/page.js
Now let's replace the static content of Next.js with our dynamic data. Let's display the entries by looping them using map.
/app/page.js
The final code of our /page.js should be similar to this:
/app/page.js
And that's it! You have now successfully connected your Next.js v13 app to Contentful and displayed your entries. The styling and how the list displayed should remain the same since we did not make any changes to it.
View the source code in Github
I will be sharing more content about Contentful. My blog is actually built on top of this awesome Platform as a Service (PaaS). All these text you're reading here, all text formatting, and even the assets are all defined in Contentful using Rich Text field type.
Thank you for reading! I hope you found this blog post helpful.
Learn more