Chapter 13: Building an E-Commerce Website with Next.js and GraphCMS

During our journey exploring Next.js, we've learned a lot. We've explored different rendering methodologies, styling techniques, integrations, and even deployment strategies.

Now it's time to start creating something worth going to production, taking advantage of everything we have learned so far.

In this chapter, we will see how to adopt Next.js to build e-commerce storefronts from scratch.

We will look at the following in detail:

• What GraphCMS is and how to adopt it
• How to integrate payment methods such as Stripe
• How to deploy an e-commerce website

By the end of this chapter, you will be able to describe a Next.js e-commerce architecture, find the right SEO and performance tradeoff, and deploy your Next.js instance on the right cloud platform.

Technical requirements

To run the code examples in this chapter, you need to have both Node.js and npm installed on your local machine.

If you prefer, you can use an online IDE, such as https://repl.it or https://codesandbox.io; they both support Next.js and you don't need to install any dependency on your computer. As with the other chapters, you can find the code base for this chapter on GitHub: https://github.com/PacktPublishing/Real-World-Next.js.

Creating e-commerce websites for the modern web

Since the internet started to spread at the end of the 90s, it opened a world of possibilities for online businesses. As a result, many companies began to develop software-as-a-service (SaaS) products to help people build their own online shopping platforms.

Today, there are several significant players in this area: Shopify, Big Cartel, WordPress (using WooCommerce or other plugins), and Magento, just to name a few.

There are also companies, such as PayPal and Stripe, that make it incredibly easy to integrate payment methods on any platform, paving the ground for custom e-commerce creation, where our imagination is the only limit.

When talking about "limits" in e-commerce creation, I'm referring to the fact that certain SaaS platforms can make it hard for us developers to customize the UI, payment flow, and so on.

Shopify, as an example, solved this problem by creating a new server-side-rendered React.js framework...

Setting up GraphCMS

There are many different competitors in the e-commerce world; all of them offer a great set of functionalities for building modern and performant solutions, but there's always a kind of tradeoff when it comes to analyzing back-office features, frontend customization capabilities, APIs, integrations, and so on.

In this chapter, we will be using GraphCMS for a simple reason: it's easy to integrate, offers a generous free plan, and requires no setup for complex release pipelines, databases, or whatever. We just need to open an account and take advantage of the massive set of free features to build a fully working e-commerce website.

It also provides an e-commerce starter template with pre-built (yet fully customizable) contents, which translates to a pre-built GraphQL schema ready to consume on the frontend to create product pages, catalogs, and so on.

We can start by creating a new GraphCMS account by going to https://graphcms.com. Once we log into...

Creating the storefront, cart, and product detail pages

GraphCMS offers a well-made, rock-solid, open source template for creating e-commerce websites, which can be found at this URL: https://github.com/GraphCMS/graphcms-commerce-starter.

We're not adopting this starter template because we want to fully understand the reasoning behind certain technical decisions and how to approach the problems that can appear during the development phase.

That said, we can focus on developing the first essential components for our storefront.

We will wrap our entire application in a Chakra UI box so that every page will have a similar layout. We can do that by opening the _app.js file and adding the following components:

import { Box, Flex, ChakraProvider } from '@chakra-ui/react';
function MyApp({ Component, pageProps }) {
  return (
<ChakraProvider>
  <Flex w="full" minH="100vh" bgColor="gray.100">
  ...

Processing payments using Stripe

Stripe is one of the best financial services out there; it's straightforward to use and offers excellent documentation to understand how to integrate their APIs.

Before continuing with this section, make sure to open an account at https://stripe.com.

Once we have an account, we can log in and go to https://dashboard.stripe.com/apikeys, where we'll retrieve the following information: the publishable key and secret key. We will need to store them inside of two environment variables, following this naming convention:

NEXT_PUBLIC_STRIPE_SHARABLE_KEY=
STRIPE_SECRET_KEY=

Please double-check that you're not exposing the STRIPE_SECRET_KEY variable and that the .env.local file is not added to the Git history by including it in the .gitignore file.

Now let's install the Stripe JavaScript SDK inside of our project:

yarn add @stripe/stripe-js stripe

Once the two packages are installed, we can create a new file under lib...

Summary

In the previous sections, we saw how to create a straightforward e-commerce website using GraphCMS and Stripe, two incredible products that can help build scalable, secure, and maintainable storefronts.

Even though we've made some significant progress during this chapter, we're still missing some features that would deserve an entire book on them exclusively.

For example, if we now want to navigate back from the Stripe checkout to the cart page, we will see that our shopping cart is empty, as the cart context is not persistent. And what if we want to allow our users to create an account and see the shipping progress, order history, and other helpful information?

As you can imagine, these are complex topics, and there's no way we can manage them in one chapter exclusively. One thing's for sure: once we know how to handle users and authentication via Auth0, product inventory and order history on GraphCMS, and checkout on Stripe, we have all the elements...