how to connect next's and Contentrain
Lui avatar
Berkay Demirbaş



How to connect your Next.js App with Contentrain

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.

npx create-next-app <your-blog-name>

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.


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.

git pull

Go to your home page or any js file you want to add. And import your content data from Contentrain.


import ContentrainData from "../contentrain/Home-page/Home-page.json";

Create your constants of the fields you add to the data structure


const title = ContentrainData[0].Title;
const description = ContentrainData[0].Description;

Full code of your index.js file

import Head from "next/head";
import styles from "../styles/Home.module.css";
import ContentrainData from "../contentrain/Home-page/Home-page.json";

export default function Home() {
  const title = ContentrainData[0].Title;
  const description = ContentrainData[0].Description;

  return (
    <div className={styles.container}>
        <title>Contentrain Headless CMS and Nextjs </title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />

      <main className={styles.main}>
        <h1 className={styles.title}>{title}</h1>
        <p className={styles.description}>{description}</p>

Congratulations 🎉 You are connected to your Nextjs app with Contentrain.


Now, visit and sign up to your new headless CMS experience.

Lui avatar
Berkay Demirbaş

Share on