snipcart

Next.js is a minimalistic framework for server-rendered React applications.

graphcms

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the mapping features most developers ever need.

leaflet

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. 

egghead

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.

cloudinary

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.


stripe

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/)

turfjs

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.

Deploy a Next.js App to Vercel From GitHub with Environment  Variables

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

https://app.egghead.io/api/v1/lessons/egghead-introduction-to-create-an-ecommerce-store-with-next-js-and-stripe-checkout/subtitles

Colby Fayock: [0:00] Hey, team. Welcome to my course, "Ecommerce Product Management and Storefront with GraphCMS, Snipcart, and Next.js." There's so much to learn from this course. Let's take a sneak peek of what you're going to learn.

[0:10] We're going to use GraphCMS to create a custom GraphQL API using custom schema models to manage page content as well as all the product details and categories for our product catalog. We're going to use Snipcart to add a shopping cart and full checkout funnel to our application using Stripe as a payment gateway.

[0:29] We're going to use Cloudinary to manage our media and optimize it to deliver as performant of an application as we can. We're going to even learn how to add a custom map with Leaflet so that we can add all of our store locations on a map for people to interact with.

[0:42] This is all going to happen inside of Next.js deployed to Vercel, where we're going to have a ton of capabilities, like dynamic routes and localization, so that we can deliver as best of an experience as we can. I'm super excited for you to dig in. I'm going to stop talking, and let's just dive right in.

https://app.egghead.io/api/v1/lessons/egghead-introduction-to-create-an-ecommerce-store-with-next-js-and-stripe-checkout/transcript

https://app.egghead.io/api/v1/lessons/next-js-create-a-new-next-js-app-for-an-online-store/subtitles

Colby Fayock: [0:00] Getting started, we're going to kick things off with this Next.js starter that I created that's going to give us a basic UI with some products and just some page elements that's going to give us a great starting place to jump into this application.

[0:12] You can find this repo over on my GitHub, or you can navigate to spacejelly.dev/gearstarter, or you can find the link right in the description. In order to spin up this application, I'm going to scroll down where I'm going to find this Quick Start section, where I can either use yarn or npx, depending on my preference.

[0:28] I'm going to use yarn for this walkthrough, and I'm going to go ahead and copy that command for yarn create next-app, and in my terminal, I'm going to go ahead and paste that command. At the end, I'm also going to tack on my space-jelly-gear.

[0:42] What that's going to do is it's going to create a new Next.js project in that local directory using my starter, where it's going to first clone down that project, it's going to install all the dependencies, and it's also going to reset Git history so we have a great starting point.

[0:57] Once it's done, we can navigate into my space-jelly-gear. We can run yarn dev or npm run dev, depending on what you're using. We can open up this localhost:3000, which is the default server. Once the page is finished loading, we can see that we have that same Next.js application, only we have it being served locally.

[1:15] For this lesson, our goal was only to spin up this first application, but let's take a quick look inside to see what we're dealing with.

[1:21] If this is your first time using Next.js, you might see a few folders in here that you don't recognize such as this .Next.js, which is going to be Next.js's way of maintaining and keeping track of this project. We'll also have our Node modules, which is a typical npm system to manage packages. We'll also have a public directory where we can host any files or assets that we want to be served statically.

[1:45] Then we have our src, which is going to include all the application logic for our app. Before we actually dive into the src though, we have a few other things including our lint file, which is just the default Next.js linting rules.

[1:56] We also have a .gitignore. We have a jsconfig.json, which is one thing I do want to point out, where we have these paths that are getting mapped including the components folder, a data folder, hooks, etc., etc. What this is going to do is allow us to use these particular strings in order to pull in modules, but from these directories, when we're working inside of our application.

[2:19] While using this pattern is definitely not a critical or required part of this walkthrough, it's just a nice way to standardize how we're importing components and other parts of our application. Finally, we have our next.config.js, which is just the default that comes out of the box with Next.js.

[2:37] Digging into the src directory, we already have a few components in here, including a Button, a Container, a Footer, Header, and a Layout, which is going to give us the basic page layout that we're going to be using.

[2:48] We also have a data folder where we have a list of a bunch of products just so that we can have some product data filled in already to get us started.

[2:56] We also have our pages and our styles, where the styles are currently using SCSS or SASS, in order to make up the page styles where inside of our index.js is going to be our home page.

[3:08] Inside of our home page, we can already see that pattern that we were talking about inside of our jsconfig.json file, where we're able to use the @ symbol and that directory that we choose in order to easily access those different components, and the data, and the styles within our components.

[3:23] Looking at the code inside here, we'll notice that the code inside of the home component, or our home page isn't anything that special. We're just rendering out some content and our products so that we have something to start off and work with.

[3:37] Most importantly, we're able to access that local product data where we can see here, we're just grabbing four for our featured section, but we'll see throughout this course how we can pull in this data programmatically and dynamically using GraphCMS to manage that data.

[3:52] On top of that, we'll also learn how we can wire up this ADD TO CART button so that we can give our visitors or potential customers a way to add these items to their cart, and eventually check out and buy our products.

[4:04] Now we have the basic starting point for our application, and we're ready to dig in.

https://app.egghead.io/api/v1/lessons/next-js-create-a-new-next-js-app-for-an-online-store/transcript

https://app.egghead.io/api/v1/lessons/graphcms-set-up-graphcms-to-manage-data-with-a-graphql-api/subtitles

Instructor: [0:00] In order to manage our product data, we're going to use GraphCMS, which is a content management system that's going to give us a content API backed by GraphQL. Once all of that product data is inside GraphCMS, we'll be able to easily query it with GraphQL, where we'll also be able to have complete access to all that structured data.

[0:17] That way, whether it's us or our team members who want to manage that product data, we're going to have an easy way to do that. In later lessons, we'll also learn how we can add localization in GraphCMS, as well as use UI extensions, particularly with Cloudinary, so that we can easily add our assets right into the CMS.

[0:35] In order to get started with GraphCMS, we'll want to start off with a free account. We can go ahead and click Get Started. Once we're on the signup page, we'll want to enter in an email address, a password, and our name. Or alternatively, you can use Facebook, GitHub, or Google to connect your account. Then we'll want to click Agree and we'll want to click Continue.

[0:54] At this point, GraphCMS might ask you to click on a link inside of your email, just to make sure that it can verify that email is legit. Once that link returns you to the login page, we'll want to go ahead and log in with our new account. Now we're ready to create a new project.

[1:07] I'm going to go ahead and click Blank because we're going to start from scratch. Then we want to enter in our project name, which mine's going to be Space Jelly Gear. Optionally, you can enter in a project description.

[1:18] Then we want to select the region where we're going to host our data. Typically, you want to select a region that's close to the place that's requesting that data, but the data is going to be available globally anyway. It probably doesn't matter too much especially for this walkthrough.

[1:33] I'm in US East, so I'm just going to go ahead and click US East. I'm going to go ahead and select Create Project. Once you hit the plans page, we're going to use the free forever plan.

[1:42] We're going to go ahead and scroll down and select that free plan. Now you're given the ability to invite your team members. If you have members for your team for this project, you can go ahead and add them all now and select the role for each of those members.

[1:55] Otherwise, if you don't have any other team members for this particular project like me, I'm going to go ahead and click Invite Later. Now we successfully landed in our new GraphCMS project, where we can get started building our data.

[2:07] Before we dig into that data, we want to do one more thing and that's make our API accessible. Currently, the way that the default project is set up is that all the data is locked down so you can't make API requests.

[2:21] We want to make sure that all of our data that we create is readable when everything is published. That way we can access it inside of our application. To navigate there, you can either select this make your API accessible option right in the dashboard or to get there manually, such as if you want to go there in the future, we want to select the cog in this sidebar or project settings.

[2:41] In the setting's sidebar, we can navigate down to Access and Select API Access. Then we can scroll down until we get to public content API, where we can see that we can create a permission or GraphCMS gives us the ability to initialize the defaults.

[2:57] What it will do is it will give us the ability to read all of our models on published for all locales, which is exactly what we want to do. I'm going to go ahead and click Yes, initialize defaults. Where now we can see that GraphCMS created that permission exactly how we wanted it.

[3:13] Now we have our GraphCMS project. We have our API accessible, and we're ready to start building out our data.

https://app.egghead.io/api/v1/lessons/graphcms-set-up-graphcms-to-manage-data-with-a-graphql-api/transcript

https://app.egghead.io/api/v1/lessons/graphcms-use-graphcms-schema-models-to-manage-page-content/subtitles

Instructor: [0:00] When building out our data inside of GraphCMS, we have two important concepts. First of all, we have our schema, which is going to define what our data looks like. Then we have our content, which is going to be the actual data.

[0:13] The first content that we're actually going to build out is the home page content. Here, we can see we have a banner where we're using this Prepare for Liftoff. We even have a graphic in the background.

[0:24] We want to actually define this data so that we can manage it inside a GraphCMS. Trying to think of this data abstractly, we have our home page which represents a page.

[0:35] We're going to define our schema as a page where that page has different attributes, including what might be a headline and a sub-headline, where our home page is going to be an instance of that page. The first thing we're going to do is actually create that schema.

[0:50] You can either click Setup Your Schema from the project home page, or you can go to the schema section in the sidebar. Then I'm going to go ahead and click Create Model. When creating our model, we want to give that model a name. As we mentioned, it's going to be page for this particular schema. I'm going to call it Page, as our display name.

[1:11] We can see that the other fields actually get filled in by default for us, so that we don't actually have to manage that ourselves. Our API ID is going to be page and the plural version of that is going to be pages. I'm good with this and I'm going to go ahead and click Create Model.

[1:26] Once our page model is created, we can see that we're dropped into our schema editor. Now we have the ability to add whatever fields we want that's going to represent the data of our particular page.

[1:37] First things first, each and every one of our pages is going to have a name associated with that page. For instance, our home page is going to be called, well, home page. We want to add a name field for that particular page field.

[1:50] I'm going to go ahead and click this single-line text, which is going to give me the new options for creating this field. I want to call this field Name, where we can see that it's, again, going to fill in the API ID. We can optionally add a description.

[2:04] Then we can see we have a few field options. Particularly, I want to select Use as Title Field, where we can use that in the future for our queering. Once we select that Use as Title Field, I'm going to go ahead and click Create.

[2:18] We can now see in our schema editor that we have that name field. Really the main thing that we want to actually define on this page is this banner that has the text inside. We're going to call this our hero section, where we have a few things associated with this.

[2:32] We have our title. We have some text associated with that. We have our background images. Then finally, we want to be able to add a link, so that somebody can actually click this and go to whatever it is that we're trying to advertise at the top of our home page.

[2:47] A quick note. If you're wondering how we're going to manage these products, we'll see in the future lesson where we can manage this by category. Back in my schema editor, I'm going to go ahead and select single-line text again. This time I'm going to call it Hero Title. Where we can see again, it's filling in that programmatically, but we don't want to change any of these values for now.

[3:07] I'm going to go ahead and click Create. Now that we have our title, we also have this text field where we don't want this to be just a single line of text, we want the ability to add as much text as we want. We want to be able to fit it within the design, but we want to make sure that we have the ability to be flexible with the content that we add.

[3:26] This time, instead of single-line text, we're going to add multi-line text, which it's going to be pretty similar to what we did with the single-line text. I'm going to go ahead and call this Hero Text. We can scroll down, see the typical fields as normal and we'll go ahead and click Create.

[3:42] Now for the link that's going to be associated with that hero, we can go ahead and click single-line text and I'm going to call it Hero Link and go ahead and click Create. Now we want to create a field that's going to allow us to upload an image that we can use for this background.

[3:57] Then in the Add Field section, I'm going to scroll all the way close to the bottom where I'm going to find the asset picker field, where I'm going to call this My Hero Background. We can see we have some of the similar options to our other fields, but this time, we have the ability to allow multiple assets.

[4:12] Where in our case, since we're only adding a single hero background image for this particular module, we do not want to allow multiple assets. We're going to allow it to be a single asset. We're good with the rest of the defaults here, and we're going to go ahead and click Create.

[4:28] Finally, we have all these different field that's going to represent the data on our page, but we have one more that we want to add. That's going to be the slug which is going to be an ID that we can query with. We can see at the top of add fields that we have a field called slug.

[4:43] Let's go ahead and select that. We're going to also name it Slug. If we scroll down, we can see that we have some different options. Where first of all lower case is checked as we want to make sure that all of these IDs are lowercase, so that it's very consistent for when we query these.

[4:59] Plus, it's general best practice that because we're going to use this in our URL, that the URL is all lower case. Also, what we can do is generate this slug from a template. You can certainly manually add this if you'd like to, but this is an easy way to generate these.

[5:17] I'm going to go ahead and select Generate and we can see that we have a few available fields that we can use. We're going to go ahead and use the name which is going to be the name that we give to each of our different pages, such as the home page.

[5:30] I'm going to add a bracket. I'm going to add name. We can see that it even gave us the autofill. That's going to be our slug template. We're going to leave the rest of the fields as it is and go ahead and click Create. Now we have all the data fields we need.

[5:44] We can get started creating our home page. We're going to navigate over to the content section right in the sidebar, where we can see that we have our different views, where since we only have our page model so far, that's all we see.

[5:56] Inside of page, we're going to go ahead and click Create Item. Where now, we can see all those different fields that we created. To start off, we want to add our name as home, or home page, which ever you prefer. We can see our hero titles prepare for liftoff.

[6:11] Our text is apparel that's out of this world. I went ahead and added those two values in the other fields. For our link, we don't have the correct link for this apparel category yet. We're going to go ahead and put / which is going to be the home page.

[6:26] For our hero background, to make it easy to follow along, I included an image right inside of the starter project where you can select it to upload to your particular page. Once we go ahead and click add existing hero background, we can see that we're going to select an asset.

[6:42] Since we haven't uploaded any assets to GraphCMS yet, we do need to upload one. I'm going to go ahead and click upload, which is going to give us a few options for how we add this image. Where I'm going to grab it from my desktop.

[6:56] I'm going to go ahead and click select files, where I know this is going to be a little small and hard to see. We can see inside of the public directory, we have our images directory. Inside of there, I have the file called Space Jelly Gear Banner, which is exactly the image that we want to select. We're going to upload to GraphCMS.

[7:15] One thing to note is, we can see that it was uploaded as a draft. Before it's made available, we'll have to publish that. Before we do that, we can finish off our actual page by clicking regenerate for our slug, which we can see once we click that, it's going to grab our home page.

[7:31] Because there's nothing special going on with it except for that capital letter in the beginning, we can see that it's basically the same thing except for a lowercase h. Now, we have all of our home page content filled out.

[7:44] I'm going to go ahead and click Save and Publish, where we can see now that because we don't have that background published, GraphCMS is giving us the ability to publish it as part of the page publishing. I'm going to go ahead and select that asset, and I'm going to click Save and Publish.

[8:01] Our home page is published and it's going to be queryable, which we'll see in the next lesson. Before we move ahead, let's see where we can visit all of those different assets that we'll upload through this time. Where if we see in the sidebar, we have this little paper clip, where if we click Assets, we can see that we do have our single asset so far.

[8:19] Where we can even click edit and we can see more information about this asset, where this is the banner that we uploaded. It's going to give us a way that we can navigate, delete, update and manage our assets that we're going to be uploading to GraphCMS as part of this course.

[8:36] We have our home page data managed inside of GraphCMS. In the next lesson, we'll learn how to query this data and replace the static content inside of our code with this data that we'll query.

https://app.egghead.io/api/v1/lessons/graphcms-use-graphcms-schema-models-to-manage-page-content/transcript

https://app.egghead.io/api/v1/lessons/apollo-query-the-graphcms-graphql-api-with-apollo-graphql/subtitles

Instructor: [0:00] Now that we have some data saved and loaded into GraphCMS, we're ready to actually start querying our data. If you're still starting from the top, you can click this explore your content API right from the dashboard.

[0:11] Or if you navigate over inside of the sidebar to this play button, we're going to go ahead and click that and go to the API playground. This playground is going to give us the ability to explore our data in real-time.

