# Getting Started with Next.js and BCMS

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

The fastest way to go from 0 to a simple Next.js blog + BCMS is to locally run

```BASH

npx @thebcms/cli create next starter simple-blog

```

and follow the prompts.

The command will:

- Create a new BCMS project

- Populate it with some simple content

- Create a scaffold Next.js project locally

- Create an .env file and update codebase with necessary BCMS config

Afterward, just run

```BASH

npm install
npm run dev

```

Alternatively, if you want a step-by-step process, here it is:

---

## Open your BCMS project

Go to [https://app.thebcms.com](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 template](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d2474/bin2/1.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23)

---

## 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 new Blog entry](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d2475/bin2/2.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23)

---

## Create an API Key

Navigate to Administration > Settings > API Keys. Create a new API key. Ensure the key has permission to access entries from the Blog template. Create one more key, call it "Public". Do not give it any additional permissions. We'll use it for media (images, videos, etc...)

![Create an API Key](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d2476/bin2/3.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23)

---

## Create a Next.js Project

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

```BASH

npx create-next-app@latest

```

## Install BCMS Packages

Run the following command to install BCMS-related packages:

```BASH

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

```

## Initialize BCMS Client

In the /src directory, create a new file called bcms.ts. Inside, initialize the BCMS client:

```TYPESCRIPT

import { Client } from '@thebcms/client';

export const bcmsPrivate = new Client({ injectSvg: true }); // by default, apiKey is set to use BCMS_API_KEY

export const bcmsPublic = new Client({
    apiKey: process.env.NEXT_PUBLIC_BCMS_API_KEY,
    injectSvg: true,
});

```

---

## Env file

In the .env file, place this:

```BASH

BCMS_API_KEY=<YOUR.API.KEY>
NEXT_PUBLIC_BCMS_API_KEY=<YOUR.PUBLIC.API.KEY>

```

## Fetch and Display Data

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

```

import { bcmsPrivate } 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!