Publishing example examples/v7-nextjs

README.md

@@ -0,0 +1,41 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) and powered by [Edgio](https://edg.io).
+
+## Getting Started
+
+### Install Packages
+
+```bash
+npm install
+```
+
+### Local Development Server
+
+```bash
+npm run edgio:dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+This project also uses the Next.js Image component which Edgio automatically optimizes and serves images using the Edgio Image Optimization feature.
+
+## Learn More
+
+To learn more about Edgio, take a look at the following resources:
+
+- [Edgio Documentation](https://docs.edg.io) - learn about Edgio features
+
+## Deploy on Edgio
+
+Deploy this project on Edgio with the following command:
+
+```bash
+npm run edgio:deploy
+```
+
+Check out our [Next.js documentation](https://docs.edg.io/guides/v7/sites_frameworks/getting_started/next) for more details.
+
+#

components/ProductPreview.js

@@ -24,6 +24,8 @@ const ProductPreview = ({ name, slug, images, prices }) => {
           <h4 className="border border-gray-200 bg-white px-2 py-1 text-xs text-black md:px-4 md:py-2 md:text-lg">{`${prices.price.value}${prices.price.currencyCode}`}</h4>
         </div>
         <HeartIcon className="absolute right-0 top-0 h-[30px] w-[30px] bg-white p-2" />
+
+        {/* The original image URL (external domain) is handled by the Next.js Image component and optimized with Edgio IO */}
         <Image className="h-full bg-white object-contain" loading="lazy" width={1200} height={1200} src={images[0].url} />
       </Link>
     </Prefetch>

lib/helper.js

@@ -1,3 +1,6 @@
+/**
+ * Rewrite image URLs to use the a relative path that will be handled by the router and optimized
+ */
 export const relativizeURL = (str) =>
   str.replace(
     'https://edgio-community-ecommerce-api-example-default.layer0-limelight.link/',