Next.js IO changes

examples/v7-nextjs-app-router/README.md

@@ -20,6 +20,8 @@ You can start editing the page by modifying `app/page.tsx`. The page auto-update
 
 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:
@@ -34,6 +36,6 @@ Deploy this project on Edgio with the following command:
 npm run edgio:deploy
 ```
 
-Check out our [Next.js  documentation](https://docs.edg.io/guides/v7/sites_frameworks/getting_started/next) for more details.
+Check out our [Next.js documentation](https://docs.edg.io/guides/v7/sites_frameworks/getting_started/next) for more details.
 
 #

examples/v7-nextjs-app-router/edgio.config.js

@@ -81,25 +81,6 @@ module.exports = {
           'edgio-community-ecommerce-api-example-default.layer0-limelight.link',
       },
     },
-    {
-      name: 'image',
-      override_host_header: 'opt.moovweb.net',
-      hosts: [
-        {
-          scheme: 'match',
-          location: [
-            {
-              hostname: 'opt.moovweb.net',
-            },
-          ],
-        },
-      ],
-      tls_verify: {
-        allow_self_signed_certs: true,
-        use_sni: true,
-        sni_hint_and_strict_san_check: 'opt.moovweb.net',
-      },
-    },
   ],
 
   // Options for hosting serverless functions on Edgio

examples/v7-nextjs-app-router/next.config.js

@@ -1,13 +1,19 @@
 // This file was automatically added by edgio init.
 // You should commit this file to source control.
-const { withEdgio } = require('@edgio/next/config')
+const { withEdgio } = require('@edgio/next/config');
 
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  images: {
+    domains: [
+      'edgio-community-ecommerce-api-example-default.layer0-limelight.link',
+    ],
+  },
+};
 
-const _preEdgioExport = nextConfig;;
+const _preEdgioExport = nextConfig;
 
 module.exports = (phase, config) =>
   withEdgio({
-    ..._preEdgioExport
-  })
+    ..._preEdgioExport,
+  });

examples/v7-nextjs-app-router/routes.ts

@@ -26,16 +26,4 @@ export default new Router()
       ],
     },
     origin: { set_origin: 'api' },
-  })
-  .match('/edgio-opt', {
-    url: {
-      url_rewrite: [
-        {
-          source: '/edgio-opt:optionalSlash(\\/?)?:optionalQuery(\\?.*)?',
-          syntax: 'path-to-regexp',
-          destination: '/:optionalSlash:optionalQuery',
-        },
-      ],
-    },
-    origin: { set_origin: 'image' },
   });

examples/v7-nextjs-app-router/src/app/product/[name]/page.js

@@ -1,12 +1,13 @@
 import { headers } from 'next/headers';
+import Image from 'next/image';
 
 import { StarIcon } from '@heroicons/react/solid';
 import {
   HeartIcon,
   StarIcon as StarIconOutline,
 } from '@heroicons/react/outline';
 
-import { relativizeURL, getOrigin } from '@/lib/helper';
+import { getOrigin } from '@/lib/helper';
 
 export default async function Product({ params }) {
   const data = await getData(params.name);
@@ -23,18 +24,24 @@ export default async function Product({ params }) {
           </div>
           <HeartIcon className="absolute right-0 top-0 z-10 h-[50px] w-[50px] border border-gray-200 bg-white p-2" />
           <div className="flex w-full flex-col items-center">
-            <img
-              src={relativizeURL(data.images[0].url)}
+            {/* The original image URL (external domain) is handled by the Next.js Image component and optimized with Edgio IO */}
+            <Image
+              src={data.images[0].url}
               className="h-auto w-full max-w-[600px]"
+              width={600}
+              height={600}
             />
           </div>
           <div className="product-thumbnails mt-5 flex flex-row items-start gap-x-2 overflow-x-scroll">
             {data.images.map((i, ind) => (
-              <img
+              /* The original image URL (external domain) is handled by the Next.js Image component and optimized with Edgio IO */
+              <Image
                 key={i.url}
                 loading="lazy"
-                src={relativizeURL(i.url)}
+                src={i.url}
                 className="h-[250px] w-auto hover:bg-white"
+                width={250}
+                height={250}
               />
             ))}
           </div>

examples/v7-nextjs-app-router/src/components/ProductPreview.js

@@ -1,8 +1,8 @@
 'use client';
 
 import Link from 'next/link';
+import Image from 'next/image';
 import { Prefetch } from '@edgio/react';
-import { relativizeURL } from '@/lib/helper';
 import { HeartIcon } from '@heroicons/react/outline';
 import { createNextDataURL } from '@edgio/next/client';
 
@@ -31,12 +31,14 @@ 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" />
-        <img
+
+        {/* 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={relativizeURL(images[0].url)}
+          src={images[0].url}
         />
       </Link>
     </Prefetch>

examples/v7-nextjs-app-router/src/lib/helper.js

@@ -1,9 +1,3 @@
-export const relativizeURL = (str) =>
-  str.replace(
-    'https://edgio-community-ecommerce-api-example-default.layer0-limelight.link/',
-    '/edgio-opt?quality=30&img=https://edgio-community-ecommerce-api-example-default.layer0-limelight.link/'
-  );
-
 export const getOrigin = (headers) => {
   let origin;
   if (typeof window !== 'undefined') {

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.
+
+#

examples/v7-nextjs/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>

examples/v7-nextjs/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/',

examples/v7-nextjs/pages/commerce.js

@@ -28,7 +28,6 @@ const Search = ({ data }) => {
 export default Search
 
 export async function getServerSideProps({ req, query }) {
-  console.log('fetching', `${getOrigin(req)}/edgio-api/${query.name ? `categories/${query.name}` : 'products/all'}`)
   const resp = await fetch(`${getOrigin(req)}/edgio-api/${query.name ? `categories/${query.name}` : 'products/all'}`)
   if (!resp.ok) {
     return {

examples/v7-nextjs/pages/product/[name].js

@@ -13,10 +13,12 @@ const Product = ({ data }) => {
           </div>
           <HeartIcon className="absolute right-0 top-0 z-10 h-[50px] w-[50px] border border-gray-200 bg-white p-2" />
           <div className="flex w-full flex-col items-center">
+            {/* The original image URL (external domain) is handled by the Next.js Image component and optimized with Edgio IO */}
             <Image src={data.images[0].url} className="h-auto w-full max-w-[600px]" width={600} height={600} />
           </div>
           <div className="product-thumbnails mt-5 flex flex-row items-start gap-x-2 overflow-x-scroll">
             {data.images.map((i, ind) => (
+              /* The original image URL (external domain) is handled by the Next.js Image component and optimized with Edgio IO */
               <Image key={i.url} loading="lazy" src={i.url} className="h-[250px] w-auto hover:bg-white" width={250} height={250} />
             ))}
           </div>