[0:22] Additionally, allows us to actually save queries that we can later query in the future. To start, let's actually start visualizing what our data looks like.

[0:29] Let's head over to the explorer tab where we can see we have a list of all the different data that we currently have available inside of our content API. In particular, the first thing that we created was our home page, which is a type of page.

[0:43] We can see here in the sidebar, we have both the page singular and the pages plural, where we can actually start exploring that data. To start, let's open up the pages node, where if we start to look inside, we see that we have some options.

[0:55] We can also start to see all those fields that we created earlier, such as a hero link, the hero text, hero title. We have the ID, which is going to be associated with this actual page node. We also have the name which we added and the slug.

[1:08] Let's actually try to run this query to see what this looks like. What we can do is head over to this big blue or purplish play button. We can execute the query by clicking that.

[1:19] We can see immediately we get the results of what that query is actually going to give us right in the side where we see our home page with all the different details that we added in before available to us through that query.

[1:31] As we'll see later when we're actually creating new pages, we can notice that this is an array of pages. This is going to give us a list of all the pages that are available to us. Instead, when we are starting to work on the home page, we only want to query the data for that one singular page.

[1:47] If we actually start to go back and close this page's node, I'm going to open up the page node where we can see that we have this ability to query where a particular value is going to be set. We want to say where the slug is equal to home, which is the slug that we gave that page node.

[2:04] If we actually click play, we can see that it's automatically going to add the ID, but we see that we get that successful query. We can also start adding in all those other fields that we had before, such as the hero link, text, title. We can see the name and the slug again.

[2:19] If we click play, we have all that data still readily available. Most of these fields, depending on how you actually create the field, is going to just be a singular check box that you can add in and get your response.

[2:31] If we look at the hero background, for instance, if we open it up, we can see that we have a lot of values that are associated with that background. When we set up the hero background, we set it up as an asset.

[2:41] What that's going to do is whenever we upload that asset, we're actually creating an association with a lot of other properties with that particular asset that we uploaded.

[2:50] We can see that we have a lot of things here. Some of the things that we want to grab are the height, we want to grab the width, and we want to grab the URL of that particular asset. If we click play, we can see that it expanded that hero background with those values and we have the width in the URL.

[3:07] It looks like I didn't get the height in there. We can see that we get all those values are readily available for us. We can even see that if I take this URL and open it up inside of a new tab, we can see that beautiful banner that we uploaded earlier.

[3:20] We can see we have all of the data that we need in order to start dynamically creating that home page. Let's dive into the application and see how we can grab this data and inject it into our Next.js application.

[3:32] To start off back inside of index.js, which is our home page file, we need a way to be able to query for this data. The great thing with Next.js, is we have a couple of options for how we can achieve this. Where we have options like getServerSideProps which is going to allow us to use server-side rendering to get those requests.

[3:49] Or we can use getStaticProps, which is going to be able to do that at compile time, that way we don't have to make the browser wait for that request when it's getting loaded. Let's use getStaticProps, where we can set that up by creating this getStaticProps function, where we're going to export it from our file.

[4:06] Back in our code at the very bottom of our page, we're going to export a new async function called getStaticProps. Where inside, what I'm ultimately going to do is return object with an object that has a key of props, where those props are going to be the data that we collect and pass into our application.

[4:23] That data is going to be what we request from GraphCMS. First of all, we need a mechanism to request that data. That's where Apollo Client comes in.

[4:32] If we head over to the Apollo Client docs, we can see the first thing we're going to need to do is install the Apollo Client dependency. Where along with that, we want to install GraphQL which is going to help us construct the query that we send with Apollo.

[4:46] We can use either Yarn or NPM. Since I'm using Yarn, I'm going to copy the package names. Then in my project, I'm going to run Yarn add, and I'm going to paste those packages names where it's going to go off and install those packages to our project.

[4:59] At this point, we can start back up our development server. Next, we want to initialize our Apollo Client. We can see here that the first thing they give us is this import statement, where we have a few things, we want to import, including the Apollo Client itself and memory cache, which is a caching mechanism for those requests.

[5:14] ApolloProvider and useQuery which gives some more React-based features that we're not going to use for this walkthrough. GQL, which is what we're going to use as the GraphQL instance to construct our query.

[5:26] We're going to go ahead and copy this entire command. Then I'm going to go ahead and paste it in. As I mentioned before, we're not going to use the ApolloProvider or useQuery. I'm going to go ahead and get rid of those for now.

[5:36] Now, we can see that we can create an instance of this client. Once we have that client available, we can start to construct our query, which we can create using that query we've made inside of the API playground.

[5:48] The first thing I'm going to do is, I'm going to copy the same client instance. In my code, I'm going to head over to getStaticProps where I'm going to paste that right in.

[5:57] We notice that we have a URL here, that's not our URL. We want to grab our API endpoint for GraphCMS. If we head back over to GraphCMS, we can find that by going to the project settings.

[6:08] We're underneath the API access, we see all of our endpoints, including the content API, which I'm going to go ahead and copy and paste right inside of my application to replace that link. Then we want to make that query, where we can see the syntax of that is going to be client.query.

[6:24] With that query method, where we're going to pass in the options object including the query property, but we're going to pass in that entire query string, along with the GQL tag that's going to wrap that. We notice here that is using a chained .then statement in order to grab the results.

[6:41] We're going to use async/await for this. This will look slightly different, but for the most part it'll be the same. Inside of my code, I'm going to create a new constant called data. I'm going to set that equal to awaitclient.query, where I'm going to pass in a configuration object, including the query property, where I'm going to pass in GQL.

[6:59] Which I'm going to create my template literal tags, which is where I'm going to paste in my query from GraphCMS. Back over to GraphCMS inside of the playground, we can see that we're going to copy this query exactly as it is. I'm going to paste it in as it is.

[7:15] Where the only thing I'm going to do is fix the indentation and we can even update the actual query name, so that we have a little easier time debugging should we ever need to. Before we move on, let's see if this is working and see if we can look at the data inside here.

[7:30] I'm going to copy that data variable. Before the return props, I'm going to console log out my data constant. If we reload the page and look inside the DevTools, we'll notice that we can't see that. That's because getStaticProps is running inside of the node process.

[7:44] We need to look in the terminal for that. When we look in the terminal, we can see exactly what we're looking to find where we see that data object that we're creating. We're inside, we find the data.page along with all the information that we need in order to create this page.

[8:00] Now, we have this data object that includes all of our data for our page. We probably don't want to pass that in as is, as it's probably more data than we need. I'm going to take this and create a new constant called home is equal to data.data.page, which is going to give us that data inside of our actual query response.

[8:20] I'm going to take that home constant and paste it right in as a prop, where this is going to make it available for us inside of our React component.

[8:28] Now that we have that there defined, I'm going to scroll all the way to the top of the file. We're inside of the actual function declaration for our home page component, I'm going to now create a destructured instance, where I'm going to paste in the prop of home.

[8:42] We can even prove that this works by adding a new console log statement of that home value. Once we reload the page, we can see that we are indeed logging out this home object, where if we open up, we can see all the data that we need.

[8:54] Let's start filling in these pieces including replacing all the hero text. I'm going to destructure these values. I'm going to say hero title, hero text, hero link and hero background, which is going to come from our home object.

[9:10] We can scroll down to that hero section, where we can start to replace those values including the hero title. We can also replace the actual hero text. We can replace the link to dynamically grab that value, including the hero link itself. We also can replace this image.

[9:28] Again, because this is an asset, it's going to have more data associated with it. If we expand this, we can see that we have a height, a width, and the URL, which is exactly the things that we're going to add to that image.

[9:40] To start, I'm going to replace this source prop with the actual dynamic value of my herobackground.url. As best practice, we typically want to define a width and height to our image tags. I'm going to create that new width and my new height, and then we can set those equal to our hero background.width and our hero background.height.

[10:04] Once the page reloads, we can see that at this point, nothing has changed. Which is a good thing because we want this to be exactly what we were trying to recreate.

[10:13] To prove this is actually working, how about instead of prepare for liftoff with just a simple period, I want to show more excitement. I'm going to add an exclamation point. I'm going to hit save and publish to actually publish those changes.

[10:25] When we hard refresh our page to make sure that it doesn't include a cached instance, we can see that we now have that exclamation point, meaning we were able to dynamically change these values.

[10:35] That means whether we want to change the title, the text, even the link, once we actually have a category that we can send people to, we're able to update any of these values and it's going to be able to reflect that when we actually pull that new data into our application.

[10:50] In review, once we were able to explore our data and see how we can actually construct a query, we were able to use the Apollo Client along with our API endpoint.

[10:59] Where we were able to actually make that query where we grab the data and passed it as a prop right inside of our application. Then with all of that data available, we were able to replace the actual content so that we had our dynamic hero content.

[11:13] Where any time we make a change inside of our GraphCMS content editor, we can see those changes actually reflect inside of our app.

https://app.egghead.io/api/v1/lessons/apollo-query-the-graphcms-graphql-api-with-apollo-graphql/transcript

https://app.egghead.io/api/v1/lessons/graphcms-manage-product-details-with-a-custom-graphcms-schema-model/subtitles

Instructor: [0:00] We're now dynamically pulling in content into our home page, but we're missing the most important part, our actual products that we want to sell.

[0:07] Just like we created a page schema for our home page content, we're going to create a product schema where we can add all of these products where we can manage them inside of GraphCMS.

[0:18] Now that we're back inside of GraphCMS, we want to head over to our schema section. While inside, we want to actually add a new model. Let's click this add button, where we're going to create a display name. Let's call that product.

[0:30] We can see just like we did with our page schema, it's going to automatically fill in our API IDs, where we have our singular version and our plural version, which looks great. I'm going to go ahead and click create model.

[0:42] Looking at our products, we can see that we have three immediate things that we're going to need. We have our image. We have a title and we have a price.

[0:50] Later, when we create dynamic page routes where each one of these projects will have its own page, we also want to add a description. We're going to add that field as well.

[0:58] Just like we did with the page, the first thing we're going to add is our name. We're going to click single line text. We're going to call this field name, where we can see already the API ID. If we scroll down, just like before, we want to use this as our title field.

[1:12] We're going to go ahead and click create with that value. In addition to the name, we want to add the description, which is going to be used on the actual product pages. We have two options here.

[1:23] Instead of multi-line text, which is just going to be a really plain field for people to use, we can either use markdown or I'm going to use rich text. Which is going to give a rich editor for people to actually use when they're managing that content. I'm going to click rich text.

[1:37] I'm going to call that my description. We can see the API ID, and we can see we do have a few options. I'm going to leave those as is and I'm going to click create. Next, we want to actually add our product image.

[1:49] Like we saw in the past, we're going to use the asset picker again, where we can select that, we can call it image, and we can see the API ID, and we can click create. Arguably, one of the more important things is the actual price of the product.

[2:02] How much are people going to pay for this product? We have a few options, where, of course, we could use single line text if we want. I want to store this value as a number. As far as numbers go, we have two options for that.

[2:14] We have the actual number of field, which is going to be more like a whole number. We can see ID and quantity as examples. We want to use flow, which is going to allow us to use decimal places, which we can even see in the examples as ratings and price.

[2:27] Which is exactly what we want to use it for. Let's click flow, and let's actually call this display name price because of our API ID. Let's click create. Finally, we want to add our slug, which is going to give us that unique identifier for our actual products. It's going to also be used inside of our actual URLs.

[2:46] I'm going to go ahead and click this slug field to add it. I'm going to call it a slug. We can see like we did with the page, we want to generate this slug from a template. I'm going to use the name property. That way, it's going to be a friendly URL that makes sense for the actual name of the product.

[3:02] Then, I'm going to go ahead and click create. Now that we actually have our product schema, let's start adding some products. Navigating over to the content section, I'm going to go ahead and select product view, and then I'm going to click create item.

[3:15] This might be a little bit small and hard to see, but inside of the project directory under public images, I also included all the product images, that way you can follow along with the same products that I'm going to be adding. I also have all the data associated with those products including the name and the price inside of the source data products.json file.

[3:35] You can easily copy and paste those into GraphCMS. To start, I'm going to grab this Cosmo-fitted hat which I have for $30. I'm going to go ahead and paste the name. Then we're going to skip the description for now. Then we can see we can add an existing image.

[3:49] I'm going to go ahead and click add existing image, where right now we only have that one Space Jelly banner as an actual asset. We need to upload all of our other photos in order to make them available as assets. I'm going to click upload again.

[4:02] Then I can either click or drag and drop. I'm going to go ahead and select that Cosmo hat model right at the top, which is going to be our fitted hat. I'm going to go ahead and upload that as an asset and make it available to use inside of my product.

[4:15] Similar to before, it's going to be uploaded as a draft. As soon as I save and publish it, it's going to be published alongside my actual content. Then finally, we want to add the price. We can add that as 30.00 for $30. We can generate our slug, where we can click regenerate. We have our Cosmo-fitted hat.

[4:34] Finally, we have all the data that we need. Again, we'll come back later for the description. Now, we can hit save and publish. Check our image and click save and publish.

[4:44] Before we move onto the other products, we have one way we can make this a little bit easier for uploading our images. Where if we head over to the assets directory, we can upload all these images at once, that way we don't have to keep doing them individually.

[4:57] Over on assets, I'm going to click upload, where I can select my files to upload. I'm going to add all of those different images except for the hat model and banner, since we already uploaded those before.

[5:08] I'm going to click open and GraphCMS is going to allow me to upload all those files and we now have them all available as grouped draft assets.

[5:16] This time when adding my next product, which is going to be this Cosmo trucker hat at $24. When I scroll down to add my existing image, I can see that I already have all those assets that I can choose from. I'm going to scroll down until I find that actual trucker hat, where I can go ahead and click that link where it's going to add it right into my product.

[5:36] Now that everything else is filled out except my description which again we'll do later, I'm going to click save and publish, which is going to also allow me to publish that hat image, and we have our data.

[5:46] When we look inside of the content manager, if we're seeing the list of the products that we have, we don't have easy way to recognize which products are which, when we have this view. If we scroll over to the right enough, we can see that we do have the names and we have the images for them.

[6:01] They're not in the location that's easy for us to see right away. While this is the default view, I can click configure columns or we can see we have the option to configure how we want to arrange, and even what data we want to include.

[6:14] Where I see the name, the description of the image and the price, so I'm going to drag this name all the way to the top along with the image and the price. That way we can even see real time that those are being shifted over for us to easily see.

[6:27] This is going to give us a lot easier of a way to be able to scan through our products and see which is which. At this point, I'm going to skip ahead a little bit and add the rest of my products before we continue on. Once I have all of my product data inside of GraphCMS, we can now start to query that and pull it into our page.

[6:44] Later in this course, we'll learn how to create a featured category which will allow us to more easily edit and add and manage our featured products for the home page. For now, we're going to query all of our products and we're going to pick the first four off of the top, just so that we have a way to display these on the page.

[7:01] Back to our handy API playground, we want to select all those products. I'm going to find that product's field. We can even see that we have the option to grab the first specific amount of product. I'm going to select first, I'm going to enter in four, as we ultimately want the first four products.

[7:17] Then, we can scroll down and we can start to select the fields that we want for each of those products, where I want to get things like my name, my price, my slug, and we even want to grab that image.

[7:27] I'm going to open up that image node where we want to similar to before, we're going to grab the height, we're going to grab the URL, and we're going to grab the width. We can click play and we can see that's exactly what we get. We get those first four products with all of the data that we need for the home page.

[7:44] I'm going to go ahead and grab the products part of that query because since we already have a defined query, we don't need this query definition wrapper. Back to my home page, I'm going to scroll all the way down to my getStaticProps where I already have that page query and simply go to the end and paste in that products query.

[8:02] Just like before, we want to grab that data. I'm going to go ahead and clone that. I'm going to say, I want my products to come from data.data.products. Similar to before, I'm going to pass that right through as my products constant, scroll up to the top, and make that available as a prop.

[8:19] Let's console log that out to see what we're getting. I'm going to console log out my products constant.

