How to Adding BCMS to an existing Next.js project

The fastest way to start using BCMS with Next.js is to create a new Next.js project from scratch, using BCMS CLI. However, if you want to add BCMS to an existing Next.js project, here are the steps:

  1. Install BCMS plugin and its dependencies by running: npm install -D next-plugin-bcms @becomes/cms-cli @becomes/cms-client @becomes/cms-most
  2. Create BCMS configuration by making a file called bcms.config.js in the root of your project


const { createBcmsMostConfig } = require('@becomes/cms-most');

module.exports = createBcmsMostConfig({
  cms: {
      process.env.BCMS_API_ORIGIN ||
    key: {
      id: process.env.BCMS_API_KEY || '629dcd4dbcf5017354af6fe8',
        process.env.BCMS_API_SECRET ||
  media: {
    output: 'public',
    download: false,
  enableClientCache: true,
  1. After that, You can configure BCMS images handler (this is optional). TO do so, open pages/_app.tsx and add configuration for API origin and public API key.


// ... Other imports

import { BCMSImageConfig } from 'next-plugin-bcms/components';

BCMSImageConfig.cmsOrigin =
BCMSImageConfig.publicApiKeyId =
  process.env.NEXT_PUBLIC_BCMS_API_PUBLIC_KEY_ID || '629dcd4dbcf5017354af6fe8';

// ... Other configuration
  1. Next step is to create instance of the Next.js plugin at the server runtime by calling createBcmsNextPlugin inside of the next.config.js.


// ... Other imports

const { createBcmsNextPlugin } = require('next-plugin-bcms/main');

// ... Other configuration
  1. Finally, we will call BCMS Most functions in every script before Next execution.


"scripts": {
  "dev": "bcms --m all && next dev",
  "build": "bcms --m all && next build",
  "start": "bcms --m all && next start",
  "lint": "next lint"
  1. And you should probably add BCMS cache paths to your .gitignore