Ecommerce Next.js tutorial + template

How To Build an Ecommerce with Next.js and Snipcart tutorial

Posted on October 4th, 2021 by Antonello Zanini

Over the past few years, ecommerce websites have become increasingly popular, especially after the unfortunate events of the last years. Consequently, being able to build an ecommerce application from scratch is now more valuable than ever. Thankfully, several libraries and Next.js ecommerce templates have been released to help developers achieve this goal with less effort. In particular, Snipcart is the perfect solution to build a modern and secure ecommerce and start selling your products or services online. So, let’s here is the tutorial to develop an ecommerce website in JavaScript and Next.js using Snipcart. Follow this step-by-step tutorial to learn how to achieve the following result:

What is Next.js

Next.js is a JavaScript framework built on top of Node.js. Its goal is to make web applications developed in React server-side rendered. In other words, it allows you to develop statically generated websites while using React.

This also makes you avoid the SEO problems coming with client-side rendered websites. So, not only will your Next.js applications be SEO-oriented, but also be loaded faster by the browser. This is because it can simply show the pages received by the server, without having to build them dynamically like in React.

Plus, its strength comes from the millions of ready-to-use npm libraries supported. These allow you to achieve any goal quicker, without having to reinvent the wheel. Consequently, Next.js is also a cost and time-effective solution.

What is Snipcart

Snipcart is a powerful, reliable, easy-to-install HTML and JavaScript shopping cart platform. You can this powerful tool to add the most common e-commerce features to any website or web application in minutes. It also allows you to customize its look & feel by using CSS custom rules. Plus, Snipcart comes with a complete and easy-to-use back-office management dashboard where you can track any kind of data related to your sales. In other terms, it represents the ideal JavaScript solution to add a shopping cart to your website effortlessly.

This is what the ecommerce Next.js template will look like:

Ecommerce Next.js + Snipcart template

Ecommerce Next.js - Prerequisites

This is the list of all the prerequisites required to build the template application:

Developing an Ecommerce Next.js

Clone the GitHub repository supporting the article and try the template ecommerce you are about to see how to build by launching the following commands:

git clone
cd ecommerce-demo-nextjs-snipcart
npm i
npm start

Or build the ecommerce application in Next.js by following this step-by-step tutorial.

1. Creating a Blank Next.js Project

Create Next App is the perfect tool to initialize a blank working project in Next.js with just one command. This is not complex and represents the officially supported way to create a Next.js empty application. Launch the following command to initialize your ecommerce Next.js new project:

npx create-next-app ecommerce-demo-nextjs-snipcart

Now, you should be able to see your project in the ecommerce Next.js template folder. This should have the following file structure:

├── node_modules
├── package.json
├── .gitignore
├── .eslintrc.json
├── next.config.js
├── public
│ ├── favicon.ico
│ ├── vercel.svg
├── syles
│ ├── globals.css
│ ├── Home.module.css
└── pages
├── _app.js
├── index.js
├── api
├── hello.js

Access the ecommerce Next.js template folder and launch the local server by running these two commands:

cd ecommerce-demo-nextjs-snipcart
npm run dev

Then, visit http://localhost:3000/ in your browser, and you will now be able to see the default Create Next App home page, as follows:

The default Create Next App home page

2. Integrating Snipcart with Next.js

Now, it is time to see how you can integrate Snipcart in your project. First, you need to subscribe to Snipcart. If you do not have an account, you can create a new one for free here. Otherwise, sign in here

The Snipcart registration page

Second, you have to add Snipcart to your website. This can be achieved by importing its JavaScript and CSS files by using public CDN links. In detail, add the following lines between the <Head> component you can find in your pages/index.js file.

<link rel="preconnect" href="" />
<link rel="preconnect" href="" />

This is the Next.js way to add additional scripts to a page, which is the home in this case. Specifically, the first two lines are required to tell the browser to pre-connect to all the two Snipcart subdomains to improve performance. Then, the Snipcart CSS file containing everything required to style the default Snipcart shopping cart is imported.

Third, it is time to add the Snipcart JavaScript dependency to your ecommerce website. You can achieve this by pasting the following line of codes after the <footer> section of your pages/index.js file:


Now, the Snipcart script providing the shopping cart features has just been imported. Also, a hidden <div> that will be used by Snipcart to show the shopping cart was defined. Keep in mind that in order to work, Snipcart requires you to specify your API key here. You can retrieve this information in your Snipcart account by logging in, opening the setting menu, and clicking on “API KEYS” as in the picture below: 

