Getting started with Next.js and BCMS

This is the Next.js plugin documentation for the BCMS. In this article, you'll learn everything you need to get started using BCMS and Next.js.

Starting a Next.js project from scratch

If you are starting a Next.js project from scratch, and want to connect it with BCMS, you can initialize Next.js project by using the BCMS CLI. Through an interactive terminal questionary, BCMS CLI will set the codebase up for you.

After installing BCMS CLI globally, you should be able to create a Next.js project and connect it with BCMS by running: bcms --website create. Here you can read more about BCMS CLI.

After running the create command, you will be prompted to decide on a few options:

• For the project name, you can enter your project's name
• For framework - select Next.js
• When asked if you want to connect to the BCMS, answer with yes. After this, you'll be able to select the BCMS to connect to. If you are using a local BCMS, select the local one. However, if you are using the live version - select Live.
• Since your Next.js project needs an API key to be able to access the data from the BCMS, in the next step, you'll need to select an API key that you want to use. If you haven't created any API keys yet, CLI will automatically create one. If BCMS CLI finds any API key, it will let you select one, or create a new one.

After completing all the above steps, the CLI will initialize the project and install dependencies. Then, you can open the project in your favorite code editor and run npm run dev. Now you can navigate to localhost:3000.

Adding BCMS to an existing Next.js project in 6 steps

The fastest way to use BCMS with Next.js is to create a new project using BCMS CLI. But if you want to add BCMS to an existing Next.js project, here are the steps

Next.js & BCMS project structure

By default, BCMS CLI creates a typical NextJS project. However, you might spot a few new files and folders. Here is what they are:

• ./bcms.config.js - Where the BCMS Most configuration is. BCMS most is an API layer between the BCMS and your project. In short, the Most makes it easy to get data from the BCMS and synchronize it in real-time.
• ./bcms.routes.js - Here you can define custom API routes in the Most server (by default running on localhost:3001). This is an advanced feature.
• ./bcms - This is a dynamic directory created by the Most, and it is used for caching data and storing data types from the BCMS. Yes, If you are using TypeScript, GraphQL, or even JSDoc, BCMS got you covered - with automatically typed BCMS!

That's all the stuff related to the BCMS. Everything else in your project's folder is the vanilla Next.js.

How to get data from BCMS on a Next.js page

There are two ways you can get data from the BCMS and display it on the page.

Using the BCMS Client, and using BCMS Most. Here's an example, and the differences. For examle, you have Blog entries in your BCMS, and you want to display one blog post on the path /blog/{blog-slug}.

Getting data on the Next.js page with BCMS Client

import { GetServerSideProps } from 'next';
import { getBcmsClient } from 'next-plugin-bcms';
import React, { FC } from 'react';
import { BlogsEntry } from '../../bcms/types';

interface Props {
  blog: BlogsEntry;
}

export const getServerSideProps: GetServerSideProps = async () => {
  const client = getBcmsClient();
  const blog: BlogsEntry = await client.entry.get({
    template: 'blogs',
    entry: 'awesome-first-blog-slug',
  });
  return {
    props: {
      blog,
    } as Props,
  };
};

const Blog: FC<Props> = (props) => {
  return (
    <pre>
      {JSON.stringify(props.blog, null, ' ')}
    </pre>
  );
};

export default Blog;

Getting data on the Next.js page using BCMS Most

import { GetServerSideProps } from 'next';
import { getBcmsMost } from 'next-plugin-bcms';
import React, { FC } from 'react';
import { BlogsEntry } from '../../bcms/types';

interface Props {
  blog: BlogsEntry;
}

export const getServerSideProps: GetServerSideProps = async () => {
  const most = getBcmsMost();
  const blog: BlogsEntry | null = await most.content.entry.findOne(
    'blogs',
    async (e) => e.meta.en.slug === 'awesome-first-blog-slug',
  );
  if (!blog) {
    return {
      notFound: true,
    };
  }
  return {
    props: {
      blog,
    } as Props,
  };
};

const Blog: FC<Props> = (props) => {
  return (
    <pre>
      {JSON.stringify(props.blog, null, ' ')}
    </pre>
    );
  };
export default Blog;

What is the difference between getting data using BCMS Client and BCMS Most

The simple answer is that BCMS Client will make an API request to the BCMS every time, while BCMS Most will check the local cache and decide if it needs to make an API request or not.

There are more details to this answer but simply put, for now: if you want to deploy your application to Vercel or Netlify, you should use BCMS Client, and if you are deploying to Railway or DigitalOcean App Platform, you should use BCMS Most.

Working with BCMSImage Next.js component

You probably love when images on the web are sharp and high-quality. But you also love fast websites. Why can't you have both, you wonder? Well, BCMS Image lets you have both. To simplify handling responsive images and performance optimization, BCMS comes with the BCMSImage component.

To start, import BCMSImage component, and pass an object from BCMS, containing an image. In the example below, the prop is cover_image object.

return (
  <div>
    {props.entry.meta.en?.cover_image && (
      <BCMSImage media={props.entry.meta.en.cover_image} />
    )}
    <pre>
      <code>{JSON.stringify(props.entry, null, '  ')}</code>
    </pre>
  </div>
);

If you resize your browser, you'll see that the image size is changing. It's not some CSS magic, but the real image source is changing. If you inspect the image, you'll see that the image source is the same size as it appears on the screen.

Where to deploy Next.js & BCMS code

You can deploy your Next.js application powered by the BCMS, anywhere you usually deploy Next.js. Just keep in mind that you won't benefit from BCMS Cache if you are deploying your app on a platform that uses serverless technology. Recommended platforms:

• Railway
• DigitalOcean App Platform
• Heroku

What's next

Great, you now have a fully set up Next.js with BCMS. Congrats! 🎉
Now you can learn more about Widgets and Groups.