How to fetch dynamic content from BCMS in Next.js

This article is a step-by-step guide that will teach you how to fetch dynamic content from BCMS and use it in your Next.js blog application.

Creating Blog applications with Next.js is often considered a good project to showcase your front-end development skills. However, building a blog application from scratch is not as simple as it sounds. It can take you months to build and sometimes you might face the challenge of properly arranging your blog contents.

One of the most challenging parts of hardcoding blog application content is structuring and arranging content for SEO optimization. It is important to arrange headers properly to avoid missing out on SEO ranking and this comes as a big challenge.

This tutorial will help you to overcome all these challenges.

Why do you need BCMS for blog content management?

BCMS is an API-based headless CMS that allows developers and web editors to configure and manage website content faster. BCMS helps developers simplify the web development processes by adopting frequent content changes, making editing and managing content in applications like blog websites simpler.

BCMS is built around an API structure that allows developers to swiftly and efficiently fetch data that is required for their blog pages. This optimizes data fetching and reduces unnecessary data transfer

What you will learn in this article

In this article, I will give you a step-by-step guide on creating blog post content with BCMS and fetching it in your Next.js application. You will learn two methods that you can implement to integrate BCMS with your Next.js application. This article breaks down the packages you need and what they do in your application.

Prerequisites

To follow the contents of this post, you need to have some things in place. This will help you follow and understand the steps listed in each section of this post. The following are the things you need to have to follow along:

• Basic understanding of React.js and TypeScript: This article will include the use of some basic React.js terms and file naming conventions. So it is advised that you have a working knowledge of React.js and JavaScript to fully understand the terms in use.

• A BCMS account to get access to API credentials: The second important thing you need is a BCMS account. This account is important to create APIs that you can use in accessing the contents of your blog application. Follow this link to sign up and get a free account that you can use for testing purposes.

• Node.js and npm installed on the system: It is important to have Node.js installed in your system so that you can run your JavaScript code successfully. Npm comes pre-installed with Node.js. So if you have Node.js in your system, then you are sure to have npm as well. The supported versions of Node.js and npm are v23.6.0 and 10.9.2, respectively. You can check the version of Node.js and npm that you have on your system by runningthe following commands respectively:

node -v and npm -v

If you have a version lower than the prescribed versions, then you should update your Node.js with nvm

Text or code editor: Major parts of this post will involve writing and running codes, so you will need a code editor. This post will make use of Visual Studio code.

Setting up your Next.js Application

There are two approaches that you can pick to set up your Next.js application to use BCMS:

The first approach can be used if you do not have a Next.js application already and you want to quickly set up a blog application with the proper styles and contents.
The second approach implies that you already have a Next.js application but want to integrate BCMS into your application.

Either way, you will get to use BCMS to create a blog application. To use the first approach, you need to run the command below:

npx @thebcms/cli create next starter simple-blog

This command has 6 parts, the first part is the npx package runner that executes commands directly from the npm registry. The purpose of the npx package runner in this command is to run the @thebcms/cli package.

The @thebcms/cli package is the second part of this command. It is used in this command to specify the CLI tool that provides subcommands related to BCMS operations like the create command.

The create command is the next part of the command above. It is a subcommand that indicates that you want to create a project.

Then you have the next keyword, which is used to specify that the project will be a Next.js project. Then you have the starter command, which is a keyword that allows the use of a pre-defined starter template. Then, finally, there is the simple-blog part that indicates the type of starter project (Which is a blog project in this case).

These commands put together make up the BCMS CLI starter command to create a Next.js simple-blog project. After running this command successfully, you will be provided with a link to sign in with your BCMS account. Click on the link to open a browser window, then sign in with the email address or GitHub account you used in signing up:

After a successful login, you will be asked to give your project a name. You can give your project any name that best describes it. At this point, the BCMS Next starter command will create a Next.js project and clone the simple-blog starter project into it.

Now you can navigate into the project directory and run the npm install command to install the project dependencies and the npm run dev command to run the project and access it on localhost:3000 in the browser.

You can edit the content of your blog application by navigating to the page.tsx file inside the app folder in the src folder, that is the file path src/app/page.tsx, and editing its content with whatever you want.

The second approach in setting up your Next.js Application

The second approach is integrating BCMS with your already created Next.js project. This approach is best for people with a Next.js project already but are looking to fetch dynamic data for their blog application. This way, they can have cleaner and well-managed posts.

This method requires you to create a blog template with BCMS and then integrate and fetch the contents of the blog in your application with the BCMS API configuration. This process involves 3 steps, and I will walk you through each of them.

At this point, I believe you should have a Next.js application already, but if you don’t have a Next.js application, you should create one by running the command below:

