setup netlify cms with the content layer and nextjs

Nextjs + Markdown + Content layer

How to set up netlify cms with the content layer and nextjs?

The Installation of the netlify cms from scratch in the nextjs and deployed to netlify.

Netlify cms are old static site cms maintained by netlify. netlify cms come with easy configuration, like copying past code in your netlify cms config file.

This article is part of old content layer series in which I told you how to create your static blog with nextjs, content layer, and markdown.

Read the complete article list.

Nextjs

Demo and Code

• https://github.com/officialrajdeepsingh/contentLayerNetlifycms
• https://ephemeral-rolypoly-2f9988.netlify.app/
• https://ephemeral-rolypoly-2f9988.netlify.app/admin

Nextjs version = 12.1.5
Content layer version = 0.2.4

Folder structure

.
├── components
│   ├── Banner.js
│   ├── Footer.js
│   ├── Header.js
│   ├── ItemPost.js
│   ├── Pagnation.js
│   ├── Post.js
│   └── Sidebar.js
├── config.js
├── contentlayer.config.ts
├── jsconfig.json
├── next.config.js
├── next-seo.config.js
├── next-sitemap.js
├── package.json
├── package-lock.json
├── pages
│   ├── _app.js
│   ├── blog
│   │   └── [slug].js
│   ├── category
│   │   └── [slug].js
│   ├── _document.js
│   ├── index.js
│   ├── page
│   │   └── [page].js
│   ├── Search.js
│   └── tag
│       └── [slug].js
├── posts
│   ├── article-post-16.md
│   ├── article-post-17.md
│   ├── article-post-18.md
│   ├── article-post-19.md
│   ├── ...
├── public
│   ├── admin
│   │   ├── config.yml
│   │   └── index.html
│   ├── banner.png
│   ├── favicon.ico
│   ├── images
│   │   ├── butterfly-7353884_960_720.webp
│   │   ├── contentlayer.png
│   │   ├── firstway-2.png
│   │   ├── firstway.png
│   │   ├── ....
│   ├── robots.txt
│   ├── sitemap-0.xml
│   ├── sitemap.xml
│   └── vercel.svg
├── README.md
├── styles
│   └── globals.css
└── utils
└── index.js
12 directories, 79 files

Let’s start

1. Install netlify cms
2. Config netlify cms file
3. Deploy with netlify

Install netlify cms

You install netlify cms with CDN in nextjs. Netlify cms recommend CDN way.

<script async src="https://identity.netlify.com/v1/netlify-   identity-widget.js"></script>

In nextjs, you create a _document.js file at the root level and paste the following code into the document file.

create _document.js file

Config netlify cms file

Netlify cms configuration in nextjs is the first step; create a admin folder in the nextjs public folder. the admin folder path looks like public/admin . In the admin folder, you create two files.

├── public
│   ├── admin
│   │   ├── config.yml
│   │   └── index.html

Steps

1. config.yml
2. index.html

index.html

In the index.html file, you add the netlife cms dashboard. You copy and paste the following code into index.html file.

Paste the following code into the index.html

The index.html file code is the same for everyone.

config.yml

The config.yml file is changed according to your requirements. in my case, I need only one blog section in my netlify cms, which I mention in the collections section help of fields.

Tips
Your config file design is based on your markdown file.

Inspiration code for your config.yml file

Note
If you use my project repo code as an inspiration draft section is required in the config.yml file.

Learn more about the config.yml file.

• https://www.netlifycms.org/docs/collection-types/
• https://www.netlifycms.org/docs/widgets/

Deploy with netlify

You do not need any extra stuff to deploy to netlify. Simple push code into GitHub. After deploying the website successfully on netlify, and when you log in to netlify cms, you face an Unable to access identity settings error with netlify cms. To solve the errors, you enable git gateways in netlify cms.

Site settings > Identity > Services > Git Gateway enable it.

Read docs about errors.

https://docs.netlify.com/visitor-access/git-gateway/#0setup-and-settings

How to log in with netlify cms?

You go to https://your-domian.com/admin after netlify cms are open and log in and create an account with netlify account, and you can write and delete posts with netlify cms.

Conclusion

I hope you can set up netlify cms with nextjs and deploy it to netlify, and you can create a post with a netlify cms. Setup netlify cms in nextjs are very easy to process; only you need to write config.yml file, and the rest is copy-paste code.

The config.yml write based on your markdown file. It would be best if you had a basic understanding of the netlify cms configuration.

You can follow and read more articles on officialrajdeepsingh.dev and follow on Twitter and Linkedin.

Read More content on Nextjs. Sign up for a free newsletter and join the nextjs community on medium.