[8:24] Once we reload the page, we can see that we broke a few things where these images specifically, because we were using the same products variable when we were importing our local product data, we're using a different property inside of each and every one of those products to define the image.

[8:42] While the similar property name existed for both the local and the GraphCMS data, for both the price and the title, that wasn't the case with the image. We can see inside of our console that we do have that array of products, including that data that we are defining from GraphCMS.

[9:00] Really, the only thing we need to do because we have the name and the price already set, we need to define that image. Instead of my code, if I scroll down until we get to the products. First of all, we know we don't need to slice these products to the first four anymore, since we're defining that inside of the query.

[9:18] We want to make sure that we're defining all the attributes that we need. We're not querying for an ID, we're querying for a slug, so we can update this key to product.slug to make sure that that is appropriately working for React sake. Then we can see that we have the rest of this intact except for the image where we can dynamically set the product image.

[9:39] If we look at the structure of the data, it's going to be product.image.URL along with the height and width. Let's set that. Because we're already using that image property, I can simply say .URL. Then let's programmatically define our width and height.

[9:54] I'm going to say instead of this 500 static value, I'm going to add a dynamic value which is going to be product.image, where product.image.width, and my product.image.height. Once the page reloads, we can see there's no more errors related to our application, and we can see all of the products in all of their glory.

[10:14] In review, we wanted 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.

[10:24] We also set up the description, which we'll use later when we're setting up individual product pages. Then we were able to 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.

[10:38] Where we were able to pass along that data, just like our existing home page data to our app, where we were able to dynamically render our first four products inside of GraphCMS.

https://app.egghead.io/api/v1/lessons/graphcms-manage-product-details-with-a-custom-graphcms-schema-model/transcript

https://app.egghead.io/api/v1/lessons/cloudinary-add-and-configure-cloudinary-ui-extension-to-add-images-from-a-cloudinary-media-library/subtitles

Instructor: [0:00] Previously, we learned how to add images to our different content models by using the asset picker in our schema editor. While this works well, and we're certainly able to use the assets directly from the GraphCMS CDN, we have some more options available to us if we actually use a media platform in order to deliver these assets.

[0:18] Particularly, we're going to use Cloudinary where on top of its performant delivery service, we're able to use a lot of other features, including media management, as well as transformations on top of our delivery, which allows us to do a lot of things from simple use cases, like cropping and resizing, to being able to overlay dynamic imagery on top of other images.

[0:39] We have a lot of options for how we actually can take advantage of Cloudinary to deliver our assets. To start, we're going to actually take advantage of a feature in GraphCMS called UI extensions, which allows us to add custom functionality right inside of our own content editor.

[0:56] To see how this will work, we can click add a UI extension. What we're going to want to enter is a URL for the extension that we want to use inside of our application.

[1:06] Now, GraphCMS has documentation prior. You can set up your own custom UI extension. We're going to use a prebuilt demo inside of the GraphCMS examples repository, where we can see that this is a UI extension, specifically for Cloudinary.

[1:19] Now, we're going to learn how to setup and host our own, but we can see with their example here, if we copy and paste their URL.

[1:25] We paste it into this extension URL section, where we can run the compatibility test, and we can see that it is compatible and we see all the features that are going to come along with this demo UI extension.

[1:37] Back inside of our example, where you can find this link inside of the description of this video, we can see that we can download this manually by using this npx -d get command.

[1:47] For this UI extension, we're going to actually create a separate project, a separate repository and a separate deployment so that this can live on its own independent from our actual project work.

[1:58] To see how this works, I'm going to copy this command and I'm going to head to my terminal. I'm going to paste it in so that it can actually go through and clone down this repository example into my local project.

[2:09] Then, I can cd into that project directory. I can run yarn install or I can run npm install, if I prefer npm. Once it's done installing, I can run yarn start or npm run start, which is going to spin up a local development server.

[2:24] When it loads, we can see that we actually get an error. That's because we haven't actually configured Cloudinary to work with the extension, but we'll do that inside of the UI extension interface in GraphCMS.

[2:35] If we open up the hosted version, we will see that we actually get the same SDK connection error, but we saw earlier that it was working when we tried to use it.

[2:44] The nice thing is, we can run this in development mode. If I come over and try to add my extension and I paste in my local host 3000, we can see that it is able to find that extension and it is valid. That means, if I was creating this from scratch or generally trying to make changes, I can use this development URL in order to see the changes inside of my environment.

[3:05] For our use case, we're going to deploy this out into the web, and we're going to use it as a hosted version and not make any changes to the code. The first thing I need to do is create a GitHub repository. I'm going to head over to GitHub. I'm going to click create new repository.

[3:20] Where I'm going to call this repository, my Cloudinary input. Then I'm going to scroll down. I'm going to keep the default settings and click Create Repository. Now that we have the new repository, we can see that GitHub gives us all the commands that we need in order to initialize a new repository.

[3:36] I'm going to start from the top and run git init. Then I'm going to run git status to see what it's going to add. We can see all the files that it would add if we're trying to run this. One thing I do not want to add though, is the node_modules. I'm going to modify the gitignore file, in order to add gitmodules to that list.

[3:54] I can simply open up my .gitignore, and I can add node_modules to my gitignore. If I run git status again, we can see that we no longer have the node_modules in that list of untracked files. I'm going to say, git add - A, capital A and a period to add all those files.

[4:12] I'm going to run git commit - M, where I'm going to say init. Then I can start setting up my branch and add my remote origin. I'm going to copy the git-branch command. I'm going to paste that in my terminal. I'm going to run that git remote add origin.

[4:27] I'm going to go ahead and run that push command, so that all those files get pushed up to GitHub. Where if I refresh the page now, I can see the same files that I had locally. Next, we need somewhere where we want to deploy this application.

[4:40] To deploy our application, we're going to use Vercel which is of Next.js fame, as they're the creators and maintainers of Next.js. Vercel's not limited to Next.js. We can certainly deploy our React application for our UI extension.

[4:53] When registering or logging into Vercel, I recommend using your GitHub account or whatever Git provider you're using, as it's going to make it easier to authorize the repository, so that Vercel has access to it. Otherwise, at least make sure that you authorize GitHub on your Vercel account.

[5:09] Once you're logged in and ready to go, we can click create new projects, where if we start to scroll down, we can see that we have all the repositories that we have access to. Where if you pushed your commits like I did, you might already be able to see my Cloudinary input at the top of this list.

[5:25] Otherwise, you can find the organization or the GitHub account that you want to search under, and actually search for the text of your repository and then we can click import.

[5:34] Now, as Vercel says, we're almost done here where we want to configure our project. Now, it looks like this UI extension is using Create React App. Vercel was actually able to detect that and was able to already input all the settings that we need.

[5:47] All we really need to do is click deploy. At this point, Vercel is going to clone down the repository on their own infrastructure, they're going to build the application and they're going to deploy it out to the web.

[5:57] Once it's done, we can see that we get confetti because it was successfully deployed and we can even see a preview where, of course, we have our connection error because that's what we're getting without it actually being integrated into GraphCMS.

[6:09] Now, we have our URL that we can use inside a GraphCMS. I'm going to go back to add UI extension, where I'm going to paste in that new Vercel address. I'm going to run compatibility test.

[6:21] We can see that it picks up that same exact Cloudinary as extension where I can keep scrolling down and I can see that I can enter in my Cloud name and my public API key, which is going to be what I need to actually integrate Cloudinary into my content editor.

[6:36] Now, back over to Cloudinary, we will need to, of course, sign up for a free account in order to get started. Now, because Cloudinary is a multi-product platform, we want to make sure that we're selecting the right product.

[6:46] As we're filling out our information, when you get down to select a product, you want to make sure that we're selecting programmable media for image and video API.

[6:54] Then, you can choose your assigned Cloud name. I'm going to use GraphCMS course, just because I'm creating an account specifically for this course, but then we can make sure we're not a robot and then click create account.

[7:05] Once you click create an account, you'll receive a validation email, where it's going to land you inside of the console with a brief survey where we can now see that, we have both our Cloud name and we have our API key, which is exactly what we need in order to get started with the UI extension.

[7:21] I'm going to first copy my Cloud name, then get ahead back over to GraphCMS, where I'm going to paste in that cloud name and I'm going to also copy my API key where I can, again, paste that right in.

[7:31] Then, I can click authorize and install. Then, we can see it's now available as a UI extension, where we can get started using it inside of our schemas.

[7:40] The first place we're going to use this is inside of the product schema. If we scroll down, we can see that we already have our image, but we want to update that to use a Cloudinary image.

[7:49] We're going to first off delete that field, and of course, it's going to delete all the data that we have associated with that, but we're going to go through and re-add those images for all of our products using our Cloudinary extension.

[8:01] I'm going to delete this field, click delete, and then we can see under the add fields as soon as this is done loading, where if we scroll down to the bottom of add fields, we now have this Cloudinary asset.

[8:13] I'm going to pick that field and I'm going to name this just like I did before as image where we can see it's going to film the API ID, I'm going to go ahead and click create.

[8:23] Now, I want this to be in the same position as before. I'm going to simply drag this up over the price just so that it's the same kind of organization that I had before.

[8:32] Now, if I head over to my products content list, we can see that if I select one of the products, I'm going to be able to scroll down and find this image field, where I can choose from Cloudinary.

[8:43] If I click that, it's going to actually open up a Cloudinary UI, where I can select the asset that I want to choose for this particular product.

[8:52] Now, of course, we haven't actually uploaded anything to Cloudinary yet. We want to be able to make sure that we add our assets there first before we can actually select them.

[9:02] While we can upload these directly from the extension itself, let's head over to Cloudinary so we can see how we can do it from our Cloudinary account.

[9:09] If we head over to the media library section, we can see a very similar UI to what we actually saw inside of the extension. Now, we can upload the images directly in this top-level folder, but I want to try to create some organization.

[9:22] I'm going to first create a folder and I'm going to say I want that to be products and I'm going to hit save. Now, I'm going to open up that products folder, where I'm going to find all of my product images, and drag them all inside of my Cloudinary account.

[9:35] We can start to see every one of these assets inside of our Cloudinary account. We can even manage these assets if we want doing a lot of things like transformations, but now we can see we even have our URLs for each and every one of our image assets from Cloudinary.

[9:50] I'm going to head over to my Cosmo fitted hat. I'm going to scroll down and choose from Cloudinary, where as soon as that loads, I'm going to be able to navigate to my products directory.

[9:59] I'm going to be able to scroll down and find that fitted hat, and I want to use that and add in close so that it actually adds it from my Cloudinary account into GraphCMS.

[10:09] Finally. I'm going to hit save and publish so that it actually goes out to the world. Before we start adding any more of our images, let's see what this looks like in our data.

[10:18] I'm going to head over to the API playground and I'm going to go ahead and click play with that current query. Where we can see that we're getting an error here. That's because our image data changed from our previous query.

[10:31] If we go down to products inside the Explorer and look at the image itself, we can see that's now a single field. It doesn't have these additional fields inside of it. Let's get rid of those. Click play again. We can see that now we have our image, which is a JSON object that comes from Cloudinary, where we have our URL.

[10:50] We have our width and height just like before, but we have other features that are going to give us the ability to grab our image from Cloudinary and do additional things with it. Now, before we see if this works inside of our application, we want to make sure we update that same query inside of our index.js home page.

[11:08] I'm going to head over to this product section of the query. I'm going to additionally remove that height, URL and width. If we try to reload the page, at this point we're going to get an error because not all of our product images are being loaded yet, because as we saw we only added that first image.

[11:24] But because our image data has the same shape, meaning we're going to have it associated still at image width, image height, and image URL, it should work as is without having to make any additional code changes.

[11:38] I'm going to go through the rest of my data and we're going to choose a Cloudinary image for every single one of my products, including this trucker hat to make sure that we do have an image associated with every single product.

[11:50] I'm going to skip ahead having added all of my images from Cloudinary for my products. Once the page reloads, we can see that all of our images for our products are loading. If we open one of them up in a new tab, we can see that now, it's getting loaded from Cloudinary.

[12:04] On top of that, if we remember on our home page, this background is getting set from within GraphCMS as well. Inside of my page schema, I'm going to scroll down and I'm going to find that hero background, which I'm going to delete that field like we did the product image.

[12:18] Then I'm going to go all the way to the bottom of add fields, where I'm going to find that Cloudinary asset, go ahead and click it. I'm going to add again my hero background. Then I can scroll down, I can click Create. When I go back to my home content, I can see that I can now choose from Cloudinary.

[12:35] Before, we only added our product images, so we still want to upload our Space Jelly banner. I'm going to go ahead and upload that image straight from within this UI where I can find that Space Jelly banner. I can open it up, and it's going to upload that image direct to Cloudinary, where I can then select that image, hit add and close.

[12:54] Just like before, it's going to add that image. Once we hit save and publish, we similarly want to update our hero background query inside of our application, because we'll get an error if we try to query for these non-existent width, height, and URL fields.

[13:10] Similar to our product images, because we're using the same data shape, meaning the URL height and width, that banner should work as is. If we try to inspect this image this time, we can see again, it's getting sent from Cloudinary.

[13:23] At this point, we're not doing much with our images aside from delivering them from Cloudinary's performance CDN, but we'll see in later lessons how we can take advantage of more Cloudinary functionality to optimize those assets.

[13:37] In review, we saw how that we could take an existing UI extension, clone it down, and create our own instance, installing it into our GraphCMS content editor. Once we were able to add that Cloudinary asset as a field, we were able to select those images directly from our Cloudinary account and serve those images right inside of our app.

https://app.egghead.io/api/v1/lessons/cloudinary-add-and-configure-cloudinary-ui-extension-to-add-images-from-a-cloudinary-media-library/transcript

https://app.egghead.io/api/v1/lessons/next-js-set-up-individual-product-pages-with-next-js-dynamic-routes/subtitles

Colby Fayock: [0:00] Now that we have our home page being dynamically created, including bringing in the products dynamically, we want to create a page for each individual product. To do that, we're going to couple our getStaticProps call, similar to that home page, with getStaticPaths.

[0:14] Where in getStaticProps we were able to request the data we need for the page, getStaticPaths allow us to dynamically create all the different paths that we want for a particular route.

[0:25] To get started in our starter, I created a page so that when we go to products/product, we can see that we load this very simple template, which we'll use to fill in our product data.

[0:35] If we look at this page inside of the code, we can see that it's a static route, where we have pages, products, and product. That means it's just going to be served at /products/product.

[0:44] What we want to happen is, we want to be able to go to /products/product slug so that whenever we pass in that slug dynamically, Next.js knows that already exists and can load that page. To do that, we're going to use dynamic routes, where we can create these paths dynamically, where we can create these dynamic routes with these brackets so that inside, we have our parameter.

[1:05] Which in our case will be a product slug where we can use that value inside of paths as well as our props to dynamically request the pages we want. To see how this is going to work, we want to first set up our route to be a dynamic route.

[1:20] To do that, we're going to rename our product file so that it's going to be in brackets, first of all. Let's call this product slug so that we know exactly what that parameter is that we're going to grab.

[1:32] Next, we want to tell Next.js every single path that we have and the product slug that corresponds to that path. We're going to scroll all the way down to the bottom of the page.

[1:43] This time we're going to export async function, getStaticPaths, where we're going to return an object, but this time we're going to return our paths. We're going to dynamically create these paths by first requesting our product data.

[1:56] We can do this similarly to how we were doing it on our home page. I'm going to first copy over this import statement of the Apollo Client. I'm going to paste it in at the top of the file.

[2:06] Then at the very bottom of the file, similar to how we were requesting our products before, I'm going to grab both this client instance, as well as the entire data query which later I'll tweak.

[2:16] Where if I go back over to product slug and head all the way down to the bottom, I'm going to paste that in at the top of getStaticPaths. In this query, I only want to grab the products. I don't want to grab the page.

[2:28] I'm going to first get rid of this page field inside of that query. Then I'm going to also update this query to page products so that we know what the query is if we ever need to debug. Also, I want to grab all the products.

[2:42] I'm also going to remove this first designator here so that we get all of them in that return. Before we move on let's console.log out this data just so that we can have an idea of what it looks like when we're trying to create our paths.

