Blog / Building the future of headless ecommerce with Next.js
Building the future of headless ecommerce with Next.js
A conversation between Bel Curcio, Director of Solutions at Vercel, and Greg Hoskin, Solutions Engineer at Swell. They unpack why they're excited for developers to build more ecommerce sites with Next.js, and what the future holds for the framework.
Last year the Next.js commerce starter kit was used during a conference keynote presentation. Since then, many have been wondering about the latest features to come out of this year's conference and how that will influence the future of ecommerce.
To explore this further, Swell's Solutions Engineer Greg Hoskin sat with Bel Curcio, Director of Solutions at Vercel to discuss the hugely popular open-source React framework.
Their discussion dives into why businesses develop with Next.js and the ecommerce starter kit. They also discuss what future features providers (like Swell) can forecast.
See the full interview at the end of the article.
Commerce as an example for the web
Greg Hoskin: First, can you briefly explain your role at Vercel, and why a business might decide to develop with Next.js and the ecommerce starter kit?
Bel Curcio: My team and I work closely with our customers and future customers. We make sure that they can ship scalable solutions to the web with Next.js and sometimes with other technologies. We ensure that the data layer (and everything in between) is as fast as possible.
In terms of the conference and Next.js Commerce, we believe that commerce is the quintessential example of the web.
Whether you need lazy loading stuff, or you have a layout shift because of a big image, or a product that you're promoting. You have reviews, you have comments, you have users and customers. By simply clicking the add to cart button, you have the possibility of analytics, coupons, discounts, and shipping. There are so many services and third-party scripts that you can add to your store.
If we can solve (for) the commerce space, we've pretty much solved (for) a lot of features of the web.
— Bel Curcio, Director of Solutions, Vercel
We asked ourselves: how can we start dividing all the concepts?
We started to think that we shouldn't be maintaining a lot of providers or a lot of repos at the same time. We try to come up with an architecture that can easily change between providers to remain fast. We also empower the developer whether that's to understand what's happening when you click something, when it goes to the origin, when it goes to the edge, or when it goes to local storage.
All of these things are amazing to see. We put our efforts into making Next.js Commerce and we're seeing amazing improvements for the future.
Providers and flexible schemas
Awesome. You mentioned speed and we could tell right away how fast the framework is. With Swell, we have a lot of customers that have very unique businesses. So things like product options are not your standard color and size all of the time. Sometimes they might have something like a type of coffee grind. Is it coarse, or is it fine? I remember when we mentioned that to you, we were amazed that the very next day your team had updated the entire framework to allow for any type of product option.
It got me wondering what kind of role you see providers such as Swell, having on the platform, and potentially future features that are developed for?
Something that the pandemic showed us, is that you need to move to the web fast. You also need to provide a real experience. While we don't have augmented reality and virtual reality in every virtual store yet, we need to have a near similar experience with the senses. Like, the sense of touch, smell, and everything that a store can give you.
What I see in the future for Next.js Commerce is that one by one, we'll start tackling all of those things.
Swell was incredibly helpful in explaining what the product was, and everything happened super fast. We can fetch data really quickly, and waterfall that to make it convert really well in the UI.
— Bel Curcio, Director of Solutions, Vercel
The idea is that you grab the data and populate the UI completely. In order to have something like that, you need to have certain types of schemas that represent the data that you're going to have. That's why we came up with flexible schemas.
There's not one single standard for products. That's another thing we found out — there are so many ways to declare a product. It's fun to explore other realms of how you can declare a product.
Next.js 11 features and third party implementation
Going back to the conferences, it was just this month that you released Next.js 11. There are some exciting features around it, like the new script tag and Live collaboration. I'm curious to know, how do you see that influencing the commerce package?
In terms of Next.js 11 updates, we improve the image component a lot, you can use properties like blur. This can impact the user experience in a really positive way. Before the image component arrived at solutions, we came up with a lot of recipes to make sure that the user can see an input before having the whole image completely loaded. These are the types of things that completely changed your perception of how the web is.
Also, when you land (on) a website, and you see that someone on the other side built the experience for you, you feel welcomed. And that's amazing to see.
— Bel Curcio, Director of Solutions, Vercel
Coming back to the updates of Next.js 11 there is the third-party scripts implementation and the script tag optimization that is critical for commerce. There's a lot of third-party services to use for your website or for your store. I think that when we go over audits solutions empower the developer to understand to load certain scripts and why. It also empowers you to understand what you're bringing to the user as well. Another update that we had was font optimization.
Now jumping to Next.js Live, from the Vercel side we tried to change how teams work together in the same space. So I used to work in an agency a couple of years ago and having something like Next.js Live and also Vercel's atomic deployment may have been critical for the business at that moment. Now, having the same experience that ported to the web is incredible.
Yeah, I think back on some projects and just how much easier things would have been, had we had something like that as artists.
It's a game-changer. We get to test a lot of our components out. We tested out a lot with Next.js Commerce, because it's a fairly complex application, and it's a working application. We use that because we want to try to stay away from "Hello world" as much as possible. Because it's not real. We wanted to try Next.js Commerce and we started to see the value. The first time I tried Next.js Live, I tried to modify the copy for the landing, and also for the product view. We realized that the title was not responsive enough at certain sizes. I was like, we need to improve the component (instantly).
The future of commerce providers
You know, if you're using it yourself as the developers, then it's going to be useful for the folks that are developing with it. That's really cool.
Is there anything for the Next.js Commerce side, as far as future development that you can give us a hint, maybe some upcoming features, or moonshot items?
Right now we are trying to polish the custom checkout experience. We also improved a lot of the pieces of the features API. So what that means is: if a user, wants to toggle the cart off by some weird scenario, we are starting to understand what the end-user at the developer can toggle off, and simply toggle it off. Like, if you don't want to allow search, you can tell that off from the UI. Next.js allows us to also not ship code that we won't be using. So we don't ship code that won't be used.
In the future, what we would love is for the providers to have their own packages. They will work on Next.js Commerce, but they will also work on their own stores as well. We would love to have this as atomic because right now, you can have multiple providers that can pollute the package JSON. So we're improving that. We're also making the types more flexible to help the developers work on their providers in a more easygoing way. We're mostly trying to focus on that right now. Making it faster, smaller, simpler, with a lot of support for the combined third-party-like providers.
Imagine that you would want to combine Swell with something else. So for example, Contentful or DatoCMS. You'd have content on one side to fetch the blog side, and you can have your store on the other side to fetch the store things. We are experimenting a lot.
What is fascinating is that we are keeping it fast. We're also extending the types making them more flexible and, improving and modularizing capabilities of the providers.
Well, Bel this has been an incredibly insightful conversation. I know all of us are at Swell are very excited to see how people sell creatively using Next.js and Next.js Commerce. Thank you so much for your time.
Thank you so much, Greg. It was amazing to work with Swell and we'll continue to do so.
Editors note: This interview was edited for readability and transcribed by Otter.
Up next
right to your inbox