Headless is the decoupling of presentation layer from backend. Presentation layer means, what a shopper sees ad experiences. shopper sees when they first get to the website, the experience they have on the website, where they start getting to know the brand story & engaging with the products. This experience can be managed by a CMS, DXP, PWA or any other front-end technology.
To create headless bigcommerce store, we can use Vercel platform. Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.
we create storefront with Next.js which is a React framework, and deploy in Vercel platform.With vercel we can create and customise storefront for better user experience. Vercel integrate with bigcommerce store , So the strorefront (head of bigcommerce) will be in Next.Js .
Create storefront with Next.js
Next.js
Next.js is a headless integration to bigcommerce.This makes easy to build websites with react. Next.js is front-end framework.
Before start to create headless storefront, first need to deploy a live version directly from vercel, then develop locally cloning the new git repository created during deployemnt.
Deploy and download locally is a long process, but still, we have support from bigcommerce . Follow the instructions properly and do the rest.
Step 1 : Visit nextjs.org/commerce and click Clone and Deploy.
Step 2 : create a Vercel account by logging in using one of the supported Git providers. The Git provider you choose is where Vercel will clone the Next.js Commerce repository.
Step 3 : Create Git Repository dialogue will appear with a dropdown to select your Git Scope, and a Repository Name text field. You may change the name of the project from the default or leave it as-is. Click Create to proceed.
Step 4 : (Optional) Create a team. You can also click Skip to continue without creating a Vercel Team.
Step 5 : In the Add Integrations dialogue box, click Add to connect your BigCommerce store to your Vercel project.
Step 6 : Log into bigcommerce store account
Step : 7
- In the Add BigCommerce to Your Vercel Project dialogue, select Sign Up or Log In.
- If you are an existing developer on BigCommerce, select Log In and use your BigCommerce credentials to integrate BigCommerce and Vercel. Follow the on-screen instructions to install the Vercel app to your BigCommerce store.
Developing locally after Vercel deployment
Step 8 : Visit the Git provider where Vercel created a new repository. Clone that repository locally.
Step 9 : Navigate to the locally cloned project’s root directory and create a copy of the .env.template file. Rename the newly created file .env.local and insert the your environment.
Step 10 : Open a terminal in your repository’s root directory. To install the project’s dependencies, run npm install.
Step 11 : When dependencies have finished installing, run npm run dev in your terminal. Next.js will load the environmental variables from .env.local, start a local server, and compile your project.
Step 12 : To see your Next.js Commerce storefront running locally, open localhost:3000 in your browser.