[2:53] Like we saw in previous lessons, we have our data.data.products where we have all of our product objects. If we see here, we also have an error. That's because we also are required to define a fallback property.

[3:04] Now, what this is going to do is it's going to allow us to set up a fallback page. Since we're not going to worry about that for now, we want our pages to just 404 if it's not found, so I'm going to say fallback=false.

[3:16] Now, if we additionally remember from before, each of our product objects are going to have a product slug. That's exactly what we want to use to create our paths.

[3:26] I'm going to create a new constant called paths. I'm going to say for data.data.products, I want to map through each and every one of those products, so that inside of there, I'm going to create a new parameters object where I'm going to be able to define that product slug, which is going to be equal to product.slug.

[3:43] Then, I can take those paths, and I'm going to just remove this empty array and pass that right in through. Now, just to visualize what this is going to look like, I'm going to go ahead and console.log this out. We can see we have this paths array where for each and every one, we have a params object where we have that product slug with our product slug.

[4:03] Next, as we're seeing here, we want to add our getStaticProps so that we can take that dynamic value and request the data for that page. Above my getStaticPaths or below, if that's what you prefer, I'm going to export an async function called getStaticProps, where inside, I'm going to ultimately return my props object.

[4:22] Now, when this getStaticProps function runs, I'm going to receive a value where I can destructure that first argument as params. Now, this params object is going to have that value of that product slug that I just created and passed to every one of those paths.

[4:37] We can see what that looks like if I console.log out that value. I'm going to say params.productSlug, and we can see what the value is of params.productSlug. If I go to a path that will exist such as Cosmo mug, we can both see that the page loads, but inside of our terminal, we see that product slug for Cosmo mug.

[4:58] Now, we want to use this product slug to request that singular product data and pass that into the page. Now, to start off, I'm going to use the same instance of client where I'm going to create it at the top of getStaticProps.

[5:12] For what it's worth, you could probably abstract this logic to create and return that instance of the client. For now, we're going to keep it simple and just copy and paste the different instances.

[5:21] Then, I also want to copy that query for the products. I'm going to grab that constant of data, and I'm going to paste that right below the other client instance.

[5:31] This one's going to be a little bit different, because this is going to be a dynamic query. Let's head back over to our playground explorer, where I want to scroll down here and find the product node. I want to query where something is going to be, that particular product.

[5:45] Where particularly, we want to see where the slug will be that product. We can type in a slug here such as, Cosmo mug. We can see that it's filling out the query here. If we click play, we can see that's going to fill out that ID, and we get our product.

[6:00] The difference here is, we want to configure this so that we can pass in this slug as a variable. The nice thing is, if I head over back to this slug, I can see this little dollar sign here. If I click that, it's going to automatically turn that into a variable.

[6:13] Now, because we've set this up as a variable, we're going to be able to pass this in like a function. Where we can say, we want this slug to equal a particular value for this particular query. Since we are passing it in, we don't want this to default to Cosmo mug.

[6:27] I'm going to go ahead and remove that to start. We can test what it would be like to pass in a dynamic value by clicking this query variables tab. If I start creating a JSON object, where I'm going to start by specifying my property.

[6:39] If I start typing, I'm going to automatically get some autofill options such as slug, which is what I want, where I can specify that I want this to be Cosmo mug. Then if I hit play, we can see that we're going to still get that same data ID.

[6:53] We're building this query. This is exactly what we want to use. I'm going to go ahead and fill out the rest of the queries such as image and name and price. Because we're going to implement this on the product page itself, we also want the description.

[7:07] If we open up this description node, we'll also notice that we have a few formats that we can grab it as. We want to grab it as HTML. That way we can render it rich inside of our document by rendering it right into React.

[7:19] I'm going to go ahead and copy this entire query. I'm going to paste it right above my existing query that I copied over. I can get rid of that page products, because we don't want to grab all of the products. We want to grab that single product.

[7:31] Now, I can also rename my query to page product since we're only grabbing that one. Next, we want to define what's going to make this particular slug dynamic. To do that, we want to create a variable's property on this client.query request.

[7:46] We're going to say, we want our slug to equal params which we're grabbing from that argument inside a getStaticProps. We want to say params.productSlug. Now, like we usually do, we can test this out and see what's inside of our data object.

[8:03] We can see our beautiful product data for our mug inside the terminal. I'm going to create my constant of product and set that equal to data.data.products and pass that right in through a prop. Where additionally, at the top of the page like I did on the home page, I'm going to create that prop of product.

[8:21] Then I can start updating the data inside of my page such as the product.name. I have my product.price. We can see that we also have our product description. Again, we're going to render that as HTML. Before we start to add that, if you remember, we never created our descriptions.

[8:41] If I go back over to my content editor, I can see that I can enter in my description for this particular product. I'm going to go ahead and paste this in. We can see that I have, "Wake up with a fresh brew of Cosmo with this exclusive Cosmo mug."

[8:54] I'm going to go ahead and save and publish that. Where now, that's going to be available at product.description.html, because if you remember, we needed to select how we want it to render. To use that, I'm going to collapse this div and get rid of that paragraph tag into a self-closing tag, where on that tag, I'm going to add dangerously set inner HTML.

[9:15] I'm going to have a dynamic prop with an object that I pass in. I'm going to use __html, where I'm going to set product.description.html. When we render the page, we can see we have my dynamic name, my description, and the only thing left is that image.

[9:33] To make this easy, I'm going to head back over to my home page. I'm going to grab the same image that we use there because it's going to be the same thing. I'm going to head back over to the product slug and replace that image text, and we can see our beautiful image render.

[9:46] The trick here is, we want to make sure all that data is available for each product. Such as if we go to Cosmo pillow, we can see that it's going to try to render a page, but we don't have a description, so it's going to fail when trying to get that HTML.

[9:59] Technically to fix that, we can say for our product description, we only want to try to access the HTML using this optional chain if we have a description, which would simply not render that section.

[10:10] We want to make sure we have a description for every single one of our products. I'm going to paste in this description for my pillow as well, so you can never get enough pillows for your fort, so get comfy with a new Cosmo pillow. I'm going to save and publish it like before.

[10:23] We can see when we reload the page, that we get that beautiful description. These dynamic values also work for metadata. If we see inside the tab, it still says, product name. We can do the exact same thing inside of the Next.js head component, where instead of product name, I'm going to say product.name.

[10:39] Instead of the description, we can also set that dynamically where maybe I can say, instead of generated by create next tab, I want to find this product.name at Space Jelly gear. We can see when the page reloads, our tab has that new dynamic value.

[10:57] As one last step, we want to make sure that when we link to our products that we can click to them. Back on our home page, we can see that we have this link tag, which is the Next.js client-side routing, but we want to make sure that we're linking to the product.

[11:10] We're going to grab this product slug value, and instead of this hashtag for the href, we're going to create a dynamic prop. Where we're going to say, we want it to go to /products/.productslugvalue. As simple as that, once I click one of my products, we can see that it goes to the product page.

[11:27] At this point, we can't do anything more with this page such as adding it to the cart, but we'll see in later lessons how we can add a shopping cart and how we can add each and every one of these products to that cart.

[11:37] In review, we saw how we were able to take this query and create a dynamic query out of it with variables, where we could use the getStaticPaths function to create a path for every single one of our products.

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

https://app.egghead.io/api/v1/lessons/next-js-set-up-individual-product-pages-with-next-js-dynamic-routes/transcript

https://app.egghead.io/api/v1/lessons/snipcart-add-a-shopping-cart-and-checkout-funnel-with-snipcart/subtitles

Colby Fayock: [0:00] Now that we have our home page and we have individual pages for every single one of our products, it's time to actually let people buy these products. To do that, we're going to use Snipcart, where we can drop in a shopping cart that's going to provide us an end-to-end checkout flow.

[0:14] To do that, we'll add in the Snipcart SDK and map all of our products right inside of the DOM so that Snipcart can actually see all of our products inside of that page. To get started, you'll need a Snipcart account so you can hit get started.

[0:25] Or if you use the link SpaceJelly.dev/Snipcart, you'll be able to get an additional one month free. Either way, once you sign up, the first thing you'll need to do is verify your email address before we can actually move forward.

[0:36] When we first drop into Snipcart, we're going to notice two things. Particularly, we're going to see this list of nice things that we need to do in order to get started. We also see at the top here, we have these two tabs, live and test. They are exactly what they sound like.

[0:50] Where live is going to be the production site, and test is really going to be basically development mode, where we're going to learn how we can actually integrate these things. The first thing you want to do is click test to make sure that we're not actually making any changes to the production site.

[1:04] Because we are in test mode, we don't need to configure as much stuff as we would when we are in live mode. We're going to skip through some of that stuff. What we're going to move forward to is we're going to get started installing Snipcart to our site.

[1:16] We're going to head over to the Snipcart documentation where you can go ahead and click this Snipcart install link, where it will take you to the docs. Or you can navigate to docs.snipcart.com, where you'll be able to find store setup and installation on the side.

[1:29] As we start scrolling down, we can see what we need to do in order to install this. We have some preconnect tags, which will help with the performance. We have our style sheets, which is going to be their styles for their shopping cart.

[1:40] Then we have the script tags, which is going to add the JavaScript that's going to make the shopping cart actually work. Before we actually install this on our project, we're going to use an additional tool to supplement our Snipcart installation.

[1:53] As we're using Next.js and React, we're also using client-side routing. Once we click a page, that new page is going to be loaded right inside of the browser, as opposed to making a full request to the actual server and getting that response back.

[2:08] That's great. That's going to help these pages load snappy, especially when this is statically deployed. The issue is, we're going to miss some of the data inside of the DOM that was replaced outside of the React lifecycle.

[2:21] Particularly, that's exactly how Snipcart works, where it is a very independent way to add a strapping cart to your application.

[2:28] That said, when we try to add particular data points to our application based off of that information, we're going to lose that when React reloads the page.

[2:37] Instead, we're going to use a React hook on top of that, in order to try to mitigate those issues. That hook is called useSnipcart, which is a simple hook that I created that wraps the Snipcart library, so that we can access it between all the pages and not have to worry about that ever-changing state outside of the React lifecycle.

[2:56] To get started, we still need to follow the standard installation which we'll do now. On top of that, we'll install useSnipcart alongside of it. Back to adding the installation of Snipcart, we want to add all these tags globally so that all of our application can access the cart and the Snipcart state.

[3:13] To do that, we need to use a custom document page inside of Next.js, which is going to allow us to modify outside of the body and load these scripts so that they do load globally. Under source pages, we're going to add a new file and we're going to call that _document.js.

[3:31] We're going to copy the same exact snippet right over from the Next.js documentation and paste it right inside. Next, we can go ahead and grab those pre-connect hints. Back inside of my document.js file, the first thing I'm going to do is open up that head tag, so I can go ahead and paste in those pre-connect links.

[3:49] Next, we're going to do the exact same thing with our style sheet and paste that in right under our pre-connect hints. Finally, we need to include this Snipcart script. We're going to go ahead and copy that tag and then we're going to paste that under our next script tag that we see here.

[4:03] As we're looking through what we just pasted in, we have this hidden div, which is where Snipcart's going to inject the code. We also see we have this configuration of data API key where this is where we need to paste in our API key. To find our API key, again, make sure we're in test mode, so that we're using our test API key.

[4:22] We can head over to our account section right here, where if we start to scroll down, we're going to see our account section where we can select API keys and we see our public test API key which we can copy and we can paste right into that field.

[4:36] At this point whenever you add or edit your document file, you want to make sure that you restart your server so that it can pick up those new changes. Once we're back inside of our application, we're not going to see anything change by default.

[4:48] If we reload the page and we search for Snipcart in the filter, we're going to see that we are indeed now loading those scripts. Next, we want to be able to add our products to the shopping cart and see that shopping cart.

[4:59] To do that, we can head over to the product section here, where we're going to see the documentation on how we can do that by adding all these attributes to each of our buttons, which is going to serve as our Add to Cart buttons.

[5:11] As we can see, we have a class what we're going to add, but then we have a bunch of data attributes, which is going to be where we're going to put our product data.

[5:18] What I'm going to do, is I'm going to simply copy this snippet. Inside of my product page at productsslug.js, I'm going to scroll down until I find that buy button. This button component that we're going to be using, is going to be a wrapper around the actual button element itself.

[5:35] What we can do, is we can paste in these attributes just like we would if it was a regular button element. Where the only thing we need to do, is we need to make sure that we fix this class name so that it's going to be recognized by React.

[5:47] Additionally, we want to make sure that all these data attributes have our data. We can start to replace these data attributes with the data that we have. If we scroll down, if we remember inside of our query, we have our ID, image and name, price, and our description.

[6:02] If we scroll up, we can start to replace some of these things such as our product, the ID. We can add our price as product.price. We can have our URL, which is going to be dynamic, which will come back to in a second. We have our description where you don't necessarily need a description.

[6:19] I'm going to go ahead and get rid of it. You can add it optionally if you want. For our name, it's going to be product.name. We know we have our image URL by scrolling up to our image tag, where I'm going to grab the product.image.url.

[6:33] I'm going to go ahead and replace that asset URL. The tricky thing is, for our URL, we need to use our slug, which we're currently not querying. If we look down at our list, we can see that it's not inside. What we can do is simply add that slug right inside of that query, where we can now scroll back up and we can start to create a dynamic value out of that URL.

[6:54] Where I'm going to say, I want this to be /products, and then I'm going to insert the variable of product.slug. Once we refresh the page, we can go ahead and click that Add to Cart button, where we can see our Snipcart cart. We can even see that we can interact with this where we can add items. We can simply remove all of the items.

[7:12] We're going to be able to manage our shopping cart or add items back into it. If we notice, the shopping cart is opening full width. Personally, I like to open it as a sidebar. We can do that by configuring it right inside of our Snipcart snippet.

[7:26] Back on our installation page, if we scroll all the way down into the bottom, we're going to see that we have our global configurations. Particularly, we're going to look at data-config-modal style, where all we need to do is add this attribute to our hidden div and it's going to only open up on the side.

[7:42] Back inside document.js, I'm going to go to that hidden div and the very end, I'm going to go ahead and add that value. Remember at this point, make sure you restart your server as we made a change inside of document.js.

[7:54] If we go ahead and click Add a Cart again, we can see that it's going to open up to the side and it looks great. We don't only want to be able to add products from our product page, we also want to be able to add them from the home page.

[8:03] If we navigate over back to our home page, we see that we also have these Add to Cart buttons. Inside of our index.js, we have that same button for Add a Cart like we had before. I'm going to simply copy that button right from my product page.

[8:17] I'm going to paste that right in to my index.js. Similar to our product page, we need to make sure that we have all this data. We should have most of this, but we never used the ID on this home page. We can scroll down until we find our query, where now we see our products.

[8:33] I'm going to simply add that ID. Now, once I reload the page, I can add my Cosmo-fitted hat and we can see it gets added right to the cart. The last thing we're going to do in this lesson, is anytime we add something to the cart, we want to make sure that this value in our header is going to reflect that cart value.

[8:49] The traditional way to do that with Snipcart is by adding a class name to that container, so that Snipcart can handle updating that value, similar to how we added a class name to our Add to Cart buttons. The issue is like we were talking about before with client-side routing, React will override that and wipe out that value whenever we change pages.

[9:08] That's where we are going to use our useSnipcart hook in order to alleviate that issue. First, we want to install useSnipcart. I'm going to copy this Yarn add command and install it as a dependency. Of course, you can use NPM if you prefer.

[9:23] Then we see we want to wrap our entire application with this Snipcart provider. Before when globally adding our scripts, we use the document.js file. We want to instead use the app.js file where this is going to be able to load all of our React, and we're going to be able to pass in the context to all of our components.

[9:40] I'm going to first copy this import statement and I'm going to paste it right at the top of this file. Then all I need to do is wrap it with the Snipcart provider. I'm going to add that Snipcart provider around my component.

[9:54] What this is going to do is make this Snipcart provider context available throughout the application. We want this available in the header files. I'm going to open up header where we can scroll down, and we can see that what we ultimately want to update is this .00 value.

