Customizing Next.js themes with BCMS: The restaurant starter example

Customizing Next.js Themes with BCMS thumbnails.jpeg

When building a blog or website, it's not just about showcasing content; it's about delivering a unique and memorable user experience. To stand out, your design must reflect your brand while seamlessly integrating with dynamic content. Customizing your theme is key to achieving this.

In this guide, I’ll walk through how to customize a Next.js theme using BCMS, with a particular focus on the Restaurant Starter Example.

BCMS is a powerful, API-first CMS that lets you manage and render content dynamically while maintaining visual consistency with your brand.

Customizing Next.js themes: Step-by-step guide

I’ll begin by setting up the project using the BCMS open-source starter kit, integrating the BCMS API to manage and render content, and optimizing the theme for both functionality and aesthetics.

By the end of this Next js tutorial, you’ll have a fully customized Next.js theme powered by BCMS, tailored for a seamless, engaging user experience.

Setting up the environment

Before diving into customization, let’s get your development environment ready by creating a new Next.js project using the BCMS starter template.

Run the starter template

In your terminal, run the following command:

npx @thebcms/cli create next starter starter restaurant

Install required packages

You’ll be prompted to install packages: type "y "when asked.

Once done, a link will be displayed in the terminal. Click the link to open the BCMS admin dashboard in your browser and log in to your BCMS account. If you don't have one, you can create it there.

Name your project

After logging in successfully, go back to your terminal and name your project. For example:

restaurant-customize-theme

This will clone the starter GitHub repo into a new folder and set up a sample restaurant layout.

Install project dependencies

Navigate to your new project folder and install dependencies:

cd restaurant-customize-theme
npm install

You now have a working Next.js project integrated with BCMS, ready to fetch and display restaurant content dynamically.

content fetching

Integrating BCMS for Next.js themes customization

You’ll now configure BCMS to support customizable theming with color and font options.

Create a new template in BCMS

In the BCMS admin dashboard:

  • Navigate to the Templates tab.

  • Click Create new template and name it Theme Page.

  • Two fields—title and slug—are added by default.

  • Add two more String fields:

    • Primary Color — e.g., #FF0000 (red)

    • Font Family — e.g., Roboto

Once done, your template should look like this:

  • title

  • slug

  • Primary Color

  • Font Family

Theme Page

Create and publish an entry

Go to the Entries section under your new Theme Page template and create a new entry. Populate the Primary Color and Font Family fields with your desired values (e.g., #FF0000 and Roboto) and publish the entry.

theme color

Now let’s connect your frontend to BCMS using an API key.

Steps:

  • Go to API Keys in your BCMS dashboard.

  • Click Add new key and give it a name (e.g., ThemeCustomizerKey).

  • After creation, copy the following values:

BCMS_ORG_ID
BCMS_INSTANCE_ID
BCMS_API_KEY_ID
BCMS_API_KEY_SECRET
4. API keys.png

Add to your .env file

Open your .env file in the root of the project (./restaurant-customize-theme/.env) and paste the credentials:

BCMS_ORG_ID=your_org_id
BCMS_INSTANCE_ID=your_instance_id
BCMS_API_KEY_ID=your_api_key_id
BCMS_API_KEY_SECRET=your_api_key_secret

Fetching and applying theme settings

Now I’ll fetch the theme settings and apply them in the Next.js app.

Add theme props to the component

In the ./components/home-page/ directory, update the props interfaces in the TypeScript files for the following components: Hero, Menu, Seasons, Ambience, Specials, Events, and Testimonials.

theme props

Use these props in your component like:

6. Props usage.png

Define styles in SCSS

In your main.scss (or equivalent stylesheet), you can define fallback or dynamic styles using CSS variables or classes that reflect the passed props.

7 styling.png

At this point, your Restaurant Starter theme is dynamic! You can control its appearance (primary color and font) directly from the BCMS dashboard without touching any code.

Whenever you change the theme values in BCMS and re-fetch them in your app, your UI will update accordingly.

8 - starter.png
9. color changing.png
10 menu.png
11 header.png
12.png
13.png
14.png
15.png

Conclusion: Customizing Themes with BCMS and Next.js

By integrating BCMS with the Next.js Restaurant Starter template, you’ve created a customizable theme architecture that supports dynamic content delivery and branding flexibility.

This approach ensures your frontend design stays in sync with your brand, while content is efficiently managed through BCMS’s API-first backend.

This guide covers how to:

  • Initialize and configure a Next.js project using the BCMS starter template

  • Create and publish a custom Theme Page template with Primary Color and Font Family

  • Generate and secure your BCMS API credentials

  • Dynamically fetch and apply theme settings in your frontend

  • Implement real-time theme customization using component props and SCSS

Thanks to BCMS and Tailwind CSS, you can customize any kind of website template without code! Blog template? Portfolio template? E-commerce? No worries, from BCMS's GitHub repo, choose the starter kit you need and customize it to your own needs.

PS: You are not limited only to Next, you can choose your fav frontend framework too: Astro, Nuxt, Gatsby, BCMS covers everything.

It takes a minute to start using BCMS

Start free with GitHubStart free with Google

14-day free trial · No credit card required

Continue reading

Optimize Next.js.jpeg

How to optimize Next.js projects for better performance

Thumbnails for NextJS advantages.jpeg

NextJS advantages: Key benefits of Next.js for your project

How to Get Headless CMS in Next.js with One Line!.jpeg

Next.js Headless CMS in One Line: The Fastest Way to Get Started