How to connect your Next.js App with Contentrain
In this guide, you will learn how to connect your nextjs app with Contentrain Headless CMS.
Getting Started
Firstly, you have to create a new Nextjs app.
If you already have a next js-based app running on Git, you can skip this part.
Go to your Contentrain dashboard, and click start a new project.
After writing the details about your current project, you are ready to proceed to the setup part.
Setup your project
Choose your current Nextjs project in the Storage Structure section.
Then you can choose a specific branch of your repository, and path. If you want to work in src path, you can leave this field blank.
In Roles and Permission Settings, you can add new user roles like Content Editor, Publisher, or whatever you want. The Admin role comes by default.
In the last stage, there is an area where you can create collections for your content.
Creating Collections
To create a collection, you can click to create a new collection and write the collection details.
Collection Name:
Collection name is your main JSON data structure ID.
Select Permissions:
In this field, you can define which users can access your collections.
i18n:
You can add unlimited language options for i18n contents. For example, if you add English and Deutch languages, Contentrain will create the /en and /de folder paths in your JSON database structure.
You can also set a collection for your Markdown files. That’s awesome, right?
And then, you can add your fields to your collections. In this case, we have 2 simple fields, Title, and Description.
You can also choose a specific content component like Long text, Single Line Text, Image, MD, Rich Text, Date, and more.
And you have created a project successfully! 🎉
Creating Contents
Go to your project detail and click Add Content.
Complete your content fields and click Add.
Connect with Nextjs
Let’s write some code.
After saving your content, Contentrain has already created the relevant structure for your Git project folder called Contentrain.
Pull your current changes from your project.
Go to your home page or any js file you want to add. And import your content data from Contentrain.
Create your constants of the fields you add to the data structure
Full code of your index.js file
Congratulations 🎉 You are connected to your Nextjs app with Contentrain.
Now, visit Contentrain.io and sign up to your new headless CMS experience.
Originally published at https://contentrain.io.
