What’s Next in Ecommerce
In development, we have a tendency to follow the next big evolutionary thing. As technologists, we are insatiable. We crave new input constantly and the need to learn something new drives us and our work forward — always evolving into the future.
Next Commerce represents the latest step forward for BigCommerce headless integrations. Built in partnership with the Next.js and Vercel teams, developers can now deploy a headless application that is completely integrated with BigCommerce in minutes. It is the first development of its kind from either Next or BigCommerce.
We are so excited about what Next Commerce enables for our developer community. The evolution of headless commerce enables innovative developers to build applications, expand their ecommerce footprint on the web, reach a global audience selling to more channels.
In this post, I will walk you through the steps to get started and deploy Next Commerce. If you’d like to see a live demo of the application and learn more about its feature set, check out our full demo and presentation from Nextjs Conf 2020:
Next Commerce Overview
Next Commerce is built using the latest from Next.js 10 and showcases all that Next.js can do when partnered with a powerful, Open SaaS ecommerce platform like BigCommerce. You can view the demo application and get an idea of the powerful feature set that you can see from the browser UI. But behind the scenes, there is a complete architecture that lends itself to extensible and configurable ecommerce implementations..
I suggest reviewing the GitHub Repository. It is open source and you can see applications README.md has a lot of valuable resources to get started.
Application Architecture
At first glance, the Next.js architecture appears to be a typical React file structure. However, when you dig into the features of Next.js you find that this structure is thoughtfully simple, yet intriguingly deceiving. There is so much functionality tucked into so few directories and packages. This is due to Next.js being a flexible, production ready React framework. It is not too opinionated on how to structure your application.
By taking this approach, Next,js allows you to define most of the file structure, and the styling structure based on how your team wants to organize code. This lends itself to everything from a monorepo structure to microservices repo structure. This can really help you determine the best building and deployment strategies for you or your team.
Next.js Requirements
As previously mentioned, Next.js is not very opinionated. Therefore, there are not many requirements. The minimum requirements are:
- Use of TypeScript wherever possible over JavaScript
- Directory for /pages and /public
- The directory for /pages will contain an index.tsx and an _app.tsx
- The directory for /pages will also contain your pages with routes
- The directory for /public contains an media that can be statically served to reduce server fetching
This is all that is required to maintain your Next Commerce application functionality. Other files and directories can be reorganized, with just some effort.
Packages and Configuration
This application makes use of Yarn or NPM package managers as well as the use of .env and .config files. For this application to function properly with BigCommerce data, you will need to utilize the BigCommerce Storefront Data Hooks package. Once this is installed, you can make use of your .env variables that reference a BigCommerce storefront key-value pair.
The .env variables are created from the integration with BigCommerce and stored in Vercel automatically. Using the Vercel CLI you can pull the .env file using the command, “vercel env pull”. This will allow you to set your .env.local variables for your BigCommerce storefront API keys and GraphQL authentication bearer token. Otherwise, you will need to use our developer documentation to set your storefront key-value pairs from your storefront control panel.
Other configuration is set using .config files. There are many of these already available. However, the most important would likely be:
Your tsconfig.json is what will allow your project to ultimately compile to JavaScript. The next.config.js is actually a node module. This is used by the Next.js server during the build process to compile the application code, configs are not required but are recommended for specific functionality to be enabled properly.
Components and Hooks
The majority of what you see in the demo application is created by utilizing components and hooks. Hooks contain state that you can reuse component to component as needed. Components can be found in the /components directory and are rendered to pages. As you can see the ecosystem of hooks to components to pages requires data from the BigCommerce storefront. In order to facilitate this data transfer without a ton of developer overhead, we created and utilized the BigCommerce Storefront Data Hooks package from above.
By utilizing this package you can get categories, products, product details, customer information and more. You can also post data to the BigCommerce servers like customer login and logout functions. To see the full functionality of this resource you can review the README.md documentation on GitHub.
DevOps Capabilities
By partnering with Vercel this application is very DevOps friendly. It is really the friendliest in terms of being able to collaborate on builds in real-time. You are able to build branches and deploy those changes to isolated Vercel instances. This makes reviewing and testing so much faster and is less intensive than other CI/CD infrastructure models. You can be as lean or opulent as you want to be.
As well, with tools like Next Analytics you can track changes to your applications lighthouse score by build and even by interaction. You can track how users are actually using the application and monitor critical performance on the cart and checkout where it matters the most.
Having such control and visibility into insights really tie this whole application together in one complete package.
How to Build It
It is very easy to get started. Just go to nextjs.org/commerce and click on the “Clone and Deploy” button to clone the repo to your repository of choice and deploy an instance of the main branch to Vercel.
The following steps will walk you through the integration process.
Step 1: Link your GitHub or existing Vercel account to an instance of the application. My account was automatically detected and assigned from a previous project.
Step 2: Establish a connection to BigCommerce using a built-in integration. You can connect to a net new developer sandbox or connect to an existing store or sandbox instance.
Step 3: If you are an existing developer on BigCommerce use your existing credentials to login to your BigCommerce instance and connect the application.
If you are new to BigCommerce, create a developer sandbox using the form pictured below. You agree to all terms and conditions by submitting the form.
Step 4: Your store will be linked to Vercel upon creation. You just need to wait while the integration takes place. If it stalls, your application will have a BigCommerce store, more than likely, you just need to check your email and follow the login path to complete the integration.
Step 5: When the integration is successful and complete, you will see a blue checkmark indicating that.
Step 6: To complete the process, create a named repository and deploy that to Vercel. Upon completion you will see your site deployed in a thumbnail image.
🎉 Congratulations, you have successfully created a developer sandbox and deployed an application to Vercel!
🔊 That was easy.
Ready to Innovate
If you are ready to take this application to the next level, I recommend starting by updating the layout and maybe changing up some of the components and CSS. This will allow you to start putting your own stamp on things while learning how the application works. You could create a custom checkout experience using Open Checkout in combination with this application to have a completely custom look and feel. You can incorporate the Open Checkout code into a monorepo for building and deployments or keep them in separate repos for integration testing.
I would also consider how you extend functionality by integrating APIs from ecommerce tools like Yotpo for product reviews or MailChimp for email marketing.
The best part about being headless is being limitless.
So, what are you building with Next Commerce?
We want you and the greater ecommerce community to build and contribute to these open source projects. You can contribute by opening issues and pull requests to the following repositories:
We’d love to answer your questions and have you join the conversation. Join us in the BigCommerceDevs Community here:
- Developer Slack in our channel #nextjs
- Developer Community Forum
💻 Tweet your contributions and site builds to @BigCommerceDevs and we will share your work. You can also follow BigCommerce on Twitter, Instagram, LinkedIn or Facebook to keep up with new site and product launches.
Thank you to Next.js and Vercel. We couldn’t be more excited to further this partnership and bring ecommerce to the next level, again and again.
