# Next JS ecommerce templates & code starters for BCMS ## Next JS Ecommerce Templates If you’re building an online store with Next.js, skip the boilerplate and get straight to selling with our BCMS-powered e-commerce template. [Next JS templates & code starters for BCMS](https://www.thebcms.com/starters/next/) give you everything you need to launch faster, scale smarter, and fully customize your store, without starting from scratch. Whether you’re launching a sleek B2C storefront, building a complex marketplace, or offering subscription-based products, this template is ready to adapt. It’s wired for performance, flexibility, and global growth, thanks to BCMS’s powerful content infrastructure and Next.js’s modern rendering strategies. Skip the clunky plugins and unlock full control over your storefront experience. ### Why developers love our Next.js eCommerce starters: - Core commerce features: Includes product listings, smart filtering, cart integration, and a streamlined checkout experience. - Tailwind CSS integration: Easily style your storefront with responsive, utility-first components that adapt to any brand or design system. - Localization made simple: Translate product pages, checkout flows, and category content by adding new languages in just a few clicks. - Seamless payment integration: Supports multiple payment service providers for a secure, flexible checkout setup. - Image optimization out of the box: Lazy loading and smart image handling for fast performance. Even with large product catalogs! - Optimized performance: SSR and SSG rendering ensure fast page loads, better SEO, and smoother shopping experiences. - E-commerce SEO built in: Structured data, optimized product/category pages, filterable search, and customizable meta tags help boost visibility. - Easy content creation with BCMS: Manage products, categories, discounts, and promotions separately, no code changes needed. - Analytics-ready architecture: Easily plug in Google Analytics, Meta Pixel, or custom event tracking for full eCommerce insights. - Multi-platform support: Deliver a consistent, optimized shopping experience across devices and channels. ## Learn how to build your Next JS ecommerce: Check out our step-by-step tutorial on how to create a Next.js e-commerce site powered by BCMS. ## Next JS e-commerce tutorial 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](https://www.thebcms.com/blog/gatsby-vs-next-vs-nuxt-key-features.md). Building NextJS e-commerce site on BCMS provides an ideal solution, and here's why: ## Key Features of BCMS - 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. 💡 Learn more: [Why BCMS is the Best CMS for NextJS: 6 Less Obvious Reasons](https://www.thebcms.com/blog/the-best-cms-for-nextjs.md) ![Online store example](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d21dd/bin2/1--online-store-example.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) ## NextJS e-commerce: Getting Started 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: 1. Effortlessly set up BCMS and Next.js 2. Craft a well-structured data model tailored for e-commerce 3. Create compelling product content within BCMS 4. Build a visually engaging and performant Next.js frontend 5. Deploy your e-commerce to the world Follow these steps: ## Step 1: Setting up BCMS 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. ```BASH npm install @becomes/cms-cli -g ``` Verify the installation by running. ```BASH bcms --help ``` Create a directory for your bcms instance. ```BASH mkdir ecommerce-starter && cd ecommerce-starter ``` Run the create command to scaffold a copy for BCMS. ```BASH bcms --cms create ``` Run BCMS using the docker. ```BASH docker-compose up ``` If everything is done right, you will be able to access BCMS by going to http://localhost:8080 ## Step 2: Set Up and Build Data Models Let's simplify the process in this crucial step to leverage BCMS to lay the groundwork for your e-commerce content structure. ### BCMS Basic Structures: - 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: ![finished website example](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d21ec/bin2/screenshot-2024-01-30-at-154845.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) Also, visualize a single product page: ![Single product page](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d21e7/bin2/single-product-page.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) ### Essential Elements for a Product: - Title: Text - Slug: Text - SEO: Group - Gallery: Group[ ] - Price: Number - Discounted Price: Number - Description: Rich Text - Sizes: Group[ ] ### Additional Fields for Filtering and Categorization: - Gender: Group[ ] - Category: Group[ ] - Brand: Group[ ] - Unit Sold: Group[ ] ### Creating Templates 1. Go to the left side of the admin dashboard. 2. Click on templates and choose "Add new template." 3. Important templates include Product Color, Product Size, Product Gender, and Product Brand. ![Product brand](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d21de/bin2/3-product-brand.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) ![Product color](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d21df/bin2/4-product-color.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) ![Product gender](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d21e0/bin2/5-product-gender.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) ### Creating Groups Similarly, create groups for SEO, Product Image, and Product Size from the left panel of the admin dashboard. ![Product size](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d21e1/bin2/6-product-size.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) ![Product image](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d21e2/bin2/7-product-image.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) ![SEO features](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d21e3/bin2/8-seo.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) ### Creating Product and Homepage Templates 1. Design a product template based on the templates and groups created. 2. For the homepage, click on "Add new" under templates and configure fields like Hero and CTA for frontend use. ![Product and Homepage Templates](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d21e4/bin2/9-product-and-homepage-templates.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) ## Step 3: Populate Content Based on Your Models In the previous section, you were introduced to entries. Now, let's dive into creating content by adding entries to your templates. ### Adding Entries: 1. Navigate to the Entries tab on the left panel of the dashboard, housing all the templates you created. 2. To add an entry, select the desired template and commence content input. Let's initiate this process with the Product Color template: ![Product Color template](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d22fc/bin2/10%20Product%20Color%20template-fdff1882b653acbb.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) Next, address the product sizes - XXL: ![product sizes](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d22fe/bin2/11%20product%20sizes%20-%20XXL-67195d3e786abc5e.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) Proceed to create a product entry: ![product entry](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d22fd/bin2/11%20%20product%20entry-625b2db1805b076e.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) Don't overlook the homepage template: ![homepage template](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d21e6/bin2/12-homepage-template.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) 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. ## Step 4: Build a NextJS Frontend and Display BCMS Data 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](https://github.com/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](https://github.com/bcms/starters) [NextJS CMS](https://www.thebcms.com/blog/nextjs-headless-cms-integration.md)[ integration](https://www.thebcms.com/blog/nextjs-headless-cms-integration.md) 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. ### Create a NextJS e-commerce Project ### Create a NextJS e-commerce Project 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: 1. Project Name: For this tutorial, name it e-commerce (optional and can be left blank). 2. Choose a Framework: Select Next. 3. Connection Type: Choose live to connect to a hosted BCMS instance on the cloud or local for a locally hosted project. ### Add API Keys To connect the Next.js frontend to BCMS, add your BCMS API keys. Here's how: 1. Go to the BCMS dashboard and click on Keys. ![API keys](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d21e9/bin2/untitled-2.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) Click on "Add New Key." ![Add New Key](https://app.thebcms.com/api/v3/instance/670e90c0cedcf9e4d34d1a23/media/670e90c0cedcf9e4d34d21ea/bin2/untitled-3.png?apiKey=670e90c0cedcf9e4d34d24e6.7e8471eb288ed672495cf4734e877b33042a4d7d63059d938576b8d45d35c166.670e90c0cedcf9e4d34d1a23) Copy the Key Secret and the ID, then add them to the Next.js .env file. ```JAVASCRIPT 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 ``` ### Fetching Data In this tutorial, we will be utilizing the e-commerce starter from BCMS. [Feel free to clone the repository here.](https://github.com/bcms/starters/tree/master/next/e-commerce)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: ```JAVASCRIPT 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: ```JAVASCRIPT 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. ## Step 5: Share Your NextJS E-commerce Store with the World 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. ### Share Your Website 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](https://nextjs.org/learn-pages-router/basics/deploying-nextjs-app/deploy) to learn how to use Vercel. ### Wrapping Up To sum it up, creating an online store using [NextJS headless CMS](https://www.thebcms.com/nextjs-cms/) is simple and powerful. [BCMS headless CMS](https://www.thebcms.com/) 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!