[10:09] To do that, now we want to use this useSnipcart hook. I'm going to first copy that import statement. Like before, I'm going to paste that in as a dependency at the top. We can now grab that snippet, which we're going to use at the top of this header component, which is where we use our hooks.

[10:25] Now, let's log out this cart object so that we can actually see what's inside. Once the page reloads, we can see that once Snipcart actually gets picked up, we can open this up and we can see all the fields that we have available, which includes a lot of the data that we necessarily don't need right now. What we want to find is the subtotal.

[10:42] If we scroll down here, and we actually click these three dots to grab the value, we can see that it's currently at 70. We want to replace that inside of our header. Down where we're adding that value, I'm saying I want that to be cart.subtotal. We can immediately see that it updates to 70 inside of the header.

[11:00] Traditionally, in e-commerce, we usually see two decimal places to make sure that we account for the cents inside that value. I can say that if I do have a subtotal, I want to use two fixed. I'm going to pass in two, which means it's going to have two decimal places.

[11:15] Now, importantly, I added this conditional operator here to make sure that it doesn't try to run this function if that value is undefined. Now, we can see that it was immediately updated to 70.00. Even if we add a new value, we can see that it's going to update inside of the Snipcart shopping cart. As soon as we scroll up, we see that it's now 90.

[11:34] The only issue, though, is if you try to click that, nothing is going to happen, where we want to be able to see our shopping cart, and we don't want to force people to have to add something to their cart in order to actually see the cart.

[11:45] Well, we skipped the Snipcart installation for showing the value of the cart. We want to be able to allow them to open up the cart. To do that, we're still going to use the Snipcart installation, where all we need to do is simply add a class name, a Snipcart-checkout, on the button we want to activate.

[12:01] Back on that button inside of my Header.js, I'm going to simply add that class name and paste in my Snipcart-checkout. Now, if we try to click that cart value, we can see we can open up our cart. We have full access to checkout.

[12:14] In review, we wanted to make sure that when we add something to the cart, we're going to be able to actually add it to our Snipcart cart. When I click Add to Cart, we can see our Snipcart shopping cart.

[12:23] We can also see that it's going to update inside of our header with that dynamic value. To do that, we signed up an install Snipcart where we added the installation to a custom document file and added our class name and data attributes to all of our Add to Cart buttons.

[12:38] Finally, we installed the useSnipcart hook so that we were able to grab that context to show that subtotal anywhere inside of our application.

https://app.egghead.io/api/v1/lessons/snipcart-add-a-shopping-cart-and-checkout-funnel-with-snipcart/transcript

https://app.egghead.io/api/v1/lessons/snipcart-use-stripe-as-a-payment-gateway-in-snipcart/subtitles

Instructor: [0:00] Now that we have Snipcart installed inside of our application, there's a few things we need to do inside of Snipcart in order to prepare our account.

[0:07] While I'm not going to walk through every single thing with you, the one thing that we need to make sure we do is set up a payment gateway. To manage our payment gateway, we can see that we can either click right on the dashboard, in the Getting Started Guide, or we can head over to our account section, where we can see payment gateway right at the top.

[0:24] If we start to scroll down, we can see that we have a lot of options. For this walkthrough, we're going to use Stripe. Stripe is a very popular payment platform that allows us to securely take payments across the web. While they have a lot of great products and APIs for those products, we don't need to worry about any of that as Snipcart has already taken care of that for us.

[0:43] I already created my account. You want to head over to the sign-in page, where you'll see at the bottom you can sign up for your new free account. Once you do, you want to make sure that you activate your account and verify your email.

[0:54] To activate your account, you can click this link at the top or click Start. It's going to go through and ask you a lot of your business details. Stripe will need this in order to take care of its system.

[1:04] Just walk through all these different steps and enter in the information that it needs. Then you'll be ready to set up your business for a new project in Stripe.

[1:12] As you're working through this, I will note that it is going to ask you for some personal information, including linking to a payment account, as you want to make sure that when people buy products and send you money, that there's going to be a way for Stripe to send you that money.

[1:26] After your account is activated and you're all ready to go, we're going to head back over to Snipcart. We're going to click this Connect button and it's going to take us over to Stripe to connect our account. I'm going to go ahead and click Connect.

[1:39] Once we land back on Snipcart, we can scroll down, and we can see that we are now configured with Stripe. While it feels like this lesson is short, that's because it is, because we don't have to do anything else in order to integrate Stripe.

[1:50] It'll automatically be handled for us on Snipcart, and it'll be able to send those payments over to Stripe where Stripe will be able to fulfill it to our bank account.

[1:57] In review, 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, which is a well-known secure payment processing platform, where it's going to be able to easily integrate into our Snipcart account.

[2:10] Once we had our account, we were able to head over to the Snipcart dashboard where we were able to connect Stripe as our payment gateway, which simply allowed us to go through an authentication process, where we now have Stripe configured.

https://app.egghead.io/api/v1/lessons/snipcart-use-stripe-as-a-payment-gateway-in-snipcart/transcript

https://app.egghead.io/api/v1/lessons/graphcms-create-a-product-category-graphcms-schema-to-manage-product-groupings/subtitles

Instructor: [0:00] Back inside of our application, we have our products set up, we have our home page set up, and we even have pages for those products, but we want to give a better way for people to discover each of our products, the things that they want to be able to find.

[0:13] For instance, while some people might want to look at the accessories that we provide, others might want to find the apparel, such as this awesome Space Jelly Cosmo T-shirt. To do that, we're going to use categories where we're going to create an apparel category and accessories category. We're going to also create a featured category, which is how we're going to manage this section on the home page.

[0:33] Back inside of our GraphCMS dashboard, the first thing we're going to want to do is create a category schema. If we head over to the sidebar and find schema, we're going to click Add Model, where we're going to add our category model. We can click Create.

[0:47] To start off, like every other model that we've created, we want to add a single line text, which is going to be our name, which is going to be the name of the category. We want to also use as title field like we typically do and click Create.

[0:59] Just like our products on our pages, we want to make sure each category has a slug. We're going to call this slug. Then we're going to go ahead and generate the slug from template like we typically do. We're going to use the category name, which is going to turn it into a lowercase value as well to create that slug.

[1:15] For each category, we want to associate it with a group of products. To do that, we want to add relationships between that category and products. Over inside of Add Fields, we're going to scroll all the way to the bottom, where under the Relation, we see Reference. We're going to go ahead and click that.

[1:29] Now we could see that our field configuration is a little bit different to some of the other things that we've seen. The first thing we want to do is define our relationship where we only want to allow one model to be referenced, first of all, but under model of reference, we want to select our product model.

[1:45] We can choose the reference directions, and we want to make sure that we create a two-way reference so that they can reference each other.

[1:52] Finally, for this particular definition, we want to make sure that not only can we map many-to-one, we want to be able to map many-to-many. If we see how these checkboxes are configured, we see allow multiple categories per product, and allow multiple products per category. Then we can click Continue.

[2:09] At this point, we're going to configure how our products are displayed inside of our category. We can see that it's prefilled with products, and we're going to just leave that as is and again, click Continue.

[2:20] Finally, on the flipside, because we chose that we want two-way relationships, we want to be able to configure how our categories are shown on our products. We can see it was prefilled with categories, which we're going to leave as is and again, click Create.

[2:34] Finally, I always like to leave my slug at the bottom. I'm going to move my products up inside of the middle here. Now we have our category model ready to go, so we can go ahead and add some categories, and we can add products to those categories.

[2:47] Over in the Content section of GraphCMS, we can see we have our default views, where I'm going to select Category, which is already selected because it's the first in that list. We're going to go ahead and click Create Item.

[2:58] As I mentioned before, one of the categories we're going to create is Apparel. I'm going to add Apparel as the name. We can see that the slug is automatically generated, but now we can add products to this category.

[3:11] Once I click Add Existing Products, we can see that all those products are loaded inside of this table for us to view. If I scroll over inside of this table, we can see all the names where we want to add things like our hooded sweatshirt.

[3:24] I'm going to scroll over, and I'm going to check that one. We can keep scrolling down. I have my regular sweatshirt, not my hooded one. We have my kids T-shirt, regular T-shirt, and V-neck. I'm going to also select those bottom three items. We can see that once we do, we now have five items. I'm going to click Add Selected Products, and we can see all those products listed inside of this new category.

[3:46] Like usual, I'm going to save and publish this new category. I'm going to head back over to my category list, where I'm going to click Create a New Item, where this time, we can add accessories. Once I have those products selected, I can click Save and Publish as well.

[4:01] The last category that we're going to create is our featured category, where this category really isn't going to be different from any of the other categories we've created. It's just going to be how we use it that's going to be a little bit different.

[4:13] What we want to do is add a few items to the featured list. It doesn't have to be these first four because this is literally the first four products in the list. Once I add all those products, we can even rearrange them to see how we want them displayed.

[4:25] For instance, I do want my hooded sweatshirt to be at the top, but maybe I want my pillow to be the second slot. I want my trucker hat to be the last slot. We can see this is the order that it will show up right inside of our UI.

[4:36] Now we have all of our categories in place that we want to use for our application. The next step will be querying it and adding it to our app.

https://app.egghead.io/api/v1/lessons/graphcms-create-a-product-category-graphcms-schema-to-manage-product-groupings/transcript

https://app.egghead.io/api/v1/lessons/next-js-dynamically-add-category-landing-pages-with-next-js-dynamic-routes/subtitles

Colby Fayock: [0:00] Now that we have our categories set up with products added, we want to be able to query this data so that we can use it inside of our app. As usual, let's head over to our Playground Explorer where we can scroll down, and we see we have both category and categories available.

[0:13] Let's first navigate into categories, where we can see all of the data attributes that we have available, where we want to select our ID, our name, our slug, and we see that we do have our products' node.

[0:24] Now, if we start to scroll down through our products' node, we can see the typical items like our ID. We have our name and our slug, but what else do we want to add so that on product listing pages, we show only the data that we need?

[0:38] We can think of this similarly to what we currently have on our home page, where we have our image. We have our name, our price, and we are using our slug because we want to tell Snipcart exactly where that product is.

[0:49] Inside of our home page query, we can see exactly that where we see all the fields, including the ID name, price, slug, and image. Let's make sure we also have our image and our price. If we hit play, we can see that we're going to get a list of all of our categories, including our first one of apparel, where we get all of the products that are inside of that particular apparel category.

[1:09] Now, when building the category routes, we're going to do this pretty much exactly the same like we did with our products where, first, we want to generate the paths. Then, we want to grab the data for each of those paths.

[1:21] To start off, inside of the pages, categories, category.js file. This is where we have a template similar to what we did with the product template, where we can get started building this out.

[1:32] If we look at this route of categories, category, we can see that we have our category name. Then, we're going to have a place where we can list out all the products. Let's add those products in. Like our productslug.js, the first thing we're going to want to do is use getStaticPaths in order to query all the paths.

[1:47] Let's head over to productslug, and let's copy this entire function because it's going to be very similar. Let's head to the very bottom of category.js where we can paste in that function.

[1:59] Now, because we're using Apollo Client, we want to make sure we also copy over that import statement so that we can use that as a dependency. Now, we can update this query to grab the category data. I'm going to grab this entire query and replace my page products query, where I can now call that page categories.

[2:17] Because, at this point, we're only creating the category paths, we don't need all this additional data inside of this particular query. I'm going to go ahead and remove the products. I'm also going to remove the name. We want to keep the ID because that can sometimes help with caching. We also want to query for the slug so that we can create that path.

[2:36] Now, inside of our path creation. This is going to be very similar as well, but instead of products, we want to grab our categories, where for each category, we want to grab the category slug and we're going to create this parameter as category slug.

[2:51] That means, in addition to using this param of category slug inside of our paths, we want to update our file name to make that a dynamic route, where it uses category slug as the parameter.

[3:04] As soon as the page reloads, we can see that we're getting a 404 on category, because we don't have a category called category. If we change that to apparel, we can see that the page is going to load, but now we're getting that getStaticProps error.

[3:17] Over inside a productslug.js, I'm going to be lazy again and grab my getStaticProps function, where I'm going to paste that in right above my getStaticPaths. As we learned the last time that we created dynamic routes, we don't want to simply query for all of the categories when we're trying to build out a single page.

[3:36] Instead, we don't want to query the category. We're going to query a single category where we can use a slug where we're going to create a variable, where we can say that we want the query variables with that slug to equal a particular value, such as apparel.

[3:52] Once I click play, we can see like before, it added that ID, but we can see that I get my category. I'm going to add back in all of my category fields such as name and slug. I'm going to add my products. Remember, we want to add our ID, our image, our name, our price, our slug.

[4:12] Before we head over, let's test out that this works and we can see we have all of our beautiful data. Let's copy this query and I'm going to replace this page product query, where the only thing I'm going to update is my query to page category.

[4:26] Then instead of using our parameter of product slug like we did in the product page, we want to make sure that we're using the category slug. I'm going to change that to category slug. I'm also going to update the product instances to category.

[4:41] As a quick shortcut, I'm going to add a second prop called products, which is going to be equal to category.products. At this point, we should have our data available to destructure as props. I'm going to have my category and my products. Let's console.log out those values, just so as usual we can see that we're getting our data.

[5:02] Once the page refreshes, we can see we get that template again. If we open up our console, we see we both get our category object, but we also get those products which again is a little shortcut so that we don't have to reference it inside of the category object.

[5:17] Now that we have that data, let's populate our page. As we're looking through instead of spelling out category name, we want to say category.name and we can also use that value inside of our title. Then we're going to use our products so that we can map through each and every one of our products.

[5:34] That way, we can return a new list item for every single one of those products. I'm going to return a new instance of that list item where I can start replacing that data such as the product.name, and the product.price. Where we want to make sure we add to fixed with a two.

[5:54] We also want to make sure we add our currency to the front. For the image, I'm going to make things easier and hop back over to my product slug page, where I'm going to find that image. I'm going to paste that right inside since it'll be the same thing.

[6:07] Similarly, for the button for add to cart, I'm going to do the same exact thing. I'm going to grab that button from my product page. I'm going to replace that category button with the actual button data. Next, we know that we want to link to every single one of these products from the category page.

[6:24] First of all, let's grab this URL that we're generating for that button and replace that href. Since we're using a Next.js application, we want to use client-side routing. To do that, we need to use a Next.js link component.

[6:37] If we look inside of our home page which is similarly listing out products, we can see that we're already importing that component. For all those products that are getting mapped out, we can see right inside of the list item, we're using that link, which is where we pass in the href, where we then nest that A, anchor tag.

[6:53] I'm going to do the same thing. At the top, I'm going to first import my link component. Then, I'm going to wrap this anchor tag with my actual link element, but then I'm going to move that href right up to the actual link component.

[7:08] As one last update to each of these list items, anytime we map through a list like this, we want to make sure that we apply a key to the outermost element. Particularly here is going to be our list item. While we might not run into any bugs here, it's best practice to have that in place, so that React can properly identify each of the elements.

[7:26] I'm going to add my key and I'm going to simply reference product.id. Once the page reloads, we can see that first of all, we do have our title of apparel, but if we scroll down, we see all of our products in that list. We can even add one of those items to the cart, where we see Cosmo hooded sweatshirt.

[7:42] We can navigate to that item where we bring out that dynamic-routed page, where we land on our product page. Now, that we have our dynamically-routed category pages, we can start using those links throughout the site. Such as on the home page, I can now link this banner to the apparel page.

[7:58] Back inside a GraphCMS, I'm going to find that hero link and I'm going to say, categories/apparel. I'm going to hit save and publish. Once we hard refresh and the data reloads, we can now click on our banner and we're going to land on our apparel page.

[8:11] We can also update some of these links inside of the navigation. We're going to save this third link for a future lesson, but we can start updating these other links such as apparel. We can click through those links where we have our accessories page, where we can navigate right back to our apparel page.

[8:27] Finally, now that we have category set up, we have pages for our categories, we want to be able to manage these products on the home page. To do that, we're going to use a category where we already created that featured category.

