This tutorial demonstrates how to build and embed a BigCommerce app using Node.js, React.js, Next.js, and BigDesign, BigCommerce’s library of React components.
You will learn how to connect your app to BigCommerce, integrate an API, and set up a database to store app data. You will use BigDesign to give your app a native BigCommerce visual style and behavior.
At the end of this tutorial, you will have a functional single-click app that can make API calls and store app data in a database.
To get the app up and running quickly, follow the steps described in Quick Start: Deploy to Heroku Install Flow.
To successfully complete this tutorial, you need the following:
You will be using Next.js, BigDesign React components, and styled-components to build this sample app.
Next.js is a production-ready React framework equipped with many built-in features that allows you to create static and dynamic React-based applications quickly. Next.js handles a lot of the backend work for you giving you a jump start on building applications. Among other built-in features, Next.js comes with a page-based routing system, server-side rendering, and client-side routing.
With the exception of automated routing, our sample app is very React-ive. Even if you haven’t worked with Next.js before, having React experience will enable you to read the app.
BigDesign is BigCommerce’s design system. Using BigDesign when developing your BigCommerce apps will ensure that your app has a similar interface and adheres to the same user experience standards as the rest of the BigCommerce platform. We encourage you to familiarize yourself with BigDesign to simplify future integrations with BigCommerce.