So, today, I want to explore what Next.js can do for e-commerce.

In the technical tutorial below, I’ll show you how to:

• Set up a Next.js development environment
• Create new pages & components
• Fetch data & import components
• Add a shopping cart to a Next.js app
• Style & deploy the app

But before we go through this, let’s make sure we understand what Next.js is and how it can improve your next e-commerce projects.

What is Next.js?

In a nutshell, Next.js is a lightweight framework for React applications.

Right out of the gate, I feel this definition has the potential to confuse some. Isn’t React already a framework for JavaScript in itself? Where does it end, right?

Well, Next takes all the good parts of React and makes it even easier to get an app running. It does this thanks to multiple built-in configurations—automatic code splitting, file-system routing, server-side rendering, static files exporting, and styling solutions.

Trust me when I say that you can build a LOT of different things with Next.js:

• Static websites—we’ve listed it as one of the top 5 SSGs for 2019.
• Progressive Web Apps (PWAs)
• Server-rendered applications
• SEO-friendly websites—as we’ve demonstrated here.
• Mobile apps

It was built by Zeit back in 2016 and has quickly gained traction to the point of becoming one of the most popular tools of its kind. I mean, it’s used by Marvel, Netflix, Uber, Nike… and the list goes on.

Okay, this is all great, and I’m genuinely excited to play with Next here. But is it any good for e-commerce?

Next.js & e-commerce: a good fit?

Like any static site generator or JS framework out there, one of its most significant advantages (vs more traditional e-commerce platforms) is the freedom it gives to developers to create a kickass shopping UX.

The power of the JAMstack right here!

We’ve covered the general React e-commerce ecosystem and its benefits in an earlier post. I would strongly suggest reading it to further understand why it’s a great fit.

But on the probable chance that you’re pressed for time, here’s a TL;DR:

→ The use of components for flexibility.

Component-based development enables easy code reuse through your app, but also the writing of small features. Or, in our case, small e-commerce functionalities. This comes in handy once you start scaling and expanding your shopping cart integration.

→ Virtual DOM for performance.

React’s virtual DOM provides a more efficient way of updating the view in a web application. Performance is HUGE in e-commerce; every milli-seconds count.

Speed = Better UX & SEO = $$$.

→ Popularity & vast community for peace of mind.

Any issue has probably been documented already, so you’re likely to find a solution to any potential pitfalls in your way.

Next.js features like server-side rendering and static exporting push these React benefits even further by guaranteeing that your website/app will be SEO-friendly. This is something vital to any e-commerce business.

Still need social proof? Here are some Next e-commerce site examples.

Technical tutorial: a Next.js e-commerce SPA

Okay, time to jump into code and create our own handcrafted Next.js e-commerce app, with the help of Snipcart. Bear with me; this is going to be fun!

Pre-requisites

• Basic understanding of single-page applications (SPAs)
• A Snipcart account (forever free in Test mode)

Basic knowledge of React & TypeScript might also help you here, but not mandatory to follow along.

1. Setting up the development environment

Before getting started, you’ll need to create a directory for your project and initialize it as a npm repository with the following command:

npm init -y

Once this is done, you’ll need to install the dependencies for your project. In this tutorial, I’ll use TypeScript and Sass.

Therefore, on top of the regular Next.js dependencies, you’ll need to install all the typings as well as @zeit/next-typescript, @zeit/next-sass and node-sass.

To do so, simply run this npm command:

npm install --save react @types/react react-dom @types/react-dom next @types/next @zeit/next-typescript @zeit/next-sass node-sass

You’ll also need to make a few configuration changes. Create a file at the root of your project named next.config.js with the following code:

const withTypescript = require('@zeit/next-typescript')
const withSass = require('@zeit/next-sass')
module.exports = withTypescript(withSass());

This will indicate to Next.js that you want to use TypeScript and Sass in the project. You’ll also need to create a file named .babelrc.js in the same place with the following code:

module.exports = {
  presets: ['next/babel', '@zeit/next-typescript/babel']
}

Furthermore, in your package.json file add the following scripts:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

By adding these scripts, you’ll be able to serve your application locally with the npm run dev command. Don’t panic if it doesn’t work at this stage, as your application is not ready yet.

#next #react #javascript #developer