[8:39] The nice thing is, if we look inside of our index.js home page, we already have a query where we're querying products already. What we want to do is swap which products we're querying. To start, I'm going to go ahead and copy these attributes as we want to query the same things.

[8:54] I'm going to go to my Playground Explorer and I'm going to scroll down and I'm going to still select my products. This time I'm going to select where, and inside of where, we can see that we have a few options, including category specific options, where I want to select categories some.

[9:09] Inside of that, we're going to find fields that relate to specific categories. I'm going to scroll down until we find slug, and I'm going to type in featured for my featured slug and hit play. We can see that we're already getting data back for all the products that are in that featured category.

[9:25] Because I copied those fields for my products, I'm going to paste all of them right in and hit play. We can see that we get all those product fields exactly how we want them. I'm going to go ahead and copy the products part of this query and replace the products query inside of my page home query.

[9:41] Once we hard refresh so that the data repopulates, we can see all of our featured products. In review, we created 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, we can go the opposite direction.

[9:59] On our products node, we can reference those categories and get all the categories that relate to a particular product. With that data, we set up a dynamic route for category slug, where we used both getStaticProps and getStaticPaths to build each and every one of those pages, where we were able to dynamically generate each category page with all the products.

https://app.egghead.io/api/v1/lessons/next-js-dynamically-add-category-landing-pages-with-next-js-dynamic-routes/transcript

https://app.egghead.io/api/v1/lessons/graphcms-list-store-locations-on-a-page-using-a-store-graphcms-schema-and-data/subtitles

Instructor: [0:00] As an online store, I want the ability for any of my customers to come through and add their products and purchase them right from my website. If I have physical stores, I want people to also be able to find those stores on a map and see which one is closest to them.

[0:14] We're going to create a store locator page, where we want to be able to list all of our stores and then display it on the map. To start off, just like all of our other data points, we needed the ability to manage those store locations programmatically.

[0:26] To do that, we need to create a schema where we can create an instance of each of those stores. Over on the schema page, I'm going to click add under the models and I'm going to create a store location. As usual, we're going to want a name for each of these stores.

[0:40] I'm going to create my name field that we're going to use as a title field. In this instance, we're not going to dynamically create pages for each store, so we don't need a slug. We will need an address.

[0:51] Let's add multi-line text where we can say, we're going to add an address and click create. We're going to want to add a phone number to make sure that we can have people call our stores.

[1:02] Now, as our last field, we also want to be able to add the physical location of the stores. Where in the world does it exist? What are the coordinates on the map?

[1:09] If we scroll down to the very bottom of add fields, we're going to find this under location called map, where we want to say this is going to be our location. This is going to be what we're going to use in order to set those coordinates.

[1:21] When we start to add our data, we're going to be able to see what exactly that field looks like, as it's going to be different from our traditional fields.

[1:28] For now, we have our schema. Let's head over to content where we can start adding our store locations. Now, let's click create item where we want to start to add in some data. Now, if you have some real stores, go ahead, and add those in now.

[1:42] Otherwise, I'm going to just add in some fake locations. How about starting in the city closest to me? Philadelphia. For the rest of this, I'm going to make up some information.

[1:52] Particularly for this address, I just used the location of a UNIQLO in Philadelphia because now what I can do is I can take this address...Remember, we added this location field inside of our schema. I can paste in this address, click search, and it's going to find that location on the map where now we have that location saved. We're going to get that back inside of our request.

[2:16] As usual, I'm going to click save and publish. Now, let's get a head start for creating the queries for our page. Over inside of our playground explorer, I'm going to scroll down until I find my store locations. Then, I'm going to start adding the data that I want, including the address, the ID, the name, the phone number.

[2:34] Then, we're going to also add our location field where we can see a few things that we have, including distance, latitude, and longitude. Let's add the latitude and longitude and click play. We can see all of our data including that location, which gives us those coordinates of that exact location.

[2:51] Next, let's move this query into our application to start grabbing the data. Starting off inside of our stores file, we have a basic React template like before, where we're going to be able to loop through and add all of our stores dynamically.

[3:04] In previous pages, because we were dynamically creating pages, we needed to use getStaticPaths. This time because we're only going to load data for this particular path/stores, we only need to use getStaticProps in order to add that data.

[3:20] I'm going to head over to my index.js file. The first thing I'm going to do is import my dependency for Apollo Client, that way I can make some queries. Down at the bottom of my home page index.js, I'm going to copy over this getStaticProps function.

[3:34] That way I have a little bit of a head start for creating my stores query. If I head back over to stores, head all the way to the bottom and paste that in, I can now get started editing this query. First, I'm going to copy the store locations query, where I'm going to replace this entire page home query, where I'm going to instead, call this page stores.

[3:56] Then I want to grab that data and return it as a prop. First, I'm going to get rid of that home and the products and replace it with data.data.store locations, and I'm going to return that first of all as a prop. I'm going to make it available as a prop and then console.log out the data like we always do, so we can make sure we have that.

[4:14] If we look in our browser, we can see our store locations array, including all of the data and including that latitude and longitude. While we'll build a map in our next lesson, let's first list out all of our locations. Like we did for our category products, we want to turn this list item into a dynamically created list.

[4:32] I'm going to say for all my store locations, I'm going to map through each location and I'm going to say, I want to return a new item, which is going to be this list item that I'm going to create and dynamically create product data for.

[4:45] Inside of this unordered list, I'm going to say I want to take my store locations and map through it. For each location, I'm going to return a new item. Inside, I'm going to paste in that entire list item, which then I'm going to fill in to return data inside dynamically.

[5:01] It includes making React happy by creating a new key on each of those items, but then we can also add our location.name and we can copy that. We can add our location.address, and we can add our phone number. If we look at our store, we should see all of our locations listed.

[5:19] We'll be updating this button in the next lesson to work alongside the map we add to this page, we can go ahead and update our Google Maps link now to go directly to our coordinates.

[5:28] To easily do that, we can head over to Google Maps. If we right click in really any location, we're going to be able to see the coordinates of that location. While we don't care about those coordinates particularly, what we want to do is click directions to here.

[5:42] Which what it's going to do, is it's going to create a URL where it's going to take our current location and it's going to say, I want to create a set of directions to those coordinates that were pasted in. Looking at this URL, we want to start using this as a way to actually template inside of our application.

[6:01] First of all, let's simplify it a little bit. We don't need this data attribute at the very end. First of all, that makes it greatly reduced. Additionally, we don't want to assume where the person's at. Let's get rid of this Philadelphia PA inside of there, or whatever location you see, where you can now see you'll have // there.

[6:19] All that means is, it's going to be an empty location. If we first of all copy that URL and we hit enter, we can see that Google Maps is going to load that URL where it's going to be an empty starting location to a particular location.

[6:32] I'm going to replace the URL that's currently inside of my application with a dynamic value. I'm going to first of all paste in that URL. Now, I'm going to replace these coordinates with the coordinates that I have inside of my app.

[6:45] I'm going to want to start accessing this data inside of my location object. I'm going to take my location and I'm going to say I want this first value to be location.location.latitude. Then I'm going to copy that and I'm going to say I want that second value to be longitude.

[7:01] Now, because that second parameter is going to be very similar except for that @ sign in the front, I'm going to first copy that entire value and I'm going to paste it in right after that @ sign. One thing to note here is at the very end, we see this Z attribute, which that's going to refer to the zoom level.

[7:21] If you want it to be very close to the map, you might want to have a higher zoom, but if you want it to be out more, you want to have a lower zoom. Once my app reloads, if I click any of these locations such as 3251 in San Francisco, it's going to open up a new page inside of Google Maps, where it's going to be able to give me directions right to that exact location.

[7:41] Finally, we want people to be able to find this page. Let's replace this link in the header, with the link to this page. Inside of my header.js file, we're going to find that third link. Let's call this find a store, where we can say instead of this href, we want that to go to /stores.

[7:58] If I'm on any other page and I click find a store, I'm going to be able to see all the locations. In review, we wanted the ability to show all of our physical locations on our website. To do this, we first set up a store location schema, where we added new locations for every location that we have.

[8:13] Where then we were able to query all that data, and bring it into our store with getStaticProps. Where not only did we loop through each location and show the information, we created dynamic Google Maps links. Not only can people see the location, but they can also get the directions easily right on Google Maps.

https://app.egghead.io/api/v1/lessons/graphcms-list-store-locations-on-a-page-using-a-store-graphcms-schema-and-data/transcript

https://app.egghead.io/api/v1/lessons/graphcms-add-all-store-locations-to-a-react-leaflet-map-with-location-data-from-graphcms/subtitles

Instructor: [0:00] Now that we have our store's page and we have our store locations showing on that page, we want to be able to add a map so that people can easily navigate and see what's close to their physical location. To do that, we're going to use a Leaflet.

[0:13] In particular, we're going to use React Leaflet, where it's going to allow us to easily add a map into our store. To get started, we want to first install the dependencies that we need. That's going to include Leaflet as we already have React. That's going to include React Leaflet.

[0:27] In my terminal, I'm going to run yarn addLeaflet and React Leaflet. That's going to go ahead and install the dependencies. In our store's page, we already have a location for this map which is going to be underneath those locations that we did in the previous lesson.

[0:42] While we can probably get started by just adding the code inside of this container, we're instead going to take the route of creating a map component. As there's going to be configuration that we're going to need, which is going to be useful anywhere we would want to use a map.

[0:54] Then to get started, inside of my components' directory, we're going to follow along with the existing pattern where we have the button.js, the index.js, which reference that button.js. The reason we use an index.js with the button, is to make searching a little bit easier and how we import the file.

[1:11] Then we have a module, the SCSS file that's going to relate to that specific component. I'm going to create a new directory inside our components, and I'm going to call that map. Then I'm going to create a file called map.js. I'm going to also create another file and I'm going to call that index.js.

[1:28] Finally, I'm going to create my map.module.scss. What we want to do, is inside of our index.js file, similar to what we're doing in the button and any of the other components, is export the default value from that component. We're basically passing it right through.

[1:45] I'm going to say, export my default destructured from my map. Now, I'm going to create my new constant called map and set that equal to a new function. We're all ultimately return that map. I'm also going to export my default map.

[2:01] Then let's start importing all of our React Leaflet components. Then at the top of my map component, I'm going to first import those. Then I'm going to head back to the React Leaflet home page where I'm going to also start off with this existing demo.

[2:14] I'm going to go ahead and copy that MapContainer right into my return statement. I might as well also copy this position and paste it in at the top to make sure we get that same position. Then, finally, let's import this into our stores page.

[2:29] At the top of stores, I'm going to duplicate one of these lines and I'm going to say, I want to import my map from components' map. Then let's replace this map with our new map component.

[2:40] Now, if you head back to your application, we're going to hit our first roadblock here where the issue is Leaflet relies on the window in order to work, and they don't check that the window exist before trying to actually do anything. This is an issue for us because Next.js actually runs on node sometimes, and when it runs on node, it's going to create that error where it can't access the window.

[3:03] To fix this, we're going to use Next.js Dynamic Imports, which is going to allow us to import it whenever we load the page. To do this, we're going to first import dynamic from next/dynamic. We're going to actually do this inside of our map index.js file.

[3:19] I'm going to first import that at the top of that file. We're going to handle this just like we have it here where we're going to create our dynamic component. I'm going to paste that in, and I'm going to start replacing things saying that I want to create a new constant of map. I want that to be a dynamic import where we actually import that .map file.

[3:38] That means that we're going to need to change this export, and we're going to say we want to export a default map. Now, there's one last thing we want to add and that's an options object to dynamic where we want to say that we want SSR or server-side rendering to be false. That way, it doesn't try to render it inside of node.

[3:56] Now, when the page reloads, while it looks a little bit wonky, we see that we're getting a map. Now, the next issue is we need to apply some default styles in order for it to work. When we're doing so with React Leaflet, we're not getting the default Leaflet styles to make sure that the map is setting up properly.

[4:14] If we go to our terminal, and we look inside the node_modules/leaflet/dist directory, we're going to see a bunch of files where we don't need to worry about most of them as React Leaflet is going to handle the most of this, but what we want to do is we want to import this CSS file. To do that with my map component, I'm going to say I want to import leaflet/dist/leaflet.css.

[4:38] Now, when our page reloads, we actually don't even have a map anymore. If we start to inspect inside of the DOM, and we start to look through these nodes, we're going to see that the leaflet container is zero. That's because it doesn't automatically expand to fill its container. We have to help it out with that.

[4:54] First of all, I want to set the width of my map to be 100 percent. On my MapContainer, I'm going to create a new class name, and I'm going to say I want that to be styles.map, where if I head over to map.module.scss, I'm going to define that map style and simply say width is 100 percent.

[5:11] Now, those styles aren't going to automatically import themselves, so we need to also import our styles from our map.module.scss. At this point, it's still not filling its container, so we need to take another step.

[5:25] This step needs to be specific to the location of the map, where we have a specific idea of how we want it to fit on this page, but we don't want to assume that for every page. We're not going to do the same thing here as we are in other place.

[5:39] Now, because of that, the way that we're going to handle this, is we're going to allow this map component to take in a class name. Where on my stores page, I can say, I want this to have a class name of styles.map, which I already have defined and we'll see in a second.

[5:54] This way, they're not going to collide because the way the Next.js is going to handle CSS modules, is it'll be scoped to this specific page. I can still define styles specific to stores versus map, where now I can say that as a prop, I want to take in class name where I'm going to create a new let variable and say, map class name is equal to my styles.map.

[6:20] If I have a class name, I can say that I want my map class name to equal my map class name, and then my additional class name. Finally, I can replace that class name prop with map class name. Before we see what's happening, let's look at what's on the styles of map that I already predefined inside of this starter template.

[6:43] Once we look over there, we can see that I have that map. All I'm doing is setting a width of 100 percent and a height of 100 percent. If we look above that, our stores MapContainer, which if we look inside of the DOM, is going to be the parent.

[6:55] We're defining an aspect ratio, meaning we're setting a responsive boundary saying that we always want it to be in that particular ratio. Then our map, we want it to always take up the full width and the full height of that area. When the page reloads, we can see it's doing exactly that.

[7:13] If you want to tweak it, you can tweak that aspect ratio, but it's even going to be responsive for us. If we open up our developer tools and we start to shrink the area, we can see that it's going to scale to that exact ratio. Before we move on, we should notice that we also have another issue.

[7:29] We're supposed to be showing a marker on the screen. If we look at the map, we're centered to that location, but we're not showing that marker. If we look at the web console, we can see that Next.js is trying to load those images, but it's not finding it in the right location.

[7:44] We're going to have to manually grab those images and assign them to be loaded for our map. Back in our terminal, similar to what we did before with the CSS, we can see all the images that are available inside of the leaflet/dist/images directory.

[7:59] Particularly, we want to import all these markers, so I'm going to start off by importing my icon marker two times from leaflet/dist/images, and then I'm going to paste in marker icon two times.

[8:12] I'm going to then clone that two times, because I know I'm going to need those to other files where I'm going to remove the two X from the one, and I'm going to say icon marker shadow for my third one. I'm also going to do the same exact thing and make sure that I update the images that are getting referenced to what the images should be.

[8:29] Next, I want to tell Leaflet as soon as the page loads to load those specific images. To do this, we're going to use the useEffect Hooks. I'm going to import useEffect from React at the top of my file. Then I'm going to scroll down inside of my component right before the return statement.

[8:47] I'm going to say useEffect, where inside, I'm going to pass in first of all, a blank function. Then we're going to pass in an empty array as a second argument, so that it only runs once. The particular code that we're going to be using is From a GitHub issue that I found in the past.

[9:02] Where we can see here what they're going to do, is they're going to first delete the function that's going to get that URL. Then we're going to define all the different URLs for that particular marker and the shadow. I'm going to go ahead and copy that snippet and I'm going to paste it into my useEffect.

[9:19] Where then I want to update each of these instances to what I imported above. I'm going to first grab my icon marker.2x. Where I'm going to say, I want to import that and I want to import the .source of that value. Then I'm going to do the same thing for the next two, where we have our icon marker as is.

