Simple blog code starter for BCMS

Creating a headless e-commerce website has become more accessible for developers, thanks to BCMS—an advanced headless CMS designed to streamline workflows. BCMS is an intuitive and modern CMS that offers easy model management capabilities, making it compatible with modern tech stacks like Next.js, Nuxt, and Gatsby. Building NextJS e-commerce site on BCMS provides an ideal solution, and here's why:
Easy Content Creation and Management: Design without limits. Manage products, categories, and promotions separately from your storefront, allowing for endless customization.
Content Bliss: No more wrestling with complex interfaces. Update product descriptions, images, and more effortlessly with BCMS.
Multiple Platform Support: Reach every corner of the internet with seamless publishing across devices and platforms. Your store expands with your audience.
Localization Support: Break down language barriers and attract customers worldwide. BCMS translates and localizes your products with ease.
Tracking & Analytics: Gain deep insights into customer behavior, track sales performance, and optimize your store for conversion. BCMS empowers you to make informed decisions.
This tutorial will guide you through the process of integrating BCMS with Next.js to build an amazing headless e-commerce website.
Get Ready to:
Effortlessly set up BCMS and Next.js
Craft a well-structured data model tailored for e-commerce
Create compelling product content within BCMS
Build a visually engaging and performant Next.js frontend
Deploy your e-commerce to the world
Follow these steps:
You have two options when setting up BCMS - You can either host it on the cloud or host it locally (which is free).
Using BCMS in the cloud makes your work easier. It takes care of setting up and maintaining the server and ensures it's always available, so you can focus on building the front end. The API URL stays the same whether you're working on development or production.
If you choose to use it locally or self-hosted, it means you're running the program on your own computer and then putting it on a server, like DigitalOcean, when you're ready. This gives you more flexibility and control over where your website is hosted.
I will utilize BCMS which is hosted locally in this tutorial. If you're interested in exploring how the live version operates, you can sign up on the BCMS website to access it.
First, install the CLI globally on your machine.
npm install @becomes/cms-cli -g
Verify the installation by running.
bcms --help
Create a directory for your bcms instance.
mkdir ecommerce-starter && cd ecommerce-starter
Run the create command to scaffold a copy for BCMS.
bcms --cms create
Run BCMS using the docker.
docker-compose up
If everything is done right, you will be able to access BCMS by going to http://localhost:8080
Let's simplify the process in this crucial step to leverage BCMS to lay the groundwork for your e-commerce content structure.
Templates: Define how your content looks, organizing fields like product name, description, price, and image.
Entries: Capture specific content details within a template, acting as instances or records, similar to blog posts.
Groups: Easily organize related properties into cohesive units, useful for defining product specifications.
Widgets: Enhance your content with dynamic and interactive elements like sliders, galleries, or forms.
Now, picture the content you want. You're building an online store, considering products, categories, and variations. Take a look at the finished website:
Also, visualize a single product page:
Title: Text
Slug: Text
SEO: Group
Gallery: Group[ ]
Price: Number
Discounted Price: Number
Description: Rich Text
Sizes: Group[ ]
Gender: Group[ ]
Category: Group[ ]
Brand: Group[ ]
Unit Sold: Group[ ]
Go to the left side of the admin dashboard.
Click on templates and choose "Add new template."
Important templates include Product Color, Product Size, Product Gender, and Product Brand.
Similarly, create groups for SEO, Product Image, and Product Size from the left panel of the admin dashboard.
Design a product template based on the templates and groups created.
For the homepage, click on "Add new" under templates and configure fields like Hero and CTA for frontend use.
In the previous section, you were introduced to entries. Now, let's dive into creating content by adding entries to your templates.
Navigate to the Entries tab on the left panel of the dashboard, housing all the templates you created.
To add an entry, select the desired template and commence content input.
Let's initiate this process with the Product Color template:
Next, address the product sizes - XXL:
Proceed to create a product entry:
Don't overlook the homepage template:
For a firsthand experience, explore the live e-commerce store here. This walkthrough will provide you with a better understanding of the implemented content structure.
Nice work on getting this far! Everything has been straightforward and smooth. Now, let's create a Next.js website and show off the data we've set up.
Before the next step, let's talk about something equally important and interesting: The BCMS starters. These are a collection of fantastic websites built just for you, making it easy to set up your frontend without any hassle. There are more than 8 starters, including one for e-commerce. To use them, all you have to do is clone the repository and add your API keys.
Link to the Repository: BCMS Starters Repository
NextJS CMS integration is versatile, BCMS starters show that there are no limits. But honestly, that is just the surface that has only been scratched. Building websites is endless. Check out the BCMS blog article 60 popular websites built with headless CMS for more inspiration.
The BCMS CLI makes it easy to get a Next.js project up and running with default BCMS configurations. Just run the command bcms --website create
and follow these prompts:
Project Name: For this tutorial, name it e-commerce
(optional and can be left blank).
Choose a Framework: Select Next
.
Connection Type: Choose live
to connect to a hosted BCMS instance on the cloud or local
for a locally hosted project.
To connect the Next.js frontend to BCMS, add your BCMS API keys. Here's how:
Go to the BCMS dashboard and click on Keys
.
Click on "Add New Key."
Copy the Key Secret and the ID, then add them to the Next.js .env file.
BCMS_API_ORIGIN=http://localhost:8080 BCMS_API_KEY=6433b6994c02e25452a8a947 BCMS_API_SECRET=4107ecd203ff708a1789439376934e315781d66134d6c0da058bc87583f6e0c9 NEXT_PUBLIC_BCMS_API_ORIGIN=http://localhost:8080 NEXT_PUBLIC_BCMS_API_KEY=6433b6994c02e25452a8a947 NEXT_PUBLIC_BCMS_API_SECRET=4107ecd203ff708a1789439376934e315781d66134d6c0da058bc87583f6e0c9
In this tutorial, we will be utilizing the e-commerce starter from BCMS. Feel free to clone the repository here.
First, add the API key to the .env.local
file, and then you can begin fetching data to display on the website. Run the development server using npm run dev
. The data fetching is done with Next.js methods and the BCMS client, as shown in the code snippet below:
export const getStaticProps = async () => { const client = getBcmsClient(); try { // Fetch data for the homepage const homePage = (await client.entry.get({ template: 'home_page', entry: 'home', })) as HomePageEntry; return { props: { page: { meta: homePage.meta.en as HomePageEntryMeta, }, }, }; } catch (error) { return { notFound: true, }; } };
Now, let's break down what's happening in the code:
The getBcmsClient
function serves as a client to interact with the BCMS server. Think of it as similar to the fetch API
or Axios
, but specifically tailored for BCMS.
Next.js [getStaticProps](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props)
is employed to fetch data for the page during the build process.
With these methods, you can effortlessly fetch any template or page and display the data on the frontend. It's as simple as providing the template ID and the entry name.
To fetch data for a single product on a product page, a slight modification is made in the code:
export const getStaticPaths = async () => { const client = getBcmsClient(); // Fetch all products const products = (await client.entry.getAll({ template: 'product', })) as ProductEntry[]; // Generate slugs for all products const paths = products.map((product) => { const meta = product.meta.en as ProductEntryMeta; return { params: { slug: meta.slug, }, }; }); return { paths, fallback: false, }; }; export const getStaticProps = async (ctx: GetStaticPropsContext) => { const client = getBcmsClient(); try { // Fetch data for a single product using the slug const productPage = (await client.entry.get({ template: 'product', entry: ctx?.params?.slug as string, })) as ProductEntry; return { props: { page: { meta: productPage.meta.en as ProductEntryMeta }, }, }; } catch (error) { return { notFound: true }; } };
Here, getStaticPaths
is utilized to generate slugs for all products, and then getStaticProps
fetches data for a single product using the obtained slug. This enables dynamic rendering of individual product pages based on their slugs.
Now that your online store is ready, the next step is to make it accessible to everyone. This involves two main tasks, depending on how you are using BCMS.
To share your website with the world, you need to use a service called Vercel. It's a straightforward way to make your website live on the internet. Follow this tutorial to learn how to use Vercel.
To sum it up, creating an online store using NextJS headless CMS is simple and powerful. BCMS headless CMS helps you manage your store's content, while Next.js makes sure your website works well. The website you've created is not just for show – it's a starting point for you to explore what BCMS can do. With BCMS, you can easily adapt your website to different needs and connect it with other tools.
Now it's your turn to try BCMS and see how it can help you create and manage your online store effortlessly. Enjoy the journey of sharing your content with the world!
There are many example apps and starter projects to get you started.
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.