npx create-next-app@latest

You can read more about this method here.

This command will create a simple Next.js application for you then, you can run:

 npm install

To install the application’s dependencies and then:

npm run dev

To start your application.

After creating your Next.js application, you have to install some packages that will let you integrate and interact with BCMS in your Next.js project. So run the command below to install the BCMS packages:

npm i --save @thebcms/cli @thebcms/client @thebcms/components-react

The command above will install the BCMS packages and it is divided into 3 parts. The first part is the npm i command, which is used for installing packages directly from the npm registry. Then there is the —-save command. This command saves the installed packages as devDependencies in the package.json file, then the last part contains the packages you want to install. The packages are:

@thebcms/cli: This package provides a command line interface that helps you set up and manage new BCMS projects and templates.
@thebcms/client: This package is a software development kit (SDK) that allows you to interact with the BCMS API. This package will give you the ability to fetch and manage data from BCMS.
@thebcms/components-react: This package is a library of prebuilt react components that helps you render BCMS contents in a React-related framework like Next.js

So, running the command above will add these packages to your application’s dependencies. You can find them inside your package.json file.

Now, the next step is to update the scripts section in your package.json file to have the bcms --pull types --lng ts command with the code below:

"scripts": {
  "dev": "bcms --pull types --lng ts && next dev",
  "build": "bcms --pull types --lng ts && next build",
  "start": "bcms --pull types --lng ts && next start",
  "lint": "bcms --pull types --lng ts && next lint"
}

This command will start the BCMS CLI and create a /bcms/types/ for you when you run the npm run dev command.

In the tsconfig.json file ****you have to update the moduleResolution to Node, by updating your tsconfig.json file to look like the code below:

{
   "compilerOptions":{
      "lib":[
         "dom",
         "dom.iterable",
         "esnext"
      ],
      "allowJs":true,
      "skipLibCheck":true,
      "strict":true,
      "noEmit":true,
      "esModuleInterop":true,
      "module":"esnext",
      "moduleResolution":"Node",
      "resolveJsonModule":true,
      "isolatedModules":true,
      "jsx":"preserve",
      "incremental":true,
      "plugins":[
         {
            "name":"next"
         }
      ],
      "paths":{
         "@/*":[
            "./src/*"
         ]
      }
   },
   "include":[
      "next-env.d.ts",
      "**/*.ts",
      "**/*.tsx",
      ".next/types/**/*.ts"
   ],
   "exclude":[
      "node_modules"
   ]
}

Basically, what this update will do is to specify that Typsescript should resolve module imports with the same module resolution strategy that Node.js uses. This will ensure compatibility between Node.js and TypeScript.

Steps on integrating BCMS API with Next.js

So, after setting up your Next.js application, the next step is to integrate BCMS API into your Next.js application. This process involves creating a template and an API with access to your BCMS templates. Then, initialize the BCMS client with the @thebcms/client package that you installed earlier. I will go through each step one after the other in this section.

Step 1: Template creation

So, the first step is to go to https://app.thebcms.com and log in to your account. Then on the templates tab, click on the Create new template button at the top right corner:

Then, you will be asked to give your template a name.

Please give it a name that you can remember.

I will go with “blog” as my own template name. Then you can give it a description if you like, and also, if you want that particular template to have just one entry, then you can toggle that option. But I want more than one entry for my template, so I will just leave it like that. Then click on the Create button.

Your template will be created for yo,u and you will be automatically taken to your template settings.

Here, you can drag and drop properties into your template. For example, if you want your blog post to have images, you can arrange them the way you want them by dragging and dropping the media properties into your template.

Please remember to add at least one media property and call it cover_image. This is important when fetching the BCMS API in your Next.js application.

Now, you can start adding entries to your blog post. Entries are the contents that you can see on your blog post. So, under the Entries tab, click on the template that you just created, and you will be taken to the section where you can create entries.

There, you can click on the Create new entry button at the top right corner. This button will take you to the page where you can create your entry.

On this page, you have to give your blog post a title, a cover image, and the blog content itself. Then you click on the Create button. Now you have your blog template with an entry (Post). You can still create more entries by following the first step.

Step 2: Creating API credentials

The next step is to create your API credentials. These credentials will allow you to access the template you just created and populate your website with the blog entries (posts).

To create your API credentials, go to the administration tab, there you will find the settings section; click on it, and you will be taken to the settings page. There, you will notice that you are using a free plan. It is perfect for testing purposes, but you should upgrade to pro if you are looking at professional usage.

On the settings page, go under the API Keys tab and click on the Add new key button:

