Saleor and Next.js: How the two are a powerhouse combination
Today there are many different ways to build an e-commerce website or application for your company. From open-source software that you need to build and maintain yourself to complete licensed products that you can use from day one. But what if you could have the best of both worlds?
With Saleor and Next.js, you can have open-source software with the speed and functionality of a licensed product. The combination of Saleor and Next.js is a powerful one, as you'll learn in this post. It gives you the speed your users are looking for while also providing you with all the functionality you need in modern e-commerce.
What is Saleor?
Saleor is an all-in-one platform for creating a production-grade, online e-commerce experience for your company. The headless commerce API that Saleor provides gives you a complete set of options to build an online shop. Saleor allows you to manage any number of storefronts such as web or mobile apps from a single backend. You can run Saleor on your servers as a free, open-source project. But if you don't want to maintain the platform yourself, you can sign up to run it in the cloud. This way, your developers don't have to worry about your backend's deployment, scalability, and availability.
Because the headless commerce API from Saleor is based on GraphQL, you get even more advantages by leveraging into the GraphQL ecosystem. GraphQL is a query language for APIs that gives the user control of the API's returned fields. This gives you a lot of flexibility and takes away the hassle of normalizing or restructuring data returned by an API. GraphQL is also useful for products that need to be optimized for both web and mobile, or APIs serving multiple frontend applications at once. You'll learn more about other advantages of GraphQL for e-commerce later in this post.
What is Next.js?
On the other side, we have Next.js, which is a React framework to build production-grade frontend applications. React itself is already a good way to build user interfaces using components with JavaScript or TypeScript. With Next.js, this becomes even simpler as you can build React applications with zero build configuration. Next.js provides you with many features to make the development of React applications simple and decreases the need for external libraries or repetitive code. Also, it provides features for image optimization, internationalization, code-splitting, bundling, and much more.
You can deploy Next.js applications in seconds in Vercel, a cloud platform explicitly created for Next.js applications. Meaning you no longer have to create deployment scripts or pipelines yourself. Vercel takes care of the scalability and performance of your application once you deploy it. Of course, you could also choose to deploy your Next.js application on your servers or with a different cloud provider. But as we’ll share in this post, not handling deployment yourself comes with huge advantages.
How do Saleor and Next.js work together?
Saleor and Next.js integrate nicely together. Saleor comes with a headless commerce API based on GraphQL. Exposing a headless GraphQL API means integrating it with any frontend (or backend) application over a network connection. This integration is something that you can build yourself in any programming language. GraphQL can be used platform-agnostic, meaning you're not tied to specific integrations.
From any application, you can send an HTTP-request to Saleor's headless commerce API, either self-hosted or on the cloud, to request things like product information or to place an order. To get an idea of how the headless GraphQL API from Saleor works, you can visit the interactive API playground. In this playground, you send HTTP requests to the Saleor API using GraphQL. This playground has been preloaded with an example GraphQL query that retrieves the first two products from the demo environment. If you want to learn more about how you can interact with the headless commerce API from Saleor, look at our documentation.
Overview of network requests between Saleor and Next.js app
At Saleor, we believe in the power of GraphQL when combined with React. Of course, you can integrate Saleor with any programming language or framework of your choice. But we see Next.js as the best framework to integrate with. Therefore we also offer pre-built integrations, you can use Next.js to kickstart the development of your commerce frontend. Using these integrations, you can get a glimpse of what you can achieve when combining Saleor with Next.js for a complete all-in-one e-commerce experience.
The most popular integration of Saleor with Next.js is our very own React storefront. This storefront is available from GitHub as an open-source project and created with Next.js and TypeScript. It shows how to integrate the headless Saleor Commerce API with Next.js using GraphQL.
An example of what the storefront looks like can be seen below. You can also follow Saleor’s tutorial to learn how to build this storefront yourself. The best way to experience the power of a headless commerce API as a backend is by developing a frontend application to integrate with it.
Above, you can see an example of the storefront we created using the Saleor tutorial. The tutorial shows you how to use the most essential Saleor features and explains the core concepts of the products. It’s meant to give you a high-level overview of building a frontend application that connects with the Saleor API.
Besides Next.js and TypeScript, it uses Apollo Client to make GraphQL requests and Tailwind to apply basic CSS-styling. All the technologies used in the tutorial are available open-source and used by millions of developers worldwide.
But besides our own storefront, Next.js also has its own example of integrating with Saleor. This integration was co-created with the Saleor team and can be found here. Next.js Commerce is an open-source project showing how you can integrate Next.js with multiple different headless commerce APIs. One of these is Saleor.
The stack that is used for this project is similar to the one used for our Saleor storefront, but it’s a more complete example. With Next.js Commerce, you’re able to go to production fast, and can rely on the fundamentals created by the teams behind Next.js and Saleor. You can see an example of what Next.js Commerce filled with demo products looks like below.
The Next.js Commerce demo
The project is set up to be deployed on Vercel in just a few clicks and integrated with Saleor by providing only your Saleor Cloud credentials. With Next.js Commerce, you can launch an e-commerce store in minutes and deploy it to the cloud. Saleor is available in the cloud, which means you have no infrastructure to manage. Both Next.js and Saleor can run on servers that are optimized for scalability and performance.
Overview of Saleor and Next.js app deployed in the cloud
And this is just one of the many advantages of combining Saleor with Next.js, as you'll learn in the next section.
What are the benefits of Saleor + Next.js?
We’ve covered what Saleor and Next.js are and how you can integrate them. Following the examples in the previous section, you can get an e-commerce shop running quickly by combining Saleor with Next.js through one of our example integrations. But why are the two perfect together? Let's recap some of the shared advantages that Saleor and Next.js have:
- Saleor is relying on GraphQL to power its headless commerce API. This gives you the flexibility and speed of GraphQL, which you can integrate into any application.
- Next.js is offering features to build fast web applications quickly, using React. It works well together with GraphQL, which also improves development speed and performance for developers.
- Saleor and Next.js are available open-source and use the latest technologies. Both can be run on your own servers but also come with a cloud equivalent. This version that runs on the cloud means that you don't have to worry about any infrastructure.
Let's zoom in on some technical details of combining the power of GraphQL that Saleor offers and the speed and performance from Next.js. The CTO of Saleor, Patryk Zawadzki, also gave a talk about building commerce applications with Saleor and Next.js at the annual Next.js Conf 2021.
Faster Deployment Over Time
Historically you might have built your e-commerce website using a monolith project, which contained a coupled backend and frontend. The tight correlation between the backend and frontend helps you at the beginning of the project, but it can slow down development in the long run. You have a decoupled environment when using Saleor as a headless commerce API and Next.js for your frontend. Changes you make on the backend don't interfere with the frontend and vice-versa. You no longer have to worry about scheduling deployments, so they don't interfere with each other. Also, you're not tied to using templates or framework-specific code when developing a frontend for your e-commerce store.
Saleor can be combined with Next.js and React, but also with any other programming language or framework. The headless commerce API can integrate into any application that can send network requests over HTTP or GraphQL. You also have storefronts created with other frameworks than Next.js, like Vue Storefront.
Decrease Loading Time and Interaction Speed
Another important aspect of building an e-commerce experience is performance. Customers want to use your website or mobile app without any lags and any additional second of loading time hurts your conversion. Next.js provides you with all the tools to cut down your web application's loading time and interaction speed. It offers features like static builds, image optimization, code-splitting, and building. The static builds that Next.js creates for your application means it can be better indexed for SEO. Also, it increases the performance as your application can be served more efficiently by the browser.
One of the latest improvements Next.js made was adding support for Incremental Static Regeneration (ISR). ISR lets you generate a static build for our application on a per-page basis instead of generating all builds at build time. This improves the performance of your application, it also makes the build time much lower.
Let's say it would take 50 milliseconds to create a static build for a product page, and you have 100,000 products in your store. This means it would take almost 2 hours to build pages for every product in your store. With ISG this will be done ahead of time on a per-page basis when customers visit your website. While still improving the performance for your customers, ISR cuts down the build time for your developers from 2 hours to just minutes.
Summary
In this post, you've learned about the benefits of integrating Saleor with Next.js. Saleor provides a headless commerce API that uses GraphQL, while Next.js is a framework to create performant React applications quickly. There are multiple ways to integrate these two products, such as the Saleor storefront and Next.js Commerce. The storefront and the tutorial it comes with are good bases for learning about the most important features and core concepts of Saleor. If you want to get an e-commerce store quickly, then Next.js Commerce might be a better choice.
If you have any questions about Saleor, please feel free to reach us on GitHub Discussions or Twitter.
Learn more:
- Making commerce. Faster. - Patryk Zawadzki - (Next.js Conf 2021)
- E-Commerce Integration Apps using Next.js & Saleor GraphQL API with Lee Robinson & Patryk Zawadzki
- Creating a Mobile Application with React Native using the Saleor GraphQL API
- GraphQL in Flutter - Building a Mobile Shop using Saleor API