Next.js Headless CMS in One Line: The Fastest Way to Get Started

Over the years, developers have realized the power of Headless CMS.

Using a solid CMS with frameworks like Next.js can make a lot of difference if you manage a lot of content.

While big names dominate the space, today we will explore BCMS and how to use it with Next.js. Plus, there are some starter templates to get you started.

Let's jump in.

In a nutshell, I will cover these topics in detail.

BCMS is one of the underrated options as a headless CMS for building Next.js projects. It even provides flexible content modeling for other tech stacks including Astro, Gatsby.js, Nuxt.js, and Svelte.

You also get:

✅ Option for Global CDN.

✅ Component-based content modeling.

✅ Flexible content for multilingual sites.

✅ 10+ input options with detailed permissions.

You can do all sorts of stuff like handling forms, HR tools, sending emails, and custom reporting, all through BCMS using webhooks, functions, and cron jobs.

A headless CMS simply allows you to manage content in one place and deploy it on any digital channel.

In short, it's just any backend application, which is 100% built upon APIs. Headless means frontendless body which can be attached to any frontend or Head.

If you're interested in knowing more, you can check our Headless CMS guide and also the Headless VS traditional CMS comparison.

Many useful features make BCMS worth it. Let's explore some of them.

✅ BCMS lets you store content in flexible inputs like dropdowns, files, numbers, and rich text, all built to work smoothly with Next.js applications.

✅ You can easily upload and manage any media in your Next.js project using BCMS's organized folder system (much better than the others). Read the docs.

✅ You also get dynamic components for your blog or e-commerce site. They are called Widgets in BCMS which are reusable building blocks that are used inside of the entry's content area.

Read more: BCMS Widgets: Reusable structured content guide

✅ There is also the concept of Groups which helps you to define reusable content structures, like author profiles or addresses, to be easily queried in your Next.js application.

You can use them in templates, widgets or even inside other groups.

✅ To write multilingual content in BCMS, all you need to do is just click add and choose from nearly 100 languages.

English is the default and can’t be deleted, but other languages can be removed which will also remove all associated data with that language.

✅ There is also the concept of entry which is like a single document or item created from a predefined template.

The template decides what details each entry should have. These details, called properties, appear in a section called meta. Every entry also has a content area where you can write text and add interactive elements.

For example, if you create a Blog template, you can set properties like author, category, tags, and publish date. Then, whenever you add a new blog post (entry), these fields will be ready to fill.

You can duplicate the entry, delete it, and even set the entry status to indicate when a blog post is ready for publishing. Read the docs to know more.

All details about the features can be found on the Next CMS page.

By the way, BCMS is open source with hundreds of stars on GitHub. You can find jobs, plugins and more from the readme.

Now that you have understood the unique concepts of BCMS, it's time to integrate BCMS with Next.js in the next section.

I will keep it simple and easy to understand even if you know nothing about the concepts. The first thing you need to install is the BCMS CLI, by running the following command.

You will get the option to install the package and authenticate with BCMS in case you are not.

Once you log in, this is how the dashboard looks. It's available at app.thebcms.com/.

This sets up a new Next.js project and lets you pick a starter template based on your needs. You can also start from scratch, but to keep things simple, I will go with the blog starter.

This will set up a new nextjs project and it will give you options to select a starter project (based on your use case). There is also the option to start from scratch but for the sake of easiness, I'm selecting the blog starter.

This is how the directory structure looks.

In the root of your project, you will find bcms.config.cjs which is the main configuration file.

You will see the codebase pre-filled with some content, a .env file, and the necessary BCMS config.

In the dashboard, you can explore settings if you want to adjust functions, webhooks, dependencies, or environment variables.

If you skip the starter template, you will need to create a new API Key under settings. You will get the option to allow necessary permissions once you create entries in the template. Don't worry if this sounds confusing, we will go over it soon.

You just need to install the dependencies and run the server using the following commands.

The bcms --pull types --lng ts command starts BCMS CLI and pulls types from BCMS, saving them in /bcms/types/. These types work for both JavaScript and TypeScript.

Then, go to http://localhost:3000 to view the locally hosted version. Here's how it looks:

Congrats! 🎉

You have just integrated BCMS with Next.js, it's that simple!

Let's study more about what is involved. Head over to the BCMS dashboard and look for the Templates option in the sidebar.

You'll find a Blog template already created, with six properties: title, slug, date, description, cover_image, and category. Each property type is displayed as a badge (media, string, date).

You can easily update any properties based on your use case.

You can also create a template from scratch as shown.

Once your template is ready, you will need to create entries for it. In this case, the Blog template already has four entries.

Each entry contains all the necessary details.

When creating a new entry, it will automatically include the required fields based on your template properties.

Similarly, for the cover image, just upload and select it accordingly.

Once you refresh your local setup, the updates will appear.

The entry will be accessible at the route based on the slug URL you set in the dashboard.

Let's talk about the codebase.

First, the BCMS Client is initialized by creating bcms.ts inside the /src directory.

The main logic for fetching and displaying data from BCMS is in /src/app/page.tsx.

The BlogPage route is defined in src/app/blog/[slug]/page.tsx.

Core components like ContentManager and Tag are inside the src/app/components directory.

It's simple to understand if you're aware of Next.js concepts.

Learning the concepts is great, but having everything pre-built for different use cases is amazing. Here are some starter templates that might save you time and effort.

This is one of the most decent portfolio templates I've come across. It’s clean, unique and well-structured, with some really good sections.

Built with Next.js and BCMS, this template offers a great starting point for developers. Read this tutorial if you want to explore everything that is involved.

You can check the GitHub Repository and live demo.

This is a next.js e-commerce template that comes with analytics, multilingual support, and more.

If you want a detailed breakdown including templates, groups, elements involve,d and the step-by-step process to make this, read this guide.

You can check the GitHub Repository and live demo.

If you're planning to launch a podcast or audio-focused platform, this template is a great choice.

The official tutorial is for Gatsby, but the GitHub repository provides a Next.js version as well.

You can check the GitHub Repository and live demo.

This is for people looking to build a job board or a career page for an organization.

The official tutorial is for Nuxt but you can find the GitHub repository that includes a Next.js version as well.

You can check the GitHub Repository and live demo.

BCMS provides 10+ templates across different frameworks like Astro, Gatsby, Next and Nuxt. You can find all the samples on the official BCMS repository and the official website at thebcms.com/starters.

Other available templates include an agency website, job board, conference starter, recipe website and more. Each of these websites is really unique which makes things a lot better.

I'm aware that there are other decent options out there but BCMS has its own perks.

Underrated tools can sometimes be the best fit for your workflow. You can start finding it put by giving BCMS a chance for your new Next.js project.