[9:38] Then finally, the icon marker shadow, where we also want to reference that at icon marker shadow. Once the page reloads, we can see our beautiful marker and we can even click it because that's part of the functionality where we can see that pop up.

[9:52] Now, let's add one of these markers for every single one of our locations. Looking at our map, we don't want to load these same markers for every single location. Instead, we want to be able to reference these markers from wherever we're trying to load it.

[10:06] Now, this is tricky because we don't want to create an API so specific that we're actually recreating the entire React Leaflet API.

[10:15] We also need to pay attention to how we're importing this map as we're doing so dynamically. Instead of importing these markers here, I'm going to say that I want to import anything inside of this map over on my stores page.

[10:28] I'm going to first open this up and I'm going to say inside of my map, I want to load those components. As you might expect, first of all, we don't have those components in this page, but second of all, we can't import each and one of these because again, the dynamic imports.

[10:44] To solve this, we're going to use the MapConsumer function where if we look inside of this example here, we're going to create this wrapper component of MapConsumer where we're going to pass as a function, the entire map.

[10:57] With it, we're going to additionally pass in Leaflet components. That way, in the actual user of the component, we're going to be able to have access to all that information and do whatever we want. I'm going to first copy this example as is.

[11:12] Inside of my map component, I'm going to go ahead and paste that in, but we also need to import this MapConsumer. I'm going to tap that onto my React Leaflet import. Next, I want all of my children of this component to have access to that.

[11:25] To do that, we can run our children prop as a function where typically, we might add our children simply like this, which is going to render anything nested inside of that component, but we can pass data to that child, so that we can have access to it in the user of that component.

[11:44] I'm going to get rid of this default return statement and I'm going to simply pass in that in location of children. First of all, let's add our children as an actual prop, because we need to be able to access it in order to use it.

[11:57] Again, trying to solve the problem of loading this dynamically, we want to be able to pass our children, anything inside of React Leaflet, so that it has access to it, even in that dynamic way. The way we're going to handle this, is we're going to pass in React Leaflet, that way we can take anything we want for that.

[12:17] To do that, instead of importing each of these individual components, I'm going to say, I want to import star which is everything as React Leaflet from React Leaflet. We can't simply get rid of this import statement. We still need to use that MapConsumer and the MapContainer.

[12:34] I'm going to instead take that destructuring statement. I'm going to move it to the bottom of the imports and say that I want to destructure those from React Leaflet to make sure that we do still have those available. This means our children of this component is going to have access to everything inside of React Leaflet.

[12:53] Let's also pass in the map as a second argument as we'll need that later. Back on our stores page, we want to be able to access all that information. To do that, we want to return a function inside of this component, just as we did inside of the component itself.

[13:07] We're going to say inside here, we want to pass in a function, where, if we remember that first argument is going to be React Leaflet, where the second argument is going to be map. We ultimately want to return a component.

[13:19] Next, I'm going to create a fragment because I'm going to move up this marker and the tile layer right inside of that fragment. Instead of importing the entire React Leaflet, I'm going to only import these components that I'm going to be using.

[13:33] I'm going to first destructure this, I'm going to say tile layer and marker and my pop up. Finally, inside of this configuration, we can see that our marker is also referencing a position. We need to grab that from our original map instance.

[13:49] I'm going to come over to my stores. I'm going to paste this right at the top of this return statement, since it's going to be temporary anyways. We can see like magic, our map is still loading. Before we move onto the locations to further clean things up, we can see that we're additionally passing our MapContainer a few more things.

[14:06] That's additionally, the center position, which we don't want to be referencing inside of the map component, a zoom level, and a scroll-wheel zoom. While these aren't super important themselves, what we want to make sure we do, is be allowed to pass those in from the reference of the component.

[14:23] The first thing I'm going to do is inside of my props, I'm going to destructure the rest of everything inside of this object. Meaning, anything else I pass in, in addition to children and class name, it's going to be contained inside of REST.

[14:37] Then I'm going to take that REST and go back to my MapContainer and I'm going to spread everything out so that everything inside of that applies to the MapContainer. Then I'm going to grab all these props and I'm going to cut them out, head over to my stores page and simply add them onto the reference of my map component.

[14:55] Now, because we're referencing that position, we need to move our position up a little bit. I'm going to add that to the top of the file, but soon enough, we're not going to need that anyways. Yet again, we can see that it's still loading.

[15:09] Let's add a marker for each location. Still on the stores page in our code, we want to make sure that we're adding a new marker for every single location. We can take inspiration for this by the way that we were handling that list of locations originally in the sidebar of this page.

[15:24] I'm going to first copy that map statement and head back down to my map. I'm going to first paste than in. I'm going to finish out what that's going to return, which is first of all, going to return an empty item. Let's move up that marker inside where we're going to dynamically create this position.

[15:42] In order to create this position dynamically, we need the latitude and longitude from the location. I'm going to create a new constant called latitude destructured and longitude. Where I'm going to say, I want to destructure that from.

[15:54] If we remember, it's not the top-level location, it's going to be location.location. I'm going to say, I want it to be from location.location. Then I'm going to be able to take this latitude and longitude, and instead of this position variable, I'm going to pass in an array, which is going to be our coordinates of latitude, longitude.

[16:15] On top of that, we can also replace the pop up. Let's say we have a paragraph tag and let's add location.name. Then we're going to also add another paragraph and let's say, location.address. If we look at the map, oh, no, we don't have have any markers, but that's because we don't have any locations in the city of London.

[16:34] To make this easier to see. First of all, let's set this center of the map to a new set of coordinates of 00, which is simply the center of the world. Let's set a high zoom such as maybe four, that way it's going to be expanded out on the world until we can do this dynamically, which we'll learn in the next lesson.

[16:50] That means we can also get rid of that position like I was talking about earlier from the top. Once the map refreshes, we can see that we are in the center of the world 00, but it is a little bit too far zoomed in. We can click the minus a few times where we're going to start to see our locations wherever you added them.

[17:06] Where for instance, I added them in the United States inside of San Francisco, New York, and Philadelphia. If I start to zoom in, we're going to see those locations. If I click one of them, I see Philadelphia and the address.

[17:19] Before we move on as a quick tweak, we can definitely update that zoom to whatever we want it to be by default. Where with that lower zoom level, we definitely get a wider view of the world. Now, we have our list of locations and we have our locations on our map.

[17:32] In review, we wanted to add all of our locations on a map. To do this, we used React Leaflet, which is a wrapper around the Leaflet API.

[17:41] To make sure that we can create this map and use it anywhere, we created a map component, where to alleviate some issues within React and server-side rendering and being able to load this map inside of our application, we first had to manually import some of our marker images.

[17:57] We also created a dynamic import where we were able to create our map as an actual component. That allowed us to avoid any issues, where our window wasn't available during that compilation process.

[18:08] Once we had our component setup, we were able to pass in all of our React Leaflet components so that we were able to dynamically render all of our different store locations by mapping through each of those locations.

[18:19] Just like we did before, with our other locations, creating a new marker for each one, which allows us to see each of those locations right on the map.

https://app.egghead.io/api/v1/lessons/graphcms-add-all-store-locations-to-a-react-leaflet-map-with-location-data-from-graphcms/transcript

https://app.egghead.io/api/v1/lessons/turf-js-manage-map-effects-dynamically-calculate-a-map-s-center-with-turf/subtitles

Instructor: [0:00] We have our store locator page, where we have our locations listed out. We also have a map that shows our locations. We could probably do something to fix the UX here a little bit, where we don't want people to have to scroll over on this page.

[0:12] We want it to be nice and centered and zoomed in whenever somebody loads the page. On top of that, we have these links in the sidebar where we want to make it so that if somebody clicks view on map, it's going to automatically zoom in on a particular location.

[0:26] Starting with the map, in order to figure out where we can actually center the map, we need to do some calculations to figure out where our existing markers are and what area we can actually zoom in on.

[0:36] To do that, we're going to use Turf.js, which is a geospatial analysis tool that we can use right inside of our project. Particularly, we're going to use the center function, which is going to allow us to calculate well the center of the map where our markers are.

[0:49] We're also going to use a helper function called point, which is going to allow us to turn our coordinates into what's called a feature or what's going to be understandable by the library and geospatial analysis tools.

[1:01] Getting started, we're not going to try to import the entire library, as that's way too much. We only want to import what we need so that we can keep things lean.

[1:09] The first thing we're going to do is add our center as a dependency. We can see here that it's going to be using @turf/center. We'll also see that our point is going to be available inside @turf/helpers. We'll need to import all the helpers in order to do that.

[1:23] Inside my terminal, I'm going to run yarn add @turf/center. I'm going to add a space and then @turf/helpers. Then, inside of my stores.js file, this is where we're going to perform the calculation, so we can tell the map exactly where to go.

[1:38] Under our Apollo Client import, I'm going to add import center from @turf/center. Keep in mind, we're not destructuring this. We're importing the default. Then, I'm going to also import points, which this time it is destructured from @turf/helpers.

[1:55] Now, the first thing we're going to run is our points function. Where we can see here, we're looking at a point, but we're going to use points with an S plural so that we can pass in an array of all of our stores and get back an array.

[2:09] We can see here that it's going to be similar. The only difference is going to be we're going to pass in an array. For our coordinates, we're going to pass in longitude, latitude positions for each one. If we look down at an example, we can see exactly that where for the singular version, we're going to pass in the longitude, latitude for that particular point.

[2:28] At the top of my component, I'm going to create a new constant called features, which is the terminology used for those points. I'm going to say that I want to set my store locations and create a map where for each location, I'm going to eventually return a new value.

[2:42] If we remember, our location is stored in location.location. I can destructure this and call it location, because we're not going to have to use any of the top-level data. That said, we can then pass in an array which is going to be our coordinates of location.latitude and location.longitude.

[3:00] Now that we're going to have an array of these coordinates, we want to now use our points function. I'm going to go ahead and wrap that entire thing with our points function. I'm going to take this array of features and I'm going to pass that into the center function, so that the center can determine the middle of all those points.

[3:22] If we look at center, we can see that our argument is going to be GeoJSON, which is exactly what our features are made up of. That's going to be the format that's used by tools like Turf and geospatial analysis. We don't need to worry about that particular terminology.

[3:36] All we need to know is that our array of features is an array of GeoJSON objects. Where if we look down at the example, we can see that we're going to pass in our features right into turf.center, similar to what we see inside the example.

[3:51] Typically, I would name my new constant center, but since we already are importing Turf/center as center, we're going use a temporary value as we're going to grab the value by destructuring in a second. For now, let's say, constant my center.

[4:05] Let's set that equal to center, and let's simply pass in our features. With that value, let's console.log that out, so we can see what it looks like. If we look inside of our console, where it looks like React is yelling at us for a key prop from earlier.

[4:20] We can see this object that we're console logging out, where we start to see things like the geometry and the properties, where this is going to be what we're calling a feature. This is going to be a GeoJSON object. Where we can see inside of this geometry, we have the coordinates which is exactly what we want for our center.

[4:38] On my responsive center, I want to say, if I get something back, I want to get my geometry and I want to get my coordinates. Now, I can destructure those values right from the coordinates. Looking at the coordinates, we have our latitude and we have our longitude, so we can destructure them as an array.

[4:54] I'm going to destructure as an array and I'm going to say default latitude and default longitude. Of course, we want to get rid of that my center. With my defaults, I'm going to scroll down until I find that instance of a map.

[5:09] I'm going to replace this center, where I'm going to now replace the first with default latitude and the second with default longitude. As soon as we reload the page, we can see that it's now centered on all of our markers. While we can probably programmatically also zoom in on this, we could set this as a closer zoom level for now.

[5:29] I'm going to say that I want a zoom of four instead of two, and I think that's looking pretty good for showing my locations on my map. Next, anytime I click on one of these view on map links, I want that to automatically zoom in on one of these locations.

[5:44] In order for the map and the sidebar to understand each other, we need to set a top-level state where anytime somebody clicks on view on map, we're going to set an active location. Once we have that active location, our map will be able to see that and then zoom in on that location any time it changes.

[6:01] To start, we need to be able to set our state. I'm going to import useState from React and that's inside of my stores.js file. Then inside of my stores component, I'm going to create a new instance and call that active store, as well as use the setter for set active store. Then set that equal to useState without a default.

[6:23] Now, anytime somebody clicks on this view on map button, I want to trigger a function that's going to update that store. Inside of the top of my map where I'm looping through and creating all those locations, I'm going to create a new function called handleOnClick.

[6:37] Inside, I'm going to simply run setActiveStore and I'm going to pass in my location.id. Then on my button, I'm going to pass in an onClick handler, where I'm going to say, handleOnClick. Any time somebody clicks on one of these buttons, it's going to fire off this function that sets the active store to that particular location's ID.

[7:00] Before we make the map do anything, let's console.log that out. I'm going to console.log active store. We can see by default when it loads, it's going to be undefined which is expected. As soon as we click view on map, we're going to see that ID.

[7:14] If we click on another one, we're going to see a different ID. Next, anytime that active store changes, we want to update this map and tell it to zoom in on that location. To do that, we need to have access to the Leaflet map instance.

[7:27] If you remember from a previous lesson inside of the map component, we now are passing in that map instance through to that children prop, so we now as a second argument will have access to that map. From earlier, we were already grabbing that as our argument, but now the tricky thing is we need to be inside of a child component in order to access that map information.

[7:50] Otherwise, we'll be trying to access it too early, and we won't be able to have that readily available to us. What that means, is if we try to simply run something like useEffect right here and access that map, it's not going to work. If we had a component inside of here, and we try to access that map inside of useEffect, we would then have access to it.

[8:12] This might look a little bit ugly, but what we're going to do is, we're going to create a new component. I'm going to say constant mapEffect. I'm going to set that to a new component. Inside, we're going to simply return no, as we're not going to return anything inside of the view.

[8:27] Instead, inside of this mapEffect, we're going to use the useEffect Hook where we're going to listen for that active store. I'm going to set a new array where inside instead of an empty array which would only run once, we want to pass in active store as the dependency.

[8:41] That way, anytime this active store changes, it's going to re-fire this function. Before we have access to useEffect, we need to make sure we scroll to the top and we import it along with our useState. To test out this is working, let's console.log out a few things.

[8:57] I'm going to console.log out my map so we can see what that looks like. I'm going to console.log out my active store. Then let's also console.log out our store locations, as we'll need to look through that as well. Finally, before we can see this work, we need to use our mapEffect.

[9:13] At the top of our return statement, I'm going to add an additional mapEffect as that component. When the page reloads, we can see our map which is going to be that Leaflet map instance. We can also see our active store which is undefined as well as our store locations.

[9:29] Again, when we click view on map, that store ID is going to change, and we can see that that fired every time that active store changed. First of all, inside of my useEffect, I'm going to say if I don't even have an active store, I want to return because I don't want to do anything specific.

[9:46] Next, I want to look through all of my store locations and find a store that I need. I'm going to create a new constant called location and I'm going to set that equal to store locations.

[9:55] I'm going to use the find method which is going to allow me to search through that list or that array of locations, where I'm going to pass in a function, where I'm going to destructure the ID of each and every one of those store locations. As a return statement, which is the qualifier, I'm going to say that I want the ID to equal my active store.

[10:14] Let's try to console.log out that location value, just so we can see that it's working. If you remember, we're only logging that value if we have an active store. We're not going to even see an undefined value. If I click view on map, we see our Philly store.

[10:30] If I click view on map for San Francisco, we see our San Francisco store. Looking inside, I want to grab that location so I can grab the Latin long. Instead of setting that constant location, I'm going to destructure the location similar to what we did earlier.

[10:45] With our location, we can now look to Leaflet where we see on our map instance, we can run this setView method where we see this Latin long that we can pass in as our first argument. We can pass in options if we want. We can also pass in a zoom level, so that we can zoom in right to that location.

[11:01] I'm going to run map.setView. Where I'm going to pass in an array, so I can pass in my coordinates where I'm going to say location.latitude and location.longitude. As a second argument, I'm also going to add a zoom of 14. You can tweak that to however you like it.

