Next.js example with EF cloud fetching

examples/v7-ef-cloud-fetch/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/v7-ef-cloud-fetch/.github/pull_request_template.md

@@ -0,0 +1,5 @@
+**NOTICE TO CONTRIBUTORS**
+
+This repository is not actively monitored and any pull requests made to this repository will be closed/ignored.
+
+Please submit the pull request to [edgio-docs/edgio-examples](https://github.com/edgio-docs/edgio-examples) instead.

examples/v7-ef-cloud-fetch/.github/workflows/edgio.yml

@@ -0,0 +1,18 @@
+name: Deploy to Edgio
+
+on:
+  workflow_dispatch:
+  push:
+
+jobs:
+  deploy-to-edgio:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: if [ -f yarn.lock ]; then yarn install; else npm ci; fi
+      - run: if [ -f yarn.lock ]; then yarn edgio:deploy -- --token=$EDGIO_DEPLOY_TOKEN; else npm run edgio:deploy -- --token=$EDGIO_DEPLOY_TOKEN; fi
+        env:
+          EDGIO_DEPLOY_TOKEN: ${{secrets.EDGIO_DEPLOY_TOKEN}}

examples/v7-ef-cloud-fetch/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# Edgio generated build directory
+.edgio

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

@@ -0,0 +1,36 @@
+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).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. 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.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [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/edge-functions/index.ts

@@ -0,0 +1,31 @@
+// Asynchronous function to handle HTTP requests at the edge.
+export async function handleHttpRequest(request: Request) {
+  // Check the request method and get the request body as an ArrayBuffer if it's not a GET or HEAD request.
+  const requestBody = !['GET', 'HEAD'].includes(request.method)
+    ? await request.arrayBuffer()
+    : undefined;
+
+  // Perform a fetch request to the original request URL with the same method, headers, and body.
+  // Specify the 'edgio_serverless' as the origin to fetch the original Cloud Functions response.
+  const cloudFunctionsResponse = await fetch(request.url, {
+    // @ts-ignore
+    edgio: { origin: 'edgio_serverless' },
+    method: request.method,
+    headers: request.headers,
+    body: requestBody,
+  });
+
+  // Convert the response to text format.
+  let responseText = await cloudFunctionsResponse.text();
+
+  // Replace certain phrases in the response text to indicate processing by Edge Functions.
+  responseText = responseText.replace(/cloud functions/i, 'Edge Functions');
+  responseText = responseText.replace(/rendered by/i, 'changed by');
+
+  // Return a new response with the modified text and original response status, status text, and headers.
+  return new Response(responseText, {
+    status: cloudFunctionsResponse.status,
+    statusText: cloudFunctionsResponse.statusText,
+    headers: cloudFunctionsResponse.headers,
+  });
+}

examples/v7-ef-cloud-fetch/edgio.config.js

@@ -0,0 +1,107 @@
+// This file was automatically added by edgio init.
+// You should commit this file to source control.
+// Learn more about this file at https://docs.edg.io/guides/edgio_config
+module.exports = {
+  connector: '@edgio/next',
+
+  // The name of the site in Edgio to which this app should be deployed.
+  // name: 'my-site-name',
+
+  // The name of the organization in Edgio to which this app should be deployed.
+  // organization: 'my-organization-name',
+
+  // Overrides the default path to the routes file. The path should be relative to the root of your app.
+  // routes: 'routes.js',
+
+  // When set to true or omitted entirely, Edgio includes the deployment number in the cache key,
+  // effectively purging the cache each time you deploy.
+  // purgeCacheOnDeploy: false,
+
+  next: {
+    // Output sourcemaps so that stack traces have original source filenames and line numbers when tailing
+    // the logs in the Edgio developer console.
+    // This config options replaces the edgioSourceMaps option in next.config.js.
+    // @default true
+    // generateSourceMaps: true
+    //
+    // Disables the Edgio image optimizer and allows to use the Next's built in image optimizer.
+    // This config options replaces the disableImageOptimizer option in edgio.config.js root.
+    // @default false
+    // disableImageOptimizer: false
+    //
+    // Disables the Edgio development tools widget on the site.
+    // This config options replaces the disableEdgioDevTools option in next.config.js.
+    // @default false
+    // disableDevtools: false
+    //
+    // Disables the build of the service worker.
+    // @default false
+    // disableServiceWorker: false
+    //
+    // Forces the @edgio/next connector to use the server build.
+    // This config option replaces the NEXT_FORCE_SERVER_BUILD env variable.
+    // @default false
+    // forceServerBuild: false
+    //
+    // Optimizes the server build by bundling all server assets and decreasing the overall startup time.
+    // This option has no effect on apps with serverless build.
+    // This option is set to false for Next 13.x apps.
+    // @default true
+    // optimizeServerBuild: true
+    //
+    // Set this option to false to remove the default rule that proxies all requests to Next.js in serverless.
+    // This is useful if you want to proxy all unmatched pages to different origin.
+    // @default true
+    // proxyToServerlessByDefault: true
+    //
+    // Set this option to true to honor Next's internal redirects that either add or remove a trailing slash
+    // depending on the value of the `trailingSlash` config. When set to false, these internal redirects are not honored,
+    // so sites that fallback to serving from an origin do not add or remove the trailing slash for origin URLs.
+    // @default true
+    // enforceTrailingSlash: true
+  },
+
+  // If you need to proxy some URLs to an origin instead of your Next.js app, you can configure the origins here:
+  // origins: [
+  //   {
+  //     // The name of the backend origin
+  //     name: "origin",
+  //
+  //     // When provided, the following value will be sent as the host header when connecting to the origin.
+  //     // If omitted, the host header from the browser will be forwarded to the origin.
+  //     override_host_header: "test-origin.edgio.net",
+  //
+  //     // The list of backend hosts
+  //     hosts: [
+  //       {
+  //         // The domain name or IP address of the origin server
+  //         location: "test-origin.edgio.net"
+  //       }
+  //     ]
+  //   }
+  // ],
+
+  // Options for hosting serverless functions on Edgio
+  // serverless: {
+  //   // Set to true to include all packages listed in the dependencies property of package.json when deploying to Edgio.
+  //   // This option generally isn't needed as Edgio automatically includes all modules imported by your code in the bundle that
+  //   // is uploaded during deployment
+  //   includeNodeModules: true,
+  //
+  //   // Include additional paths that are dynamically loaded by your app at runtime here when building the serverless bundle.
+  //   include: ['views/**/*'],
+  // },
+
+  // The maximum number of URLs that will be concurrently prerendered during deployment when static prerendering is enabled.
+  // Defaults to 200, which is the maximum allowed value.
+  // prerenderConcurrency: 200,
+
+  // A list of glob patterns identifying which prerenderConcurrency source files should be uploaded when running edgio deploy --includeSources.
+  // This option is primarily used to share source code with Edgio support personnel for the purpose of debugging. If omitted,
+  // edgio deploy --includeSources will result in all files which are not gitignored being uploaded to Edgio.
+  //
+  // sources : [
+  //   '**/*', // include all files
+  //   '!(**/secrets/**/*)', // except everything in the secrets directory
+  // ],
+}

examples/v7-ef-cloud-fetch/next.config.js

@@ -0,0 +1,13 @@
+// This file was automatically added by edgio init.
+// You should commit this file to source control.
+const { withEdgio } = require('@edgio/next/config')
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+const _preEdgioExport = nextConfig;;
+
+module.exports = (phase, config) =>
+  withEdgio({
+    ..._preEdgioExport
+  })