A No-Thrills Minimal Nextjs Blogging template With Contentful CMS

This is my first attempt at making a blogging template for community! I really hope it can be useful to someone! Please be aware, I don't claim that this will have best practices. 😅 I was essentially learning Next.js and a Chakra-UI as I went along.

Please hit me up on 👋 Twitter if you have any questions!

Hey devs!

After a distraction here and there, a break and holiday, I finally built a nextjs blogging template for anyone to use!

It's very minimal and based on the 'masonry' layout. It has a darkmode, and a custom 'theme.' It also has a local 'template' .json file for you to easily change content in all of your components.

I would highly recommend you cruise through the Chakra-UI docs if you want to make any significant changes. There are ALL KINDS of pre-made components and UI elements ready to go in Chakra. It's very tailwind inspired, so rest assured it's a great looking UI library!

Resources

Chakra-UI

REPO

DEMO

Setup

Clone repo

Install dependencies

Create your Contentful account

Set up your .env.local file and update the env variables

You should be ready to roll!

Don't hesitate AT ALL to DM me on twitter if any problems arise!

Step One

First, clone the repo.

Once you have your project locally, make sure to be at the root of your project, and install the dependencies

Step Two

Create your Contentful Account

Create your first content model. You'll need two. A 'Blog Post' model and a 'Project' model. You can think of a model as a simple schema, that's comprised of fields. So a 'Blog Post' model might have the fields, 'Title', 'Slug', and 'Caption.'

Let's create the 'Blog Post' model. It should look like this: Contentful snapshot

Use this image to determine the field types. For example, you can see that the 'Blog Title' is of the Short Text type.

There are a few important additional details I need to cover for the 'Blog Post' model. In The 'Title' field, make sure you tick the 'This field represents the Entry title.' Also under the validation tab, make sure to tick required and unique. Contentful snapshot

For your 'Slug' field, make sure to also make that field 'unique' under the validation tab. In addition, make sure to set its 'Appearance' to type 'Slug.' Contentful snapshot

Lastly, for the 'Date' field, under the appearance tab, I selected, 'Date Only' format. Contentful snapshot

Step Three

Create your 'Project' model. Again, use the image below to determine the types for all other fields. For example, you can see the 'Project Description' field is set to type 'Long Text.' Contentful snapshot

Just like our 'Blog Post' Title field, let's make sure to tick the 'this field represents the 'Entry Title' for our 'Project Name.' Also, be sure to tick the 'required' field in the validation tab. Contentful snapshot

The default set up for all other fields should be fine.

Step Four

Create your .env.local file and be sure to update the values to your own.

Tips

If you ever forget the 'id' of your Content Models at our Contentful API, simply head back to Contentful, go to your Content Models, click your interested Model, and on the right panel towards the bottom, you will see the 'Content Type Id.'

Also, if you ever forget the field ID's for each other Content Model, again, simply go to your Content Models, click your concerned Model, and simply click on the JSON preview tab. It will show your entire Model Type in JSON format, and you can see the Field Name, along with the Field ID. For example, since I named our first Field, 'Blog Title,' it's actual ID that we'll use on the frontend is 'blogTitle.'

Wrapping up

That's the end to A No-Thrills Minimal Nextjs Blogging template With Contentful CMS! I really hope you guys dig the UI of this. It's meant to be very simple, minimalistic, but at the same time, gets the job done. You can take this template, and customize the h*ll out of it!

If anyone at all goes through this entire tutorial and makes use of it, please let me know on Twitter! ✌️

Some other articles you may enjoy 😎