[11:19] If we open up and reload the map and we click on view on map, we can see that it goes over to that location and it zooms in. If I change that and go to San Francisco, we can see it does the same. If I zoom out, we can see that it's exactly on San Francisco.

[11:33] In review, not only did we want to make these view on map links work, we wanted to zoom in by default on the center of all of our markers. We started off by using center and points from Turf.js where we were able to get the default latitude and longitude or our center.

[11:51] In order to make those view on map links work, we use click handler so that we can use state and we can set an active store. Once that active store was set, any time that active store changes, we run a useEffect hook where we nested that inside of our map so that we can find that location and set the view of our map.

[12:11] Now, whether it's Philadelphia, San Francisco, or New York, wherever we want to go, we can set our location and see exactly where is on our map.

https://app.egghead.io/api/v1/lessons/turf-js-manage-map-effects-dynamically-calculate-a-map-s-center-with-turf/transcript

https://app.egghead.io/api/v1/lessons/next-js-support-multiple-languages-with-next-js-localization/subtitles

https://app.egghead.io/api/v1/lessons/next-js-support-multiple-languages-with-next-js-localization/transcript

https://app.egghead.io/api/v1/lessons/cloudinary-optimize-media-with-cloudinary-to-deliver-smaller-and-performant-images/subtitles

Instructor: [0:00] Our store's looking good. We have beautiful imagery to support our products, but our images aren't necessarily optimized right now. To start off, if we look at our images, we're loading them in at 1200 by 1200.

[0:12] Probably the biggest we ever use them is 322 by 322, which, if we look at two times would be 644 by 644. If we look at our network tab at the request for those images, we see that we're looking at, well, 170, 176, 115. It's a little over the place, but they're all over 100 KB.

[0:31] Where that's not necessarily too bad, but I think we can do better. It's important to make sure that we're serving our images as small as possible for a couple of reasons.

[0:41] First of all, we want to make sure that when we're delivering these images to people, we're being responsible for trying to avoid using more bandwidth than we actually need.

[0:50] Especially considering some of our customers might be on slow Internet or maybe not have a lot of data to begin with. On top of that, slower pages means less conversions, when dealing with e-commerce. Generally speaking, the more lean our page is, the greater chance that somebody might actually buy something.

[1:08] While my demo site only has maybe 10 products, this is going to be even more important as we start scaling up more and more products inside of our store.

[1:16] Now, the cool thing is because we're using Cloudinary, Cloudinary actually has image optimization built-in in a couple of different ways. First of all, we can optimize the image quality, where we can compress it to a point where the human eye won't be able to perceive the difference.

[1:32] We can also optimize image format, where Cloudinary can automatically determine the best format to send.

[1:38] For instance, if my image is originally a PNG, Cloudinary can determine for that particular browser that's requesting the image, whether a PNG is the best choice to send or maybe it's a WebP or an AVIF, really whichever Cloudinary determines is going to give the best results, it'll send that to the browser as long as the browser can support that format.

[1:59] Finally, we can optimize by simply resizing our images, where, with Cloudinary, we can pass in the width and the height that we want. That way, we can resize them on the fly and make sure that we're serving them only as big as we actually need and use them in our app.

[2:13] To do this, we're going to use the official Cloudinary URL-Gen package, where we're going to be able to take this package.

[2:19] We're going to be able to generate images with Cloudinary by passing in the image ID, which we already have available because of our UI extension that we installed earlier, where we can say, for this public ID, I want to automatically optimize.

[2:34] I want to resize it, and it'll give us that URL. To start, I want to install this dependency. I'm going to copy that package name. I'm going to run yarn add Cloudinary URL-Gen.

[2:44] Since we are looking at the category page, let's go ahead and start off with that. The first thing we want to do is import Cloudinary so we can use it. At the top of my category slug file, I'm going to go ahead and import my Cloudinary from URL-Gen.

[2:57] Where if we look back at the documentation, we want to now create a new instance of Cloudinary. I'm going to copy that instance creation. I'm going to paste it above my function or component definition. Also, I'm going to get rid of the comments because we don't need it.

[3:10] Then, I can update the Cloud name to my Cloud name. Where remember, we can find that Cloud name at the top of our Cloudinary dashboard, where I can copy that value and paste it in. Let's try this out quickly just to see how it works.

[3:24] I'm going to create a new constant called URL. I'm going to set that equal to cld.image. Where inside of that image, we want to pass the public ID, or if we're using the fetch remote method, we want to pass in the image URL. Because we already have the public IDs or the Cloudinary IDs for our images, we're going to go ahead and use that.

[3:44] To test that out, we need an actual image for a product. What I'm going to do is I'm going to say for my products. I'm going to grab the first product. I'm going to say for my image.publicid, because I know that it's going to be available at image.public_id, we're going to be able to grab that image public ID and pass it to Cloudinary.

[4:04] Then to turn that into a URL, I'll say, .toURL in all caps. Where now, let's console.log out that URL to see if it worked. We can see in the console that we do have that image link.

[4:18] If I open it up, we can see that it's that hoodie, which is that first product. Before we start optimizing by adding additional methods to this, let's transform all of our images to use this API. How about inside of our products map, I'm going to say that I want to create a new constant called imageURL, where I'm going to set that equal to cld.image.

[4:39] Where inside, I want to pass in the image public ID. That's going to be located at product.image.public_id, which again is the Cloudinary ID. Then we can say toURL, like we did above. I'm going to take that image URL, and replace the existing one that we're grabbing, where I can then use that and transform it after we test and make sure that it's working.

[5:03] Just as expected, all of our images are still loading perfectly. Let's get started with these optimizations, where the first thing we want to do is quality. Before this toURL statement, I'm going to add .quality. I'm going to say I want that to be auto.

[5:17] All the images should look the same still, but let's look in the network tab. While we don't see substantial differences, we do start to see some gains where we no longer have any images above 170 KB.

[5:29] We can do better. Now, let's update the format. Where currently, we see they're all JPEG. In addition to the quality, I'm going to also set the format to auto. We can see that they are substantially smaller, where some of them are half the size or more where they're being served in the AVIF format, because Chrome the browser I'm using, supports that modern format.

[5:50] Again, the nice thing is, if my browser doesn't support that AVIF, which is usually some of the older browsers, Cloudinary knows better and it'll send the best format for that browser. I think we can shave off a little bit more by making sure that we don't send images that are much larger than we actually need.

[6:09] Looking through these images, probably get as large as 447 in size, and we can double that for retina. 447 * 2 is 894. Let's round up to a healthy 900. Where I can say, I'm going to append resize and I'm going to pass in W_900,H_900. Which stands for width and height of 900.

[6:33] Then, I can also update the width and the height since I'm mainly specifying that to be those values of 900 for my width and my height of 900, to make sure that the browser isn't working too hard. When the page reloads, first of all, we can see that the intrinsic size is 900 by 900 and we're seeing yet again even lower image sizes.

[6:56] To show the comparison quick, I ran git-stash so that we can see what this looks like before our Cloudinary transformations. We can see that our sweatshirt here was 173, and we can see all of them are well above 100 kilobytes in size.

[7:10] Again, back to with Cloudinary, we see our size is beautifully a lot smaller. We have this in our category pages. Let's replicate this in our other pages. To start off, I'm going to abstract this instance of Cloudinary, that way we don't have to redefine it everywhere.

[7:27] Under my source directory, I'm going to create a new folder called lib. Inside, I'm going to create a new file called Cloudinary.js. Inside, I'm going to start off by first importing Cloudinary to that file, but then I'm going to head back and I'm going to grab that new instance of CLD and I'm going to paste it right in at the top.

[7:48] We want to have the same ability to do the exact same thing with cld.image that we were doing on category slug, but we want to do with a function where we don't have to have all that set up every single time. I'm going to export a new function and I'm going to call that build image.

[8:04] Where inside, I'm going to first return cld.image and I'm going to pass in the source as is as an argument. I want to make sure that my images are always automatically optimized and formatted. I'm going to copy those attributes. I'm going to add that on by default.

[8:22] We could probably add toURL in there by default, and we can probably add some options for resize inside that function, but I'm not going to over engineer this for now. We can probably be fine how this is, where because we're going to be able to return our cld.image as is, we'll still be able to chain it like we're doing here.

[8:40] I'm going to first replace the existing instance of CLD inside of category slug. I'm going to get rid of my import and I'm also going to get rid of this CLD instance itself. Then I'm going to go above and I'm going to import my build image from @lib/cloudinary.

[9:00] Just as a reminder, the reason we can use @lib, because if we look at jsconfig, we already have that defined as a mapped statement. We can use @lib and easily access that Cloudinary. Now, I'm going to take that build image. I'm going to scroll down, and instead of the cld.image, I'm going to use that build image.

[9:19] I'm also going to get rid of the quality and the format since we have those specified by default. All of our images are still looking great on the category page. Next, let's do the home page images. Between this banner and all the featured images, we're loading about 855 kilobytes.

[9:37] First in my index.js, I'm going to import my build image and starting off with my hero, because we know this is a Cloudinary URL. I can pass in right in my source build image where I'm going to wrap the herobackground.publicid, where I'm going to chain my toURL for my product images.

[9:56] I'm going to go back over to category slug and I'm going to simply copy that same image URL that I'm doing there. I'm going to paste it in and I'm going to replace with my image URL, the product.image.url. We can see that we've dropped that all the way down to 231 kilobytes. Finally, the product page itself.

[10:16] Let's replace this big image. One last time, I'm going to import my build image. Then I'm going to wrap that image with build image. I'm going to paste in my public ID instead of my URL. I'm going to say I want to take that toURL.

[10:31] On the product page, we took this particular image down from 119 KB to 41. In review, images are something that can make or break performance. We want to make sure that we're serving as optimized of images as we can.

[10:45] Because we're already using Cloudinary for our images, we can take advantage of additional features such as auto-optimization, auto-formatting, and even resizing on the fly.

[10:54] Which means we're going to serve smaller images, which helps boost performance, avoid wasting bandwidth, and ideally helping boost our conversion.

https://app.egghead.io/api/v1/lessons/cloudinary-optimize-media-with-cloudinary-to-deliver-smaller-and-performant-images/transcript

https://app.egghead.io/api/v1/lessons/next-js-deploy-a-next-js-app-to-vercel-from-github-with-environment-variables/subtitles

Colby Fayock: [0:00] We've taken all the time we needed to prepare our store. Now let's get it out and deploy it to the world. To do this, we're going to use Vercel, who's actually the creators of Next.js.

[0:08] Where we're going to be able to have a development pipeline that's going to be able to build our project. It's even going to preview as it shows here. Then we're going to be able to deploy it to a CDN across the world, where people are going to be able to visit our store.

[0:20] To get started, you're going to want to have your repository up on that git provider of your choice. I'm using GitHub for this walkthrough. I know that Vercel also supports GitLab and Bitbucket, but really that's your choice.

[0:32] I prefer GitHub for my work. We want to take that repository, which we're going to sync up with Vercel, but we're going to deploy it. Once we're on Vercel, we're going to want to sign up for a free account. You can do so with either GitHub, GitLab, Bitbucket.

[0:46] Just like I mentioned, you're going to want to likely use the same account that you're using to host your repository on your git provider of choice. I'm going to use my existing account to deploy this application.

[0:57] If this is your first time using Vercel, you're likely not going to have all these projects inside here. Either way, we're going to want to create a new project for our new store. We're going to head over to new project.

[1:09] Here, we're going to want to scroll down and we're looking for this import git repository. We can see all of my projects here that are ready to import. We can see my Space Jelly Gear here, which is the one that I created, and I can easily hit import here.

[1:22] What I'm going to do is instead is, I'm going to copy that string and I'm going to paste it right into the search because that way we can search for any repository, where then we can click import. The next page is going to allow us to configure our application.

[1:34] Since we're using Next.js, we really don't need to do much. It's already going to configure all the build settings that we need to get this application out to the world. There is one caveat though.

[1:45] Currently, the way the application is set up is, we're just pasting in our Snipcart API key right inside of the application, which the API key for Snipcart is going to be public anyway. It's probably not that big of a deal.

[1:58] Especially because we're going to be juggling between a test API key and a live API key whenever this is deployed to the world. We likely want to use an environment variable to make sure that we don't have to worry about that.

[2:09] To get started, what we can do is create an environment variable for our Snipcart API key. Then later, we can push a change to use that environment variable. In this little tab called environment variables, I'm going to click and open it.

[2:21] I'm going to call this next_public_Snipcart_API_key. Snipcart API key is just the description of that. That can be whatever you want. It's important to make sure we have Next_public in the front of this.

[2:36] As this is going to tell Next.js that we want this key available inside of the actual front end of the application. Then over in Snipcart, we can grab our API key again. For now, I'm going to use the test one to make sure that we're not trying to do anything live yet. I'm going to grab that value, and head back over to Vercel. I'm going to paste that right into the value field.

[2:57] Then, I can click add and we can see that it's under that list. Now, we can click to play. At this point, Vercel's going to go grab our repository, pull it down onto its own infrastructure. It's going to build that project, install all the dependencies, and it's going to then try to deploy out to the world.

[3:13] Once it's done, Vercel shows us some awesome confetti, and we can even see a preview of our new project as a little image here. Then if we click that and open it, it's going to go in a new tab, where we can see that the site is now deployed to myspacejellygear.vercel.app.

[3:28] Let's take that a step further and create our environment variable for our Snipcart API key. Looking back inside of _document.js, this is where we added our Snipcart snippet, where we can see this data API key field.

[3:40] What we're going to want to do, is we're going to replace this API key value with our environment variable. In the root of our project, we're going to create a new file called .env.local. Where right inside is where we're going to add our environment variable.

[3:54] I'm going to write next public Snipcart rather, API key, where then, I can set it equal to that value. First, I'm going to copy that value and paste it in.

[4:07] Then, I can grab this environment variable name, and then I can replace this key with a dynamic value, where I'm going to enter process.env.my environment variable name, so process.env.nextpublicsnipcartapikey. If at this point your Dev server is already spun up, you want to make sure you restart it so that it can grab that environment variable.

[4:29] Then once we run your Dev, we can see that before it compiled, we have this info block that says that it loaded the environment from our .env.local. Then if we look in our browser at our local server, we can see that it's working as expected.

[4:43] If I click on the cart, we can see everything that I had before. We can commit that change, and once we push it out to GitHub, if we keep an eye on the Vercel dashboard, what's going to happen, is they're going to see that new commit and they're going to automatically build that branch specifically, because we pushed it to our main branch.

[5:02] Every time it has that new commit, it's going to deploy it to the production. We can see that it was successfully deployed with our new commit. If I head over to the site again and refresh, we can see that I'm going to have my shopping cart where it's not going to be the same shopping cart, because now we're on a different domain.

[5:19] If I click it, we can see that it is working, and I am successfully loading Snipcart. I can even scroll down at our products like the mug.

[5:27] Then head over to the product page, which we notice is really snappy because now it's deployed statically. Now we can add a cart from there, and we can see that we have all of our products, and we're ready to go with Snipcart.

[5:38] While I'm not going to walk through this flow, the cool thing about using a pipeline like Vercel is, if you use a different branch and create a pull request from that different branch, Vercel is going to create preview deployments for each and every one of those branches.

[5:51] That way, you can still see what it looks like deployed before you actually merge it into production, meaning it makes it a lot easier to debug. In review, we wanted to deploy our Space Jelly Gear store out to the world so people can come and buy our products.

[6:05] To do that, we used Vercel where we synced up our GitHub repository, which automatically took care of the entire process of both building our project and deploying it out to a CDN.

[6:16] To make sure that we have opportunity to be able to rotate our Snipcart API key, and so that we can have both a testing and production key, we set up an environment variable for Next public Snipcart API key.

[6:28] Where we set up that environment variable locally, as well as on Vercel when we were deploying. Now our store is deployed, and we can set it live whenever we're ready to go.

https://app.egghead.io/api/v1/lessons/next-js-deploy-a-next-js-app-to-vercel-from-github-with-environment-variables/transcript

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

Colby Fayock

Free Community Resource

Free Community Resource

Course Content