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.

start-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.

setup-project

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.

branch

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.

roles

In the last stage, there is an area where you can create collections for your content.

collections-1

Creating Collections

To create a collection, you can click to create a new collection and write the collection details.

creating-collections

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.

fields

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! 🎉

project-overiew

Creating Contents

Go to your project detail and click Add Content.

project-detail

Complete your content fields and click Add.

add-content

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.

GitHub

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.

//index.js

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

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

//index.js

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

Full code of your index.js file

//index.js
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}>
      <Head>
        <title>Contentrain Headless CMS and Nextjs </title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

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

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

result

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

Berkay Demirbaş