Next CMS
NextJS examples: 60 popular websites built with headless CMS
24 Jan 2024
Customizing Next.js themes with BCMS: The restaurant starter example
By Olaitan Akano
Read time 2 min
Posted on 17 Jul 2025
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 restaurantInstall 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.
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
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.
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
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.
Use these props in your component like:
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.
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.
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
Join our Newsletter
Get all the latest BCMS updates, news and events.
By submitting this form you consent to us emailing you occasionally about our products and services. You can unsubscribe from emails at any time, and we will never pass your email to third parties.
Continue reading
There are many actionable insights in this blog post. Learn more:
