Getting Started with Next.js and BCMS

This guide will show you how to integrate BCMS with a Next.js project. Let's begin!

Open your BCMS project

Go to https://app.thebcms.com. Make sure you have some entries in your BCMS project to fetch and display in Next.js. For example, create a template called Blog and add a media property called Cover Image.

Create a Blog Entry

Create a new blog entry with the title My First Blog, add a cover image, and write some content (e.g., lorem ipsum).

Create an API Key

Navigate to Administration > Settings > API Keys. Create a new API key, and leave the page open for the next steps. Ensure the key has permission to access entries from the Blog template.

Create a Next.js Project

Open your terminal and create a new Next.js project using the following command:

npx create-next-app@latest

Install BCMS Packages

Run the following command to install BCMS-related packages:

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

Update package.json

Modify the scripts section in package.json as follows:

"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"
}

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

Update TypeScript Configuration

If you’re using TypeScript, open tsconfig.json and set moduleResolution to Node:

{
   "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"
   ]
}

Create bcms.config.cjs

In the root of your project, create a file called bcms.config.cjs and add the following configuration:

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

All the information for this configuration can be found on the API key page you created earlier.

Initialize BCMS Client

In the /src directory, create a new file called bcms.ts. Inside, 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,
  }
);

Fetch and Display Data

In /src/app/page.tsx, fetch data from the BCMS project and display it on the page:

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>
  );
}

That's it — happy coding!

PreviousProperties

NextGatsby.js