In this course, Colby is going to do a deep dive into creating a full store for your products. You'll learn how to set up and use GraphCMS as your content management system. You'll learn about the Cloudinary UI extension and how to use it to host your images. You'll learn about Snipcart and using the useSnipcart hook to handle the cart state and the checkout. You'll learn how to implement Stripe as your payment gateway. And lastly, you'll learn how to deploy a Next js app to vercel from github with environment variables.

Hello and welcome to my course Create an eCommerce Store with Next.js and Stripe Checkout! Watch the video for a sneak peek into what we will be going over. I hope you enjoy it. 

Introduction to Create an eCommerce Store with Next.js and Stripe Checkout

To start off this project, clone the [Space Jelly Gear Starter](https://github.com/colbyfayock/space-jelly-gear-starter) github and start the server. We will then take a peek into the file structure. For importing different files, I use [Absolute Imports and Module path aliases - nextjs.org](https://nextjs.org/docs/advanced-features/module-path-aliases) which simplify how I import files. 

Create a New Next.js App for an Online Store

To manage my product data, I'm going to use [graphCMS](https://graphcms.com/) which is a content management system that's going to give us a content API backed by GraphQL. You'll need to login, or register an account, with just the free version for this course. I will also run you through the initial setup for graphCMS. 

Set up GraphCMS to Manage Data with a GraphQL API

Use GraphCMS Schema Models to Manage Page Content

We are going to start visualizing what our data looks like by using graphcms' Playground. Here we can query our data and explore our content API right from the dashboard. 

We are going to use Next.js getStaticProps to query our data at compile time so we don't have to make the browser wait for that request when it's getting loaded. 

To actually make our query, we are going to be using [Apollo Client](https://www.apollographql.com/docs/react/).

Query the GraphCMS GraphQL API with Apollo GraphQL

We want to set up a schema for the most important part of our store, our products. We set up all the fields that we'll need, including the name, the image, and the price.

We also set up the description, which we'll use later when we're setting up individual product pages. Then we will see how we can easily construct and query for our data inside of GraphCMS and append that products query to the end of our existing query.

There, we will pass along that data, just like our existing home page data to our app, where we dynamically render our first four products inside of GraphCMS.

Manage Product Details with a Custom GraphCMS Schema Model

🚨The Cloudinary UIX has been deprecated. If you are using it, you need to replace it with the App. [Here](https://hygraph.com/docs/guides/integrations/connect-cloudinary#migration) is a step-by-step guide on how to do it. 🚨

We will take an existing UI extension, Cloudinary, clone it down, and create our own instance, installing it into our GraphCMS content editor. Once we add that Cloudinary asset as a field, we will select those images directly from our Cloudinary account and serve those images right inside of our app.

Add and Configure Cloudinary UI Extension to Add Images From a Cloudinary Media Library

We are going to take a query and use it to create a dynamic query out of it with variables. In doing that, we are going to make use of the getStaticPaths function to create a path for every single one of our products.

Then, we'll use getStaticProps to query for each and every one of those dynamically using the variables object, where just like any other page, we will grab that data as a prop to our product page function, where we will fill in our page and have our dynamic route.

Set up Individual Product Pages with Next.js Dynamic Routes

🚨 Snipcart updated how the script is loaded. Here are the [installation docs](https://docs.snipcart.com/v3/setup/installation) for more information. 

I've also update the [code in github](https://github.com/colbyfayock/my-space-jelly-gear/commit/24f29dfe8624b8ef1d71268f52a682df4db60e49) to work with Snipcart's latest version.

---

We want to make sure that when we add something to the cart, we're going to be able to actually add it to our cart. I'm going to be using [Snipcart](https://spacejelly.dev/snipcart) to handle my cart and checkout flow. 

We will also our cart update inside of our header with that dynamic value. To do that, we will sign up and install Snipcart where we add the installation to a custom document file and add our class name and data attributes to all of our Add to Cart buttons.

Lastly, we will install the useSnipcart hook so that we can grab that context to show that subtotal anywhere inside of our application.


Add a Shopping Cart and Checkout Funnel with Snipcart

While we have a lot of options for the different payment gateways that we can use in order to take payments, we're going to use [Stripe](https://stripe.com/), which is a well-known secure payment processing platform, where it's going to be able to easily integrate into our Snipcart account.

Once we add our Stripe account, we will head over to the Snipcart dashboard where we will connect Stripe as our payment gateway, which simply allows us to go through an authentication process, where we will have Stripe configured.


Use Stripe as a Payment Gateway in Snipcart

We are going to create a schema as we did in lesson 2, but this one is going to be for our Categories at the bottom of the home page. This will be slightly different because we are going to add a Reference field. This way we can create a reference between our categories and our products. 

Then over in the content tab, we will add our existing products to an Apparel category, an Accessory category, and a Featured category. 

Create a Product Category Graphcms Schema to Manage Product Groupings

We will create a new category model where we can reference all of the products that we want in a two-way reference. That means, not only can we reference those products on our category, like we worked on in the previous lesson, we can go the opposite direction on our products node. We will reference those categories and get all the categories that relate to a particular product. 

With that data, we will set up a dynamic route for category slug, where we use both getStaticProps and getStaticPaths to build each and every one of those pages, where we will dynamically generate each category page with all the products.


Dynamically Add Category Landing Pages with Next.js Dynamic Routes

If our store supports physical locations, we want to give our customers the opportunity to easily find out those locations so they can visit us in person. That means, we need to show them somewhere on our site.

We can take advantage of GraphCMS custom Schema Models to create a new document for each store.

We'll walk through setting up a new model for our stores and how we can query them in our app to list out all of our locations.

List Store Locations on a Page Using a Store GraphCMS Schema and Data

Displaying a list of physical locations is helpful, but showing them on a map, giving your potential customers the ability to see how close each store really is to their location is even better.

GraphCMS supports adding coordinates as a field to our data models, where we can dynamically pull those coordinates in and add them to a map.

We'll walk through how we can loop through our store locations and add each one to a new React Leaflet map. We'll also learn about some pitfalls of using React Leaflet in an app framework like Next.js and how we can solve it with dynamic imports and manual image imports.

* [Dynamic Import - nextjs.org](https://nextjs.org/docs/advanced-features/dynamic-import)
* [Leaflet Map Marker Rendering - github.com](https://github.com/Leaflet/Leaflet/issues/4968)

I also have a whole course on how to [Build Maps using React Leaflet](https://egghead.io/courses/build-maps-with-react-leaflet) if you want a further dive on the topic. 

Add All Store Locations to a React Leaflet Map with Location Data From GraphCMS

When trying to show store locations on a map, showing the entire world by default when you only have a few locations to show means more work for your customer, trying to narrow down and finding where they actually are. Instead, a better UX could be zooming into a specific portion of that map, centering it in the middle of all of your locations.

To do this, we can use geospatial analysis tools like Turf.js which allows us to provide a set of coordinates and calculate where that center is.

We'll walk through setting up Turf.js in a Next.js app and using it to calculate the center of all of our online stores. In order to allow someone to select the store and automatically zoom in, we'll also use the useEffect hook along with our React Leaflet map to change the view whenever someone clicks on a store.

* [turfjs.org](https://turfjs.org/)

Manage Map Effects & Dynamically Calculate a Map's Center with Turf

Delivering a website in your native language knowing that Google or other tools will automatically translate gives a little peace of mind, but between contextual differences in languages and not always getting comprehensive translations, you might not know what you're actually telling your potential customers.

Next.js supports localization out of the box, allowing us to configure exactly what languages we want and using that context to pull in the translations we need.

We'll walk through setting up localization in our Next.js app and adding Spanish translations to our page copy in GraphCMS along with dynamically querying for each language in our pages.

* [Internationalized Routing - nextjs.org](https://nextjs.org/docs/advanced-features/i18n-routing)
* [Localization - graphcms.com](https://graphcms.com/docs/api-reference/content-api/localization)

Support Multiple Languages with Next.js Localization

Media is an important part in creating a good UX for potential customers of your store, but when serving large unoptimized images, you can end up giving them a poor experience with long page loads.

We can instead use Cloudinary to automatically optimize our images and resize them on the fly with Cloudinary's programmable media API to deliver a more performant online store.

* [Cloudinary URL-Gen for JS - cloudinary.com](https://cloudinary.com/documentation/sdks/js/url-gen/index.html)

Optimize Media with Cloudinary to Deliver Smaller and Performant Images

Building apps take time and when we get to deployment, we don't want to be slowed down by manual builds and complicated infrastructure.

Vercel makes deploying modern web apps easy by handling all the steps including pulling in the latest changes on your Git repository, building it up, and deploying it out to the world.

We'll walk through importing a Next.js project to Vercel using an existing GitHub repository and configure it to deploy to Vercel. In order to allow us to configure our Snipcart API key per environment, we'll set up environment variables in our Vercel deploy to store our API key.

Ecommerce Product Management & Storefront with GraphCMS, Snipcart, & Next.js

Instructor

Course content (18 lessons)

Instructor