{"id":35303,"date":"2024-08-19T07:00:00","date_gmt":"2024-08-19T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=35303"},"modified":"2024-08-19T09:38:52","modified_gmt":"2024-08-19T16:38:52","slug":"optimize-visuals-composable-next-js-e-commerce-website","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/optimize-visuals-composable-next-js-e-commerce-website","title":{"rendered":"Optimize Your Visuals on a Composable Next.js E-commerce Website"},"content":{"rendered":"\n

In a composable website, functionality is broken down into independent components, allowing for better flexibility and scalability. This modular approach changes how websites are designed, developed, and maintained. By embracing composability, you build robust and adaptable systems that meet modern standards.<\/p>\n\n\n\n

In this post, you\u2019ll see how Cloudinary comfortably fits into the composable architecture by building a simple e-commerce store that serves and renders images from different sources using the Cloudinary<\/a> fetch feature<\/a>. Cloudinary takes care of fetching the image, applying optimizations on the fly, and delivering it.<\/p>\n\n\n\n

To follow along, you should know TypeScript or JavaScript on a basic level and have a Cloudinary account<\/a> (it\u2019s free!). <\/p>\n\n\n\n

The completed app is in this GitHub Repository<\/a>.<\/p>\n\n\n\n

Set Up a Next.js App<\/h2>\n\n\n\n

Run the command below to set up a Next.js app with any name you wish:<\/p>\n\n\n\n

$ npx create-next-app@latest <APPLICATION-NAME><\/code><\/p>\n\n\n\n

Select the options below in the process of setting up the app, or modify as you see fit:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Install the Cloudinary package with the command below:<\/p>\n\n\n

$ npm i cloudinary<\/code><\/span><\/pre>\n\n\n
Style the Application<\/h2>\n\n\n\n
Now that the app is set up, you can add some basic styles with the code below to make it more appealing. First, change the directory into the application by navigating to the page.module.css file and replace the boilerplate code with the code below:<\/p>\n\n\n
\n\/\/ src\/app\/page.module.css<\/span>\n\n.main {\n  display<\/span>: flex;\n  flex-direction: column;\n  justify-content: space-evenly;\n  width: 100<\/span>vw;\n  height: 100<\/span>vh;\n  align-items: center;\n}\n.product-area {\n  display<\/span>: flex;\n  flex-direction: row;\n  justify-content: space-evenly;\n  width: 800<\/span>px;\n  flex-wrap: wrap;\n  margin-top: 2<\/span>rem;\n}\n.main > h1 {\n  margin<\/span>: 3<\/span>rem 0<\/span>;\n}\n.card {\n  padding<\/span>: 1<\/span>rem;\n  margin: 0.2<\/span>rem;\n  width: 350<\/span>px;\n  border-radius: var<\/span>(--border-radius);\n  background: rgba(var<\/span>(--card-rgb), 0<\/span>);\n  border: 1<\/span>px solid rgba(var<\/span>(--card-border-rgb), 0.15<\/span>);\n}\n.card span {\n  display<\/span>: inline-block;\n  transition: transform 200<\/span>ms;\n}\n.card h2 {\n  font-weight: 600<\/span>;\n  margin-bottom: 0.7<\/span>rem;\n}\n.card p {\n  margin<\/span>: 0<\/span>;\n  opacity: 0.6<\/span>;\n  font-size: 0.9<\/span>rem;\n  line-height: 1.5<\/span>;\n  max-width: 30<\/span>ch;\n  text-wrap: balance;\n}\n.img {\n  width<\/span>: 100<\/span>%;\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Next, in the page.tsx<\/code> file, replace the boilerplate code with the code below. This code snippet is the app’s foundation. Later, you\u2019ll add image cards that display the images served and optimized by Cloudinary fetch.<\/p>\n\n\n
\n\/\/\/ src\/app\/page.tsx<\/span>\n\nimport<\/span> styles from<\/span> '.\/page.module.css'<\/span>;\n\nconst<\/span> Home: React.FC = ()<\/span> =><\/span> {\n  return<\/span> (\n    <div<\/span> className<\/span>={styles.main}<\/span>><\/span>\n      <h1<\/span>><\/span>My Pet Store!<\/h1<\/span>><\/span>\n      <div<\/span> className<\/span>={styles[<\/span>'product-area<\/span>']}><\/span>\n      <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n};\nexport<\/span> default<\/span> Home;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Set Up Environment Variables<\/h2>\n\n\n\n
Now that all the basic setup is done, you need to add the environment variables that will enable remote access to Cloudinary. To do this, add a new file, .env.local<\/code>, to your project\u2019s root directory and paste the code below in there. This file will house all the Cloudinary app keys you need.<\/p>\n\n\n
CLOUDINARY_CLOUD_NAME=<CLOUDINARY_CLOUD_NAME<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
After this setup, you can now work on the fetch and optimize functionality.<\/p>\n\n\n\n
Fetch and Optimize an Image<\/h2>\n\n\n\n
To fetch and optimize images, you will first need to set up a reusable image component that will house all the functionality for fetching and applying image transformations to individual images.<\/p>\n\n\n\n
Set Up the Image Component<\/h3>\n\n\n\n
Add a new folder in the src<\/code> directory and call it components. In the components folder<\/code>, add a new file called image-card.tsx<\/code>. In the image-card.tsx<\/code> file, paste the code below; this code snippet defines a React component, ImageComponent<\/code>, that takes in prop values and constructs the Cloudinary fetch URL using these props to render an image with specified transformations applied.<\/p>\n\n\n
\nimport<\/span> React from<\/span> 'react'<\/span>;\nimport<\/span> styles from<\/span> '..\/app\/page.module.css'<\/span>;\n\nconst<\/span> cloudinaryFetchUrl = (\n  imageUrl: string,\n  transformations<\/span>: string\n): string<\/span> =><\/span> {\n  const<\/span> cloudName: string | undefined<\/span> = process.env.CLOUDINARY_CLOUD_NAME;\n  const<\/span> encodedImageUrl: string = encodeURIComponent<\/span>(imageUrl);\n  return<\/span> `https:\/\/res.cloudinary.com\/${cloudName}<\/span>\/image\/fetch\/${transformations}<\/span>\/${encodedImageUrl}<\/span>`<\/span>;\n};\n\ninterface ImageComponentProps {\n  src<\/span>: string;\n  alt: string;\n  transformations: string;\n}\n\nconst<\/span> ImageComponent: React.FC<ImageComponentProps> = ({\n  src,\n  alt,\n  transformations,\n}) => {\n  const<\/span> imageUrl = cloudinaryFetchUrl(src, transformations);\n  return<\/span> (\n    <img<\/span>\n      className<\/span>={styles.img}<\/span>\n      src<\/span>={imageUrl}<\/span>\n      alt<\/span>={alt}<\/span>\n    \/><\/span><\/span>\n  );\n};\nexport<\/span> default<\/span> ImageComponent;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
In the function, two variables are declared in the cloudinaryFetchUrl function: the cloud_name variable<\/code>, which retrieves the Cloudinary cloud name from environment variables, and encodedImageUrl<\/code>, which encodes the image URL to make it safe.<\/p>\n\n\n\n
Next, the ImageComponentProps<\/code> interface defines the props that the ImageComponent<\/code> functional component will accept: src<\/code>, alt<\/code>, and transformations<\/code>. In the ImageComponent<\/code>, the cloudinaryFetchUrl<\/code> function is called with src<\/code> and transformations<\/code> to generate the Cloudinary image URL, and then the image is returned.<\/p>\n\n\n\n
This component decouples the image source from the optimization process. The app doesn’t need to know where the image is hosted. Cloudinary\u2019s fetch function leverages this existing source without re-hosting the image, applying optimizations, and delivering it. This means the original image remains unaltered. This separation of concerns allows for independent updates.<\/p>\n\n\n\n
Display the Optimized Image<\/h3>\n\n\n\n
First, you will need to set up some test data. The test data will be an array of objects holding four images and the transformation for each image.<\/p>\n\n\n
Note:<\/strong> 
In a production application, this data can come from an image storage service or a content management system.<\/p>\n<\/div>\n\n\n
To do this, in the src folder, add a new folder called lib; in the lib folder, add a new file called data.ts<\/code>. In the data.ts<\/code> file, add the code that defines the images and their various transformations:<\/p>\n\n\n
\nexport<\/span> const<\/span> products: ProductInfo[] = [\n  {\n    name<\/span>: 'Dog Lease'<\/span>,\n    price<\/span>: 100<\/span>,\n    imageUrl<\/span>:\n      'https:\/\/cloudinary-app.s3.amazonaws.com\/pexels-blue-bird-7210748.jpg'<\/span>,\n    transformation<\/span>:\n      'w_400,h_400,c_scale,q_100,e_auto_brightness,e_auto_color:80'<\/span>,\n  },\n  {\n    name<\/span>: 'Dog Food'<\/span>,\n    price<\/span>: 100<\/span>,\n    imageUrl<\/span>:\n      'https:\/\/cloudinary-app.s3.amazonaws.com\/pexels-mart-production-8434641.jpg'<\/span>,\n    transformation<\/span>:\n      'w_400,h_400,c_scale,q_100,e_auto_brightness,e_auto_color:80'<\/span>,\n  },\n  {\n    name<\/span>: 'Backpack Carrier'<\/span>,\n    price<\/span>: 200<\/span>,\n    imageUrl<\/span>:\n      'https:\/\/images.pexels.com\/photos\/8358908\/pexels-photo-8358908.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'<\/span>,\n    transformation<\/span>:\n      'w_400,h_400,c_scale,q_100,e_auto_brightness,e_auto_color:80'<\/span>,\n  },\n  {\n    name<\/span>: 'Dog Toy'<\/span>,\n    price<\/span>: 300<\/span>,\n    imageUrl<\/span>:\n      'https:\/\/images.pexels.com\/photos\/20843208\/pexels-photo-20843208\/free-photo-of-dog-with-toy-on-a-brick-pavement.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'<\/span>,\n    transformation<\/span>:\n      'w_400,h_400,c_scale,q_100,e_auto_brightness,e_auto_color:80'<\/span>,\n  },\n];\n\nexport<\/span> interface ProductInfo {\n  name<\/span>: string;\n  price: number;\n  imageUrl: string;\n  transformation: string;\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
In the code above, an array named products contains four objects. Each object represents a single product and includes name<\/code>, price<\/code>, imageUrl<\/code>, and transformation<\/code> properties. The first two products have images hosted on Amazon AWS, while the last two use stock images hosted on images.pexels.com. All products conform to the ProductInfo<\/code> interface, which defines the structure of each product object.<\/p>\n\n\n\n
All the images use similar transformations. Here\u2019s a detailed explanation of the transformation:<\/p>\n\n\n\n
To get your cloud name, navigate to your Cloudinary developer dashboard<\/a>,where you\u2019ll see it under the Product Environment Credentials<\/strong> section.<\/p>\n\n\n\n