Headless Ecommerce on Steroids – NextJS Commerce

The world of e-commerce is rapidly evolving, and so are the technologies that power it. In recent years, Next.js has emerged as a popular choice for building high-performance web applications, and its capabilities make it an excellent fit for e-commerce websites. Moreover as a headless ecommerce developer, we have to familiarize ourselves with the available tools out there. In this blog post, we’ll explore how Next.js can supercharge your online store and explore their open source ecommerce theme, NextJS Commerce.

Choosing NextJS for your Ecommerce Store

While there are numerous and amazing React frameworks out there like Gatsby, we are choosing the front runner of the show, NextJS. In relation to the ecommerce space, they have this convenient open source project that directly connects to Shopify which we’ll be also tackling in this blog post.

Speed and Performance

Next.js optimizes performance through features like automatic code splitting, which ensures that only the necessary JavaScript is loaded for each page. This reduces the initial load time and enhances the user experience. Faster load times contribute to better SEO rankings as search engines, like Google, take page speed into account when ranking websites.

Moreover with the new update of App Router (NextJS 13), it is faster than the previous versions. Some claim that its three times faster than the Pages architecture. That is why in my opinion, it’s the perfect time to move your store to a headless one.

SEO Metadata Management

NextJs allows for easy management of SEO metadata such as meta titles, descriptions, and structured data. This enables you to provide search engines with the necessary information to better understand and rank your content.

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}

Real-Time Updates

Next.js can be combined with data-fetching strategies that enable real-time updates without sacrificing SEO. For example, you can use serverless functions to fetch and display dynamic data on a static page, ensuring that users always see the latest information.

Scalability

This is one of the direct benefit of adapting a headless architecture. Since the frontend is decoupled with the backend, you can scale each other independently.

In today’s world, we usually select a hosting provider to house the frontend. With amazing providers like Vercel (NextJS) or Netlify (Gatsby), we can worry less about scaling. Hence, the scalability factor is directly tied to their pricing tier.

Customizability

A direct benefit of a headless architecture is that we can apply our custom code. By adapting it, we are no longer constrained from the CMS theming engine. We can select any modern frontend framework out there, seamlessly integrate it to our project and benefit from its feature.

Built-in Features of NextJS Commerce

Vercel developed an ecommerce theme built around their framework, NextJS Commerce. Out of the bat, it already provides the necessary features of having a headless ecommerce store, which is already convenient and amazing. They also made it convenient in deploying your own instance to bootstrap your project. Here’s a list of features it has:

  1. Product Page
  2. Basic Search
  3. Product Listing Page
  4. Cart
  5. Checkout

Possible Enhancements

While the base project gives out the basic necessities already for an ecommerce, I would suggest possible enhancements for this project. Take for example, the account management module. From a customer’s point of view, you would want to manage your addresses, edit your wishlist and view previous orders.

Moreover, Shopify has a robust built-in Menu module. It would be nice to integrate it to the navigation by default. The menu can be composed of links and a list of product collections. Having mentioned that, it would be a good use case for headers with complex navigation.

Theoretical Case Study – NextJs Commerce

To test this, I developed a demo furniture store using this open source project. As with any other project stakeholder, important factors to consider would be duration, learning curve and overall look.

With no dedicated UX designer and very minimal experience in user design, I decided to lean with Tailwind Components. They have a specific collection for ecommerce design which will be great for our case study.

The bulk of the legwork was to transform the Tailwind component to a React component/s. Primarily, it would entail to breaking it down to several Client / Server components if necessary.

Conclusion

While there are many more components left to design and integrate, the current state is a good stopping point. I’ll continuously update this blog post since I plan to be doing other pages (i.e. Product Listings). Below is the finished features as well as the number of hours it took me to decide a particular design and transform it to a component.

  1. Header – 1 hour
  2. Navigation – 8 hours
    • Tied with Shopify’s menu
    • Deliberately picked a complex navigation
  3. Footer – 1 hour
  4. Homepage – 4 hours
    • Hero section is tied with a specific Shopify Category
  5. Product Page – 3 hour
  6. Related Products – 1 hour

Currently, the site is indistinguishable from the default look which is great. For something that was designed and developed with less than 3 days, the look is fairly modern and clean. All in all, I would definitely recommend this open source project for their next Ecommerce project.