Retrieving the Snipcart API Key

Replace “YOUR_Snipcart_API_KEY” with that value, as follows:


If you encounter problems in setting up Snipcart or adding it to your website, follow this link from the official documentation.

3. Building a Product Component

Let’s now see how to implement a Product component and connect it to Snipcart. This can easily be achieved as follows:

export default function Product(props) {
const { id, imageUrl, name, description, price } = props;
return (
<div key={id} className={styles.product}>
<Image src={imageUrl} alt={`Image of ${name}`} height={640} width={640} />
Add to Cart

What is important are the fields defined in the “Add to Cart” HTML <button> element. These attributes are required by Snipcart to be able to add your products to your shopping cart. So, they represent everything you need to take into consideration while integrating your products to the Snipcart shopping cart. Follow this link to learn more on how such an integration works.

As you can see, your products need to have at least an id, a name, an image, and a price. Such a component integrated with Snipcart is all that is needed to implement an ecommerce, as you are about to see.

4. Putting It All Together

You now are ready to see the entire ecommerce application in action. The only thing you need to do is to retrieve all your products. Then, show them on your home page by employing the Product component as below:

import Head from "next/head";
import styles from "../styles/Home.module.css";
import products from "../app/assets/products.json";
import Product from "../app/components/Product/Product";
export default function Home() {
return (
<div className={styles.container}>
<link rel="icon" href="/favicon.ico" />
<link rel="preconnect" href="" />
<main className={styles.main}>
<h1>E-Commerce in Next.js and Snipcart</h1>
<div className={styles.grid}>
{, i) => (
<Product {...product} key={i} />

By clicking on the “Add to Cart” button your products will be automatically added to the Snipcart shopping cart. This way, users will be able to add to their cart the products or services they are interested to buy.

The last thing required is integrating a payment system. Precisely, you can connect one of the several payment gateways supported by Snipcart and allow users to pay and receive their products. 

Et voilà, your ecommerce website has just been implemented!

On the other hand, the entire ecommerce website relies on the products.json file containing all product information for sale.

"id": "t-shirt",
"name": "T-Shirt",
"price": 35.00,
"imageUrl": "",
"description": "A white t-shirt",
"url": "/api/products/halfmoon"
"id": "wallet",
"name": "Wallet",
"price": 20.00,
"imageUrl": "",
"description": "A fancy wallet",
"url": "/api/products/wallet"
"id": "cup",
"name": "Cup",
"price": 5.00,
"imageUrl": "",
"description": "A tea cup",
"url": "/api/products/veiltail"

As you can imagine, keeping all your products in such a file is not scalable, and why most companies now-a-days rely on a headless CMS to write and store products data. 

Content Management Made Easy with DatoCMS 

DatoCMS is one of the best choices when it comes to building an ecommerce. It doesn’t only provide a performant API (GraphQL and REST) to get your products' data in a matter of milliseconds, but a super user-friendly interface. By connecting your ecommerce website to DatoCMS, you will be able to tackle the content management issue aforementioned.

In fact, you will be able to retrieve all your products as effortlessly defined by your content generation team. The advantage of DatoCMS in relation to its competitors, is the possibility to add validations to your data. In this way, you can always be sure that what gets online is vetted and safe.

To get started with DatoCMS and Next.js, you should follow this link from the official documentation and learn more. This is just one of the many features that a headless CMS offers when it comes to building an ecommerce. Find them all here

Ecommerce Next.js + Snipcart + DatoCMS - Conclusion

In this article, we looked at how to build an ecommerce website in Next.js. Being able to develop an ecommerce has become increasingly important. At the same time, many libraries have been developed to make this simpler, and you do not have to start from scratch.

Particularly, Snipcart is the perfect solution to achieve such a result effortlessly. Plus, it is easy to adopt with technologies like Next.js, as we just saw. But the real challenge lies in how to generate the content related to the products or services on sale. This is because anyone should be able to manage the content shown on an ecommerce.

Thankfully,  you can avoid these problems by taking advantage of a complete and reliable headless CMS solution – such as DatoCMS.

Thanks for reading! We hope that you found this article helpful. Feel free to reach out to us on Twitter with any questions, comments, or suggestions.