You have to give your API a name and an optional description. Then click on the add key button. This will add the API key and provide some very important credentials that you will use in your Next.js project to integrate BCMS.

To grant your API key access to the template you created earlier, you have to go under the Template permissions settings and check all the permission boxes.

Then, click on the update key button. This will grant your API key access to your template so that you can call it and fetch your template’s data from it.

Now, in the root level of your Next.js project, create a file and call it bcms.config.cjs. Please follow the name convention as this is the configuration file for bcms, and it has to be named this way for it to work. Inside this file, use the code below to configure your application to use your BCMS API key.

module.exports = {
    client: {
        orgId: "YOUR_PROJECT_ORG_ID",
        instanceId: "YOUR_PROJECT_INSTANCE_ID",
        apiKey: {
            id: "API_KEY_ID",
            secret: "API_KEY_SECRET",
        },
    },
};

The information here is your API key’s data. So replace them with the appropriate data. You can find them on your API key settings.

Lastly, you need to initialize the BCMS client. So in the app folder inside the src directory, create a file and call it bcms.ts in this file add the code below to initialize the bcms client:

import { Client } from "@thebcms/client";
export const bcms = new Client(
  "ORG_ID",
  "INSTANCE_ID",
  {
    id: "API_KEY_ID",
    secret: "API_KEY_SECRET",
  },
  {
    injectSvg: true,
  }
);

From the code above you imported the @thebcms/client package that you installed earlier and then used it to create a new Client with your API key credentials. Remember to replace these data with your actual API key credentials from BCMS.

So now you can start data fetching from BCMS.

You are ready to fetch dynamic content

At this point, you can start fetching and rendering dynamic data.

You can start fetching data from your BCMS template, by entering the code below into your project’s page.tsx file inside the app folder in the src folder:

import { bcms } from "@/bcms";
import { BlogEntry } from "../../bcms/types/ts";
import { BCMSContentManager, BCMSImage } from "@thebcms/components-react";
export default async function Home() {
  const blogs = (await bcms.entry.getAll("blog")) as BlogEntry[];
  return (
    <main>
      <div className="flex flex-col gap-4">
        {blogs.map((blog, blogIdx) => {
          if (!blog.meta.en || !blog.content.en) {
            return "";
          }
          return (
            <div key={blogIdx} className="flex flex-col gap-8">
              <h1 className="mb-10 text-3xl">{blog.meta.en.title}</h1>
              <BCMSImage
                className="w-full h-60 object-cover"
                media={blog.meta.en.cover_image}
                clientConfig={bcms.getConfig()}
              />
              <BCMSContentManager items={blog.content.en} />
            </div>
          );
        })}
      </div>
    </main>
  );
}

💡Note that if you did not call your BCMS template “Blog” then you can not use:

 const blogs = (await bcms.entry.getAll("blog")) as BlogEntry[]

So instead of BlogEntry, you should make use of Your_template_nameEntry. For example, if you called your template testblog, then you should make use of TestblogEntry instead and your code should look like this:

 const blogs = (await bcms.entry.getAll("blog")) as TestblogEntry[]

and the import will look like this:

import { TestblogEntry } from "../../bcms/types/ts";

Also, if you do not have a media property in any of your entries with the title cover_image, then you have to create one because it is a requirement.

With this, you have created a blog with Next.js and can keep fetching data from the BCMS API.

Run the npm run dev command to start your application and create a bcms/types directory for your project.

Best Practices for using BCMS for Dynamic Data fetching

To optimize the use of BCMS it is important to implement best practices that ensure proper maintainability and efficiency of your website. In this section, I am going to list out best practices that you should follow to optimize your workflow and the use of BCMS.

Create pagination for contents. This will help break large amounts of data into smaller and more manageable chunks, which reduces the initial load time of web pages
Create individual blog pages with dynamic routes, this will ensure that the data are efficiently loaded and are also SEO-friendly.
Implement sorting and filtering mechanism to allow users to search for blog posts and items faster
Implement caching strategies like Static Site Generation (SSG) to reduce API calls and reduce the time required for API response.
Remember to always store your sensitive data in environment variables.
Use TypeScript when interacting with BCMS APIs to ensure type safety

Conclusion

BCMS is a powerful headless CMS that encourages faster and better generation of content in web applications. With BCMS, developers and web editors can quickly fetch dynamic data for their websites like resume sites and Blog applications.

In this article, I have demonstrated the steps involved in setting up a Next.js application to use BCMS and fetch dynamic data for a blog application using BCMS. This article is best suited for both people who already have a Next.js application and want to integrate BCMS and people who do to have a Next.js application and still want to use BCMS to create a Next.js starter application.