{"id":28474,"date":"2022-03-24T21:14:00","date_gmt":"2022-03-24T21:14:00","guid":{"rendered":"http:\/\/building-a-clothing-store-app"},"modified":"2022-03-24T21:14:00","modified_gmt":"2022-03-24T21:14:00","slug":"building-a-clothing-store-app","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/","title":{"rendered":"Building a Clothing Store App"},"content":{"rendered":"

When you\u2019re building an online shopping platform, you want to make sure that everything loads quickly for your potential customers. One huge factor that slows down many e-commerce sites is loading images. When you have hundreds of product images loading on a page at the same time, it can create a frustrating user experience as people wait to see how things look.<\/p>\n

In this article, we\u2019re going to build a simple clothing store to demonstrate how you can make fast-loading pages. We\u2019ll be working with Next.js for the front-end and back-end of the app and we\u2019ll be using Cloudinary as the image host.<\/p>\n

Setting up the Next app<\/h2>\n

Let\u2019s start by generating a Next.js app. Open your terminal and run this command. It\u2019ll generate all of the files you need for a Typescript Next app.<\/p>\n

$ yarn create next-app --typescript\n<\/code><\/span><\/pre>\n
At some point, you\u2019ll be prompted to enter the name of the project. The one we\u2019ll be working with is called tienda-de-ropa<\/code>, but feel free to name it anything you like. After you set the name, the downloads will start and the project files will be created.<\/p>\n
Most of our work will be in the pages<\/code> folder because this is where we\u2019ll add the pages that users will interact with on the online store.<\/p>\n
Let\u2019s install a few packages before we get too far ahead of ourselves.<\/p>\n
$ yarn add typescript ts-node @types\/node @prisma\/client prisma styled-components\n<\/code><\/span><\/pre>\n
Setting up Prisma and a Postgres database<\/h2>\n
Before we get to that though, we\u2019re going to be pulling items from a Postgres database and using Prisma to do so. If you don\u2019t have Postgres installed locally, go ahead and download it here<\/a> and get set up. You should create a new database called tienda-de-ropa<\/code> so that we can connect to it immediately.<\/p>\n
Now we need to get Prisma set up in our app. We\u2019ll start by adding a new file to the root of the project called prisma.ts<\/code>. This will handle the Prisma client we need to interact with and keep our app from having issues due to database connection limits. Inside of this file, add the following code:<\/p>\n
import<\/span> { PrismaClient } from<\/span> \"@prisma\/client\"<\/span>;\n\nlet<\/span> prisma: PrismaClient\n\nif<\/span> (process.env.NODE_ENV === 'production'<\/span>) {\n  prisma = new<\/span> PrismaClient()\n} else<\/span> {\n  if<\/span> (!global.prisma) {\n    global.prisma = new<\/span> PrismaClient()\n  }\n  prisma = global.prisma\n}\nexport<\/span> default<\/span> prisma\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
That\u2019s not the only new thing we\u2019ll be adding to this project to get Prisma working. In the root directory, add a new folder called prisma<\/code>. Inside the new sub-folder, add a file named schema.prisma<\/code>. This will hold the database schema and the instructions that tell Prisma how to connect to Postgres. Open this file and add the following code:<\/p>\n
generator client {\n    provider = \"prisma-client-js\"<\/span>\n}\n\ndatasource db {\n    provider = \"postgresql\"<\/span>\n    url      = \"postgres:\/\/usernamer:password@localhost:5432\/tienda-de-ropa\"<\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This code defines how Prisma connects to Postgres by defining the database provider type and the connection string. Make sure to update the username<\/code> and password<\/code> to your own values. Since we have the connection established, it\u2019s time to create the model for our products. Below the code we just wrote, add this model definition:<\/p>\n
model Product {\n    id          String<\/span> @id @default<\/span>(uuid())\n    name        String<\/span>\n    category    String<\/span>\n    price       Float\n    image       String<\/span>\n    description String<\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
To have some product data to work with, we\u2019ll seed the database with a few different products.<\/p>\n
Seeding the database<\/h3>\n
Create a new file in the prisma<\/code> directory called seed.ts<\/code>. This is the standard file name you\u2019ll see when working with Prisma seed data. In this file, we\u2019ll add the following code and then discuss what\u2019s happening:<\/p>\n
import<\/span> { PrismaClient, Prisma } from<\/span> '@prisma\/client'<\/span>\n\nconst<\/span> prisma = new<\/span> PrismaClient()\n\nconst<\/span> products: Prisma.ProductCreateInput[] = [\n  {\n      name<\/span>: 'Blue Shirt'<\/span>,\n      category<\/span>: 'Tops'<\/span>,\n      price<\/span>: 29.99<\/span>,\n      image<\/span>: 'https:\/\/res.cloudinary.com\/milecia\/image\/upload\/v1606580778\/3dogs.jpg'<\/span>,\n      description<\/span>: 'Blue shirt with dog print'<\/span>\n  },\n  {\n      name<\/span>: 'Taupe Pants'<\/span>,\n      category<\/span>: 'Bottoms'<\/span>,\n      price<\/span>: 59.99<\/span>,\n      image<\/span>: 'https:\/\/res.cloudinary.com\/milecia\/image\/upload\/v1606580780\/beach-boat.jpg'<\/span>,\n      description<\/span>: 'Ankle length pants'<\/span>\n  },\n  {\n      name<\/span>: 'Black Patent Leather Oxfords'<\/span>,\n      category<\/span>: 'Shoes'<\/span>,\n      price<\/span>: 99.99<\/span>,\n      image<\/span>: 'https:\/\/res.cloudinary.com\/milecia\/image\/upload\/v1606580772\/dessert.jpg'<\/span>,\n      description<\/span>: 'Ankle high dress shoes'<\/span>\n  }\n]\n\nasync<\/span> function<\/span> main<\/span>(<\/span>) <\/span>{\n  console<\/span>.log(`Start seeding ...`<\/span>)\n  for<\/span> (const<\/span> p of<\/span> products) {\n    const<\/span> product = await<\/span> prisma.product.create({\n      data<\/span>: p,\n    })\n    console<\/span>.log(`Created product with id: ${product.id}<\/span>`<\/span>)\n  }\n  console<\/span>.log(`Seeding finished.`<\/span>)\n}\n\nmain()\n  .catch((e<\/span>) =><\/span> {\n    console<\/span>.error(e)\n    process.exit(1<\/span>)\n  })\n  .finally(async<\/span> () => {\n    await<\/span> prisma.$disconnect()\n  })\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We start off by importing a few objects from the Prisma client package and setting up an instance of the client. Then we create a typed array for the products we want to add to the database. If you have images in Cloudinary already, you should definitely replace these example images with your own.<\/p>\n
Then we have a main<\/code> function that will add all of these products to the Product<\/code> table we defined in our schema file. Finally, we\u2019ll call the main<\/code> function to execute the seeding and then disconnect from the database if there are no errors. That\u2019s all the code we need for seeding this data.<\/p>\n
There\u2019s one more tiny thing we need to do before we can run a migration to put the schema and seed data in the tienda-de-ropa<\/code> database. Since this is a Typescript project, that means we need to be more explicit about how the app should handle seeding the data in the migration.<\/p>\n
We need to add a small script to the package.json<\/code> so everything runs smoothly. Open this file and add the following code below your devDependencies<\/code>:<\/p>\n
\"prisma\"<\/span>: {\n    \"seed\"<\/span>: \"ts-node --compiler-options {\\\"module\\\":\\\"CommonJS\\\"} prisma\/seed.ts\"<\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This will help us avoid any errors due to Typescript interfacing with regular JavaScript packages. Now we can run the migration. Open your terminal and run the following command:<\/p>\n
$ npx prisma migrate dev\n<\/code><\/span><\/pre>\n
You will be prompted for a name for this migration and then it will create the database schema in Postgres and add your seed data to it. Now that we have the data side of the app set up, we can jump over to the front-end and get a few pages up.<\/p>\n
Making the product listing page<\/h2>\n
Like most online stores, we\u2019re going to have a few pages. There will be a page that displays all of the products, individual product pages, and a cart that shows customers all of the items they\u2019ve selected. Keep in mind that this is just a demo so there\u2019s a lot<\/em> of functionality, styles, and other considerations that could be added.<\/p>\n
Let\u2019s start by making a page that displays all of the products. Adding a new route in NextJS means adding a new file to the pages<\/code> directory. So we\u2019re going to add a file called products<\/code>. Open this new file and add the following code.<\/p>\n
import<\/span> Image from<\/span> 'next\/image'<\/span>;\nimport<\/span> Link from<\/span> 'next\/link'<\/span>\nimport<\/span> styled from<\/span> 'styled-components'<\/span>\nimport<\/span> prisma from<\/span> '..\/prisma'<\/span>\n\ninterface Product {\n    id<\/span>: string\n    name<\/span>: string\n    category<\/span>: string\n    price<\/span>: number\n    image<\/span>: string\n    description<\/span>: string\n}\n\nfunction<\/span> Products<\/span>(<\/span>) <\/span>{\n    return<\/span> <div<\/span>><\/span>Products<\/div<\/span>><\/span><\/span>\n}\n\nexport<\/span> default<\/span> Products\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We\u2019ve added all of the imports we need for this specific file and we\u2019ve defined the type for the product data we\u2019ll receive from the database. We\u2019ve also added the Products<\/code> component that will get rendered on the page. If you run the app now with yarn dev<\/code>, you\u2019ll just see the \u201cProducts\u201d text on the page.<\/p>\n
Next let\u2019s add a few styled components so that the app has a bit of organization. Right below the product type definition, add this code:<\/p>\n
const<\/span> HoverCard = styled.div`\n    margin: 12<\/span>px;\n    padding: 12<\/span>px;\n    width: 30<\/span>%;\n\n    &:hover {\n        border: 1<\/span>px solid #c4c4c4;<\/span>\n        cursor: pointer;\n    }\n`\n\nconst<\/span> ToCart = styled.div`\n    border: 1<\/span>px solid #c4c4c4;<\/span>\n    background-color: #abacab;<\/span>\n    width: 150<\/span>px;\n`\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
The HoverCard<\/code> element will be used to display some overview info about each product and if you click on one of them, you\u2019ll be redirected to the individual product page that has all of the details about that product. The ToCart<\/code> element will wrap the link to the current user cart so that it looks more button-like instead of like a link. We do this because NextJS has a specific element to handle links.<\/p>\n
Getting data using the getStaticProps function<\/h3>\n
NextJS does a great job at server-side rendering, so that means we don\u2019t have to worry about sensitive info leaking even though we are going to fetch data directly from the database. Any code defined in the getStaticProps<\/code> function is executed at build time on the server-side.<\/p>\n
To get all of the products from the database, add the following code just above the export statement line:<\/p>\n
export<\/span> async<\/span> function<\/span> getStaticProps<\/span>(<\/span>) <\/span>{\n    const<\/span> products = await<\/span> prisma.product.findMany()\n    \n    return<\/span> {\n        props<\/span>: {\n            products,\n        },\n    }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This code lets us connect to the database directly through our Prisma client and we get all of the product records available. Then we return this product data as a prop to the Products<\/code> component. So let\u2019s start filling in the code for that component now that we have the data.<\/p>\n
Wrapping up the products page<\/h3>\n
With our data readily available, let\u2019s use it to display the shop\u2019s products to potential customers. Update your Products<\/code> component to match the following code:<\/p>\n
function<\/span> Products<\/span>({ products }<\/span>) <\/span>{\n    return<\/span> (\n        <div<\/span> style<\/span>={{<\/span> margin:<\/span> '24px<\/span>' }}><\/span>\n            <h1<\/span>><\/span>Everything in the store<\/h1<\/span>><\/span>\n            <div<\/span> style<\/span>={{<\/span> display:<\/span> 'flex<\/span>' }}><\/span>\n                {\n                    products.map((product: Product) => (\n                        <Link<\/span>\n                            passHref<\/span>\n                            key<\/span>={product.name}<\/span>\n                            href<\/span>={<\/span>`\/product<\/span>\/${encodeURIComponent<\/span>(product.id<\/span>)}`}\n                        ><\/span>\n                            <HoverCard<\/span>><\/span>\n                                <Image<\/span> src<\/span>={product.image}<\/span> alt<\/span>={product.description}<\/span> height<\/span>={250}<\/span> width<\/span>={250}<\/span> \/><\/span>\n                                <h2<\/span>><\/span>{product.name}<\/h2<\/span>><\/span>\n                                <p<\/span>><\/span>{product.category}<\/p<\/span>><\/span>\n                            <\/HoverCard<\/span>><\/span>\n                        <\/Link<\/span>><\/span>\n                    ))\n                }\n            <\/div<\/span>><\/span>\n            <Link<\/span> passHref<\/span> href<\/span>={<\/span>`\/cart<\/span>`}><\/span>\n                <ToCart<\/span>><\/span>Go to Cart<\/ToCart<\/span>><\/span>\n            <\/Link<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n    )\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Thankfully, this component is relatively simple because it only has one set of data to work with and the elements are already defined for us. There\u2019s a styled div<\/code> that wraps everything and we have a small heading for the page. Then we get to the most important part of this component, where we actually display the data we pulled from the database.<\/p>\n
In the div<\/code> with the flex style, we take the products<\/code> prop that was passed in from the getStaticProps<\/code> function and map it to the different elements. First, we have a link that routes to the individual product pages based on the product id.<\/p>\n
Within that Link<\/code>, we display the product image, name, and category so that customers can quickly find what they need. The last element we have is a link to the cart so that customers can see what they\u2019ve decided to purchase. Take a moment to run the app and navigate to the \/products<\/code> route. You should see something similar to this:<\/p>\n
\"products<\/p>\n
Now the customers can see all of the products, we need to work on the individual product pages.<\/p>\n
Adding the product page<\/h2>\n
NextJS uses the folder structure in the pages<\/code> directory to determine how to handle nested routes. To make the individual product pages, we\u2019ll use the product id as the differentiator. Let\u2019s add a couple of new folders and a file to the pages<\/code> directory.<\/p>\n
Start by adding a folder named product<\/code>. This will create a new route like \/product<\/code>. Inside of this folder, add another folder named [id]<\/code>. This is how NextJS does dynamic routing. So this gives us routes like, \/product\/[id]<\/code> where id<\/code> is the product id getting passed from the products page.<\/p>\n
Inside the [id]<\/code> folder, create a new file called index.tsx<\/code>. This is where we\u2019ll make the component for a single product. Go ahead and open this file and add the following code:<\/p>\n
import<\/span> Image from<\/span> 'next\/image'<\/span>\nimport<\/span> Link from<\/span> 'next\/link'<\/span>\nimport<\/span> styled from<\/span> 'styled-components'<\/span>\nimport<\/span> prisma from<\/span> '..\/..\/..\/prisma'<\/span>\n\nconst<\/span> Back = styled.div`\n    border: 1px solid #c4c4c4;\n    background-color: #abacab;\n    width: 150px;\n`<\/span>\n\nfunction<\/span> Product<\/span>(<\/span>) <\/span>{\n    return<\/span> ()\n}\n\nexport<\/span> default<\/span> Product\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We\u2019re bringing in the imports like normal and making another styled component to wrap the link back to the products page and we have the outline of the Product<\/code> component we\u2019ll display on the page.<\/p>\n
Now we need to fetch the data for a particular product based on the id parameter that\u2019s passed in the URL.<\/p>\n
Retrieving data with getServerSideProps<\/h3>\n
Since this data will need to be retrieved on each request because there will be different products being displayed, we\u2019ll use the getServerSideProps<\/code> function instead of the getStaticProps<\/code> function.<\/p>\n
All of the data fetching will still happen server-side, it will just happen each time this route is requested. So just above the export statement, add the following code:<\/p>\n
export<\/span> async<\/span> function<\/span> getServerSideProps<\/span>(context<\/span>) <\/span>{\n    const<\/span> id = context.params.id\n\n    const<\/span> product = await<\/span> prisma.product.findUnique({\n        where<\/span>: { id }\n    })\n\n    return<\/span> {\n        props<\/span>: {\n            product,\n        },\n    }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Because this page uses dynamic routing, we are using the context<\/code> parameter to get the params<\/code> from the route parameters. So since our page is in the [id]<\/code> folder, we\u2019ll be able to get the product id from this context<\/code> object. Then we make a call to the database using the Prisma client to get the specific product based on its id and we pass the product data to the component as a prop.<\/p>\n
Filling in the product component<\/h3>\n
This component will render the image, name, price, and category for the specified product and there will be a button to add the item to a customer\u2019s cart. There are a number of ways to manage cart items, but if you take a look in the developer tools on your favorite store\u2019s website, you\u2019ll likely see an array is stored in the local storage. We\u2019ll take that approach here.<\/p>\n
Let\u2019s start by adding a function inside of the Product<\/code> component that handles products being added to the cart. Update your existing Product<\/code> component with the following code:<\/p>\n
function<\/span> Product<\/span>({ product }<\/span>) <\/span>{\n    function<\/span> addToCart<\/span>(<\/span>) <\/span>{\n        let<\/span> arr = []\n\n        const<\/span> existingItems = window<\/span>.localStorage.getItem('lineItems'<\/span>)\n\n        if<\/span> (existingItems != null<\/span>) {\n            arr = JSON<\/span>.parse(existingItems)\n        }\n\n        const<\/span> itemForCart = {\n            name<\/span>: product.name,\n            price<\/span>: product.price,\n            imageUrl<\/span>: product.image\n        }\n\n        arr.push(itemForCart)\n\n        window<\/span>.localStorage.setItem('lineItems'<\/span>, JSON<\/span>.stringify(arr))\n    }\n\n    return<\/span> ()\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
You can see that we are using that product<\/code> prop returned from the getServerSideProps<\/code> call. Then we create the addToCart<\/code> function that checks the local storage for any existing cart items and it will push this current product to the cart when a customer clicks the button we\u2019ll add shortly. This is how we can preserve the cart items as customers navigate around the site.<\/p>\n
Now we\u2019re ready to add the customer-facing functionality. Update the existing return statement with the following code:<\/p>\n
return<\/span> (\n    <><\/span>\n        <div<\/span> style<\/span>={{<\/span> display:<\/span> 'flex<\/span>', justifyContent:<\/span> 'space-evenly<\/span>' }}><\/span>\n            <Image<\/span> src<\/span>={product.image}<\/span> alt<\/span>={product.description}<\/span> height<\/span>={250}<\/span> width<\/span>={250}<\/span> \/><\/span>\n            <div<\/span> style<\/span>={{<\/span> width:<\/span> '30<\/span>%' }}><\/span>\n                <h2<\/span>><\/span>{product.name}<\/h2<\/span>><\/span>\n                <p<\/span>><\/span>{product.category}<\/p<\/span>><\/span>\n                <p<\/span>><\/span>$ {product.price}<\/p<\/span>><\/span>\n                <button<\/span> onClick<\/span>={addToCart}<\/span>><\/span>Add to cart<\/button<\/span>><\/span>\n            <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n        <Link<\/span> passHref<\/span> href<\/span>={<\/span>`\/products<\/span>`}><\/span>\n            <Back<\/span>><\/span>Back to Products<\/Back<\/span>><\/span>\n        <\/Link<\/span>><\/span>\n    <\/><\/span><\/span>\n)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This will display all of the product info we discussed earlier along with a button to add the product to the cart and a link back to the products page. If you aren\u2019t running the app, start it back up with yarn dev<\/code>, click on one of the products from the page that has all of the products, and you should see something similar to this.<\/p>\n
\"an<\/p>\n
You\u2019ll also see a URL similar to this: http:\/\/localhost:3000\/product\/62b6e542-33dd-4e88-98a0-c781c970e317<\/code> It has the product id we\u2019re using in that data request.<\/p>\n
Go ahead and add the current product to the cart because we\u2019re about to make the page for it and having some data there will help.<\/p>\n
Making the cart page<\/h2>\n
This is the last page for this app so we\u2019re almost there! Remember that we have the button to go to the cart on the products page. You could definitely add this button to the individual product pages if you like.<\/p>\n
For now, let\u2019s work on this cart page. Add a new file to the pages<\/code> directory called cart.tsx<\/code> and add the following:<\/p>\n
import<\/span> Image from<\/span> 'next\/image'<\/span>\nimport<\/span> Link from<\/span> 'next\/link'<\/span>\nimport<\/span> styled from<\/span> 'styled-components'<\/span>\n\nconst<\/span> Back = styled.div`\n    border: 1px solid #c4c4c4;\n    background-color: #abacab;\n    width: 150px;\n`<\/span>\n\nconst<\/span> CartItem = styled.div`\n    border: 1px solid #c4c4c4;\n    display: flex;\n    height: 100px;\n    justify-content: space-between;\n    margin: 12px;\n    padding: 24px;\n`<\/span>\n\nconst<\/span> Container = styled.div`\n    margin: 24px;\n    padding: 12px;\n`<\/span>\n\ninterface CartItem {\n    name<\/span>: string\n    price<\/span>: number\n    imageUrl<\/span>: string\n}\n\nfunction<\/span> Cart<\/span>(<\/span>) <\/span>{\n    return<\/span> ()\n}\n\nexport<\/span> default<\/span> Cart\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This brings in all the imports we need, some styled components to bring a bit of organization to the list of items in the cart, and the type definition for the data we\u2019ll be handling. Since the cart items are stored in the browser\u2019s local storage, we don\u2019t need to request anything from the database on this page.<\/p>\n
All that\u2019s left is getting the items from local storage and using our styled components to display them to the customers. So update the component with this code to get those items and handle the render state accordingly:<\/p>\n
function<\/span> Cart<\/span>(<\/span>) <\/span>{\n    let<\/span> cartItems\n\n    if<\/span> (typeof<\/span> window<\/span> !== \"undefined\"<\/span>) {\n        cartItems = window<\/span>.localStorage.getItem('lineItems'<\/span>)\n    }\n\n    if<\/span> (!cartItems) {\n        return<\/span> <div<\/span>><\/span>No items in the cart<\/div<\/span>><\/span><\/span>\n    }\n\n    const<\/span> parsedCartItems = JSON<\/span>.parse(cartItems)\n\n    return<\/span>()\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This code will check the local storage for any cart items and if there aren\u2019t any, we\u2019ll render a message to the customer that the cart is empty. Otherwise, we\u2019ll parse the cart items so we can use the data. Now let\u2019s update that empty return statement to render all of those cart items:<\/p>\n
return<\/span> (\n    <Container<\/span>><\/span>\n        <h2<\/span>><\/span>Tu Carrito<\/h2<\/span>><\/span>\n            {\n                parsedCartItems.map((item: CartItem) => (\n                    <CartItem<\/span> key<\/span>={item.name}<\/span>><\/span>\n                        <div<\/span>><\/span>Name: {item.name}<\/div<\/span>><\/span>\n                        <div<\/span>><\/span>Price: {item.price}<\/div<\/span>><\/span>\n                        <Image<\/span> src<\/span>={item.imageUrl}<\/span> alt<\/span>={item.name}<\/span> height<\/span>={100}<\/span> width<\/span>={100}<\/span> \/><\/span>\n                    <\/CartItem<\/span>><\/span>\n                ))\n            }\n        <Link<\/span> passHref<\/span> href<\/span>={<\/span>`\/products<\/span>`}><\/span>\n            <Back<\/span>><\/span>Back to Products<\/Back<\/span>><\/span>\n        <\/Link<\/span>><\/span>\n    <\/Container<\/span>><\/span><\/span>\n)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We have a page header so that the customer knows they\u2019re on the cart page. Then we take all of the cart items and map the data to our CartItem<\/code> styled component. This will create a styled list view of all the items. After we show all of the items, then we have a button to go back to the products page. This is a good place to add a button to some check-out functionality and that will likely require some third-party service.<\/p>\n
At this point, run the app again and add a few items to the cart from their respective product pages. Then navigate to the \/cart<\/code> route and you\u2019ll see something like this.<\/p>\n
\"all<\/p>\n
Now the app has common pages that customers will go to in any online store! This can be cleaned up and turned into a full-fledged online store app that renders images quickly.<\/p>\n
Finished code<\/h2>\n
If you want to check out the full repo, you can find the complete code in here<\/a>.<\/p>\n
Or you can check out the non-database code in this Code Sandbox<\/a>.<\/p>\n
<CodeSandBox\ntitle=\u201csleepy-banach-y92t8y\u201d\nid=\u201csleepy-banach-y92t8y\u201d\n\/><\/p>\n
Conclusion<\/h2>\n
Making a fast-loading online store is essential to getting customers to stay on your site. Waiting on images or pages to load will deter people from sticking around and it can cause your existing customers to look for other options. Using server-side rendering can help improve your customer experience and make your app more secure, so make sure it\u2019s a consideration before you build!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28475,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,212,371],"class_list":["post-28474","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-next-js","tag-under-review"],"acf":[],"yoast_head":"\nBuilding a Clothing Store App<\/title>\n<meta name=\"description\" content=\"There are a lot of considerations that go into building an online store. Things like security and user experience are at the top of that list. In this tutorial, we'll take a look at doing server-side rendering with NextJS to help address both of these concerns.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a Clothing Store App\" \/>\n<meta property=\"og:description\" content=\"There are a lot of considerations that go into building an online store. Things like security and user experience are at the top of that list. In this tutorial, we'll take a look at doing server-side rendering with NextJS to help address both of these concerns.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-24T21:14:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924344\/Web_Assets\/blog\/99bdccae11d2c2b2104a1a187ff0ca8ac8211201-5472x3648-1_284753fda3\/99bdccae11d2c2b2104a1a187ff0ca8ac8211201-5472x3648-1_284753fda3.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"5472\" \/>\n\t<meta property=\"og:image:height\" content=\"3648\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Building a Clothing Store App\",\"datePublished\":\"2022-03-24T21:14:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924344\/Web_Assets\/blog\/99bdccae11d2c2b2104a1a187ff0ca8ac8211201-5472x3648-1_284753fda3\/99bdccae11d2c2b2104a1a187ff0ca8ac8211201-5472x3648-1_284753fda3.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Next.js\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/\",\"name\":\"Building a Clothing Store App\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924344\/Web_Assets\/blog\/99bdccae11d2c2b2104a1a187ff0ca8ac8211201-5472x3648-1_284753fda3\/99bdccae11d2c2b2104a1a187ff0ca8ac8211201-5472x3648-1_284753fda3.jpg?_i=AA\",\"datePublished\":\"2022-03-24T21:14:00+00:00\",\"description\":\"There are a lot of considerations that go into building an online store. Things like security and user experience are at the top of that list. In this tutorial, we'll take a look at doing server-side rendering with NextJS to help address both of these concerns.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924344\/Web_Assets\/blog\/99bdccae11d2c2b2104a1a187ff0ca8ac8211201-5472x3648-1_284753fda3\/99bdccae11d2c2b2104a1a187ff0ca8ac8211201-5472x3648-1_284753fda3.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924344\/Web_Assets\/blog\/99bdccae11d2c2b2104a1a187ff0ca8ac8211201-5472x3648-1_284753fda3\/99bdccae11d2c2b2104a1a187ff0ca8ac8211201-5472x3648-1_284753fda3.jpg?_i=AA\",\"width\":5472,\"height\":3648},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a Clothing Store App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building a Clothing Store App","description":"There are a lot of considerations that go into building an online store. Things like security and user experience are at the top of that list. In this tutorial, we'll take a look at doing server-side rendering with NextJS to help address both of these concerns.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/","og_locale":"en_US","og_type":"article","og_title":"Building a Clothing Store App","og_description":"There are a lot of considerations that go into building an online store. Things like security and user experience are at the top of that list. In this tutorial, we'll take a look at doing server-side rendering with NextJS to help address both of these concerns.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-24T21:14:00+00:00","og_image":[{"width":5472,"height":3648,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924344\/Web_Assets\/blog\/99bdccae11d2c2b2104a1a187ff0ca8ac8211201-5472x3648-1_284753fda3\/99bdccae11d2c2b2104a1a187ff0ca8ac8211201-5472x3648-1_284753fda3.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/"},"author":{"name":"","@id":""},"headline":"Building a Clothing Store App","datePublished":"2022-03-24T21:14:00+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/"},"wordCount":5,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924344\/Web_Assets\/blog\/99bdccae11d2c2b2104a1a187ff0ca8ac8211201-5472x3648-1_284753fda3\/99bdccae11d2c2b2104a1a187ff0ca8ac8211201-5472x3648-1_284753fda3.jpg?_i=AA","keywords":["Guest Post","Image","Next.js","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/","name":"Building a Clothing Store App","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924344\/Web_Assets\/blog\/99bdccae11d2c2b2104a1a187ff0ca8ac8211201-5472x3648-1_284753fda3\/99bdccae11d2c2b2104a1a187ff0ca8ac8211201-5472x3648-1_284753fda3.jpg?_i=AA","datePublished":"2022-03-24T21:14:00+00:00","description":"There are a lot of considerations that go into building an online store. Things like security and user experience are at the top of that list. In this tutorial, we'll take a look at doing server-side rendering with NextJS to help address both of these concerns.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924344\/Web_Assets\/blog\/99bdccae11d2c2b2104a1a187ff0ca8ac8211201-5472x3648-1_284753fda3\/99bdccae11d2c2b2104a1a187ff0ca8ac8211201-5472x3648-1_284753fda3.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924344\/Web_Assets\/blog\/99bdccae11d2c2b2104a1a187ff0ca8ac8211201-5472x3648-1_284753fda3\/99bdccae11d2c2b2104a1a187ff0ca8ac8211201-5472x3648-1_284753fda3.jpg?_i=AA","width":5472,"height":3648},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-clothing-store-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building a Clothing Store App"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924344\/Web_Assets\/blog\/99bdccae11d2c2b2104a1a187ff0ca8ac8211201-5472x3648-1_284753fda3\/99bdccae11d2c2b2104a1a187ff0ca8ac8211201-5472x3648-1_284753fda3.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28474"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28474\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28475"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28474"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28474"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
The model has a few fields that are commonly seen in online stores, but feel free to add any other fields you like! We\u2019re going to take advantage of NextJS doing server-side rendering and not worry about building a back-end. You can extend this app and add some back-end functionality with NextJS API routes<\/a>, but that\u2019ll be out of the scope of this post.<\/p>\n