Next Js Commerce - An Overview and Guidelines

As developers, we have this unyielding need to follow the latest in technology. We are driven by this insatiable thirst to learn everything, absolutely everything, about every big and innovative technology. We crave to get an exclusive glimpse of the future – and this desire keeps us going. Our quest for the latest eCommerce technology led us to – Next Commerce.

Next Commerce is the latest offering from BigCommerce in collaboration with Next.js and Vercel teams. With the Next Commerce, eCommerce developers can install a completely headless application that’s integrated with BigCommerce in a matter of minutes. It is the first endeavor of its kind from both Next and BigCommerce.

Headless commerce is probably what the future of eCommerce most likely looks like. Headless commerce makes it easy for developers to design and develop innovative apps, reach out to a broader global market and help eCommerce store’s sales graph point north.

According to a report on site performance, in a survey of 120 eCommerce executives, 62% were of the opinion that headless commerce can improve conversion rates and customer engagement significantly.

We are thrilled to show you just how effortlessly easy to install and incredible to use this latest offering from BigCommerce and Next is. This step-by-step guide is everything you need to get started on Next Commerce.

We’ll begin with an overview.

An Overview of Next Commerce

Next.js is a widely used open-source web framework with which you can build your own applications – both server-side rendering and static applications using React. Currently, the framework brings Next.js Commerce to us. It is a developer kit using which we can build extremely high-performing, customizable and engaging eCommerce sites. Being offered along with a robust open SaaS platform like BigCommerce, the possibilities and potential of Next Commerce are immense.

Why is the Market Heading Towards Headless eCommerce?

Next.js is a powerful tool to build your eCommerce site. It is a complete and robust architecture that can be scaled, customized and configured for various eCommerce implementations.

Although Next.js extends a number of benefits, here are some of the significant few:

• Server Rendering

  The React components can be server-side rendered before the HTML can be sent to the clients.

• Hot Code Reloading

  Every time Next.js detects changes, the page reloads. Any URL is automatically routed to the filesystem. This doesn’t require any configuration skills from you. However, you can always customize according to your needs though.

• Ecosystem Compatibility

  Next.js is highly compatible with React, Node and, of course, JavaScript.

• Automatically Splitting the Code

  Pages come with only the libraries and the JavaScript – nothing much else. In the place of generating a single JavaScript that has all the app codes, Next.js actually breaks down the app into various resources making the entire process easier.



• TypeScript Support

  Since Next.js is written in TypeScript, it offers complete support.

• Prefetching

  A prefetching prop is supported by the Link component that automatically fetches page resources – even the automatic code spitting ones.

• Hybrid Applications

  It is possible to make use of both SSR and static web applications in a single project using Next.js.

• No Configuration Required

  This production-ready framework is perfect for engineering teams that are trying to offer scalability and ease of use to eCommerce stores. It comes with auto-compilation and bundling, in-built CSS support, filesystem routing, automatic code splitting and API creation.

Overview on How to Deploy

Now equipped with a basic understanding of Next Commerce, let’s quickly get into the more juicy details – deployment. Let’s start with the prerequisites. The Next.js is not very clingy, so it comes with the bare minimum requirements.

Prerequisites

• An IDE
• TypeScript in place of JavaScript
• A basic Know-how of BigCommerce APIs
• Directory for /pages and /public. The directory for /pages will have an _app.tsx and the index.tsx
• The directory for /public will have media that can be served statically.
• Additionally, the /pages will also have eCommerce store pages with their routes.
• Any Git provider – be it Bitbucket, GitHub or GitLab.
• NPM

These are the basic requirements for your Next Commerce functionality. You can always reorganize the rest of the directories later.

Packages and Configuration

In addition to the NPM and Yarn, the Next Commerce run makes use of .env and .config files to get started.

In order for the application to work properly, you would need to make use of the BigCommerce Storefront Data Hooks package. Hooks can be reused according to component needs. You can find the components in the /components directory, and these are rendered to pages. The link from hooks to components and to pages needs large amounts of data from the storefront. If you don’t want to spend a fortune on developer costs, you can easily make use of the BigCommerce Storefront Data Hooks package to your advantage.

This package helps you access categories, crucial customer data, product pages, details, and a lot more. Once you’ve successfully installed the package, you can link your .env variables to the appropriate key-value pair in the BigCommerce storefront.

The .env files are automatically stored in Vercel. You can easily pull the .env file by using the “vercel env pull” command. You can now set your BigCommerce storefront API keys and GraphQL token by using the .env.local file.

The next step is the .config files configuration. The tsconfig.json lets you compile the JavaScript for your project and the next.config.js is the node module. Many developers give this a miss, but it is highly recommended if you are looking to achieve any specific functionality.

Running the Project

Running the project in the development environment server is pretty straightforward. All you have to do is use the following command:

yarn dev or npm run dev

Deployment

Building the Next.js Commerce is fairly easy too –visit nextjs.org/commerce and click on the Clone and Deploy button. By the end, you should be able to have your own application up and running on Vercel – with your store’s logo. Once you have deployed, you can customize your store according to your needs.

We’ll take the integration process one step at a time.

Step 1:

Once you hit the Clone and Deploy button, you can start deploying using Vercel with a Git provider.

If you have a Vercel account, you can log in using your credentials.

If you don’t have a Vercel account, you’ll be prompted to create an account using any of the Git providers of your choosing.

Step 2:

After logging in to the Vercel account, you’ll be able to see a Clone Git Repository dialogue box with a drop-down list. Select your Vercel account and type in your project name in the field provided and hit Continue.

Step 3:

The next step is to install integrations. To connect your BigCommerce store to your Vercel project, hit the Install button. Once you hit the Install button, you should see an Add BigCommerce to your Vercel Project screen.

Step 4:

If you already have a BigCommerce store, you can simply Log-In using your existing credentials to integrate Vercel and BigCommerce. However, if you are new to BigCommerce, you click on Sign Up.

The Sign Up page will guide you through creating a developer sandbox using a simple form. Key in your details and agree to all terms and conditions to sign up. Click Continue when you see a blue checkmark next to the BigCommerce integration tab.

Step 5:

Now you can create the Git Repository by typing in your repository name. Click Continue.

Step 6:

Once you get to the Import Project screen, you should be able to confirm your project settings and click Deploy. The entire deployment shouldn’t take more than a few minutes.

Once deployment to Vercel is done, you would be able to see a thumbnail image of your deployed site.

Congratulations, your project has been successfully deployed!

React + Next.js

You can set up your eCommerce store with Next - SSR generator for React – and then deploy to Vercel. Using Crystallize and Next.js boilerplate, you can easily build a Jamstack web development eCommerce storefront. Now, we’ll be using the Crystallize CLI to develop a new project.

Key-in the following command in your terminal.

npx @crystallize/cli

With this command, you’ll be able to add in your preferred boilerplate, choose to go with your own tenant, or pick a demo tenant and add Service API.

In order to deploy to Vercel, you’ll need these basic requirements installed on your computer.

• Vercel CLI
• A Git provider
• At least, Version 10 Node.js
• A Tenant by signing up to Crystallize

Run the project in the development server using:

yarn dev or npm run dev

With this, you can access the development site, understand the app structure and edit the pages as per your requirements.

Once you are done with creating pages for various item shapes, you can start deploying to Vercel.

Again, to deploy your project to Vercel, you’ll need to get through the Vercel Github integration. However, you can also deploy manually just as easily. Use the command line to type in - vercel login – set the two environment variables using the Vercel dashboard.

Deploying your project with Vercel needs a Git provider. Push your project to the Git provider and you are almost done – deployment will be initiated.

Wrapping Up

The era of headless e-Commerce is here. Traditional eCommerce site development centered on offering a full-stack experience with a well-knit front-end and back-end. This helped stores quickly launch their applications. However, soon you’d experience performance hiccups – most significantly, you’ll not be able to scale as much as you’d like. But with headless eCommerce, you don’t have to struggle so much.

A headless design gives you much freedom to design your own front-end from scratch or use a pre-built one. You’ll have the capability to quickly respond to changes in the market and customize customer experiences accordingly. Most important of all – you can make changes to your front-end without tampering with your back-end. Now you know why, as developers, we are certain that the future of eCommerce is surely headless.