Expand example to show before/after edge function modification

examples/v7-ef-cloud-fetch/README.md

@@ -23,6 +23,7 @@ logged into Edgio CLI which can be done via `npm run edgio login` and following
 If you have any queries or face issues with this project, please don't hesitate to contact
 the [Edgio team](https://edg.io/contact-support/).
 
+---
 
 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).
 
@@ -54,9 +55,3 @@ To learn more about Next.js, take a look at the following resources:
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/v7-ef-cloud-fetch/routes.ts

@@ -6,6 +6,22 @@ import { nextRoutes } from '@edgio/next';
 export default new Router()
   // NextRoutes automatically adds routes for all Next.js pages and their assets
   .use(nextRoutes)
-  .match('/edge-override', {
-    edge_function: './edge-functions/index.js',
-  });
+
+  // To show the difference between the cloud function and edge function responses,
+  // we'll add a query parameter that must be present for the edge function to process
+  // the request.
+  //
+  // For example, a request to /example will be handled only by Next.js as the cloud function.
+  // A request to /example?edge=1 will be handled by the edge function which forwards the request
+  // to the cloud function.
+  .match(
+    {
+      path: '/example',
+      query: {
+        edge: /1/,
+      },
+    },
+    {
+      edge_function: './edge-functions/index.js',
+    }
+  );

examples/v7-ef-cloud-fetch/src/app/example/page.tsx

@@ -0,0 +1,19 @@
+import { headers } from 'next/headers';
+
+export default async function ExamplePage() {
+  // Add in reference to headers() to force this page to be server-side rendered and handled as a cloud function.
+  // Otherwise, this page will be rendered as a static page and not handled as a cloud function.
+  const headersList = headers();
+  const referer = headersList.get('referer');
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center p-24">
+      <div className="text-center">
+        <h1>Edgio Cloud Functions</h1>
+        <p>This page was rendered by Edgio Cloud Functions.</p>
+      </div>
+
+      <footer className="mt-auto">Referer: {referer}</footer>
+    </div>
+  );
+}

examples/v7-ef-cloud-fetch/src/app/globals.css

@@ -25,3 +25,9 @@ body {
     )
     rgb(var(--background-start-rgb));
 }
+
+pre {
+  display: inline;
+  border: 1px solid rgb(var(--foreground-rgb));
+  border-radius: 0.25rem;
+}

examples/v7-ef-cloud-fetch/src/app/page.tsx

@@ -1,25 +1,19 @@
 export default function Home() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-center p-24">
+      <h2 className="max-w-5xl text-left">
+        Welcome! This page demonstrates how Edge Functions can be used with
+        Next.js to modify the cloud function responses at the edge. By visiting
+        the link below, the following request flow will occur:
+      </h2>
       <div className="z-10 max-w-5xl w-full text-center font-mono text-sm">
-        <p className="mb-4 text-left mx-auto">
-          Welcome! This page demonstrates how Edgio Edge Functions can be used
-          with Next.js to modify cloud function responses at the edge. By
-          visiting the link below, the following request flow will occur:
-        </p>
         <ol className="list-decimal list-inside text-left my-4">
           <li>
-            The browser will request the page{' '}
-            <code className="bg-gray-700 p-1 rounded">/edge-override</code>.
+            The browser will request the page <pre>/example</pre>.
           </li>
           <li>
-            Edgio will match this request as defined in the{' '}
-            <code className="bg-gray-700 p-1 rounded">routes.ts</code> file and
-            process it through{' '}
-            <code className="bg-gray-700 p-1 rounded">
-              ./edge-functions/index.js
-            </code>
-            .
+            Edgio will match this request as defined in the <pre>routes.ts</pre>{' '}
+            file and process it through <pre>./edge-functions/index.js</pre>.
           </li>
           <li>
             The edge function will request the page from the Next.js server
@@ -30,22 +24,32 @@ export default function Home() {
             function.
           </li>
           <li>
-            The edge function will modify the response and send it to the
-            browser.
+            The edge function will modify the response, replacing{' '}
+            <pre>Edgio Cloud Functions</pre> with{' '}
+            <pre>Edgio Edge Functions</pre>, and send it to the browser.
           </li>
         </ol>
+      </div>
+
+      <div className="text-center font-mono text-sm flex items-center justify-between space-x-4">
+        <a
+          href="/example"
+          className="inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+        >
+          Go to <pre>/example</pre> (no edge function process)
+        </a>
         <a
-          href="/edge-override"
+          href="/example?edge=1"
           className="inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
         >
-          Go to /edge-override
+          Go to <pre>/example?edge=1</pre> (edge function process)
         </a>
       </div>
-      <footer className="z-0 absolute bottom-0 left-0 right-0 bg-gray-800 text-gray-100 text-center text-xs py-2">
+      <div className="text-center text-md mt-4">
         <a href="https://github.com/edgio-docs/edgio-v7-ef-cloud-fetch-example">
           Example Source Code
         </a>
-      </footer>
+      </div>
     </main>
   );
 }