fix: correctly enable edge images

Author: ascorbic

packages/runtime/src/helpers/edge.ts

@@ -3,9 +3,11 @@ import { promises as fs, existsSync } from 'fs'
 import { resolve, join } from 'path'
 
 import type { NetlifyConfig, NetlifyPluginConstants } from '@netlify/build'
+import { greenBright } from 'chalk'
 import { copy, copyFile, emptyDir, ensureDir, readJSON, readJson, writeJSON, writeJson } from 'fs-extra'
 import type { MiddlewareManifest } from 'next/dist/build/webpack/plugins/middleware-plugin'
 import type { RouteHas } from 'next/dist/lib/load-custom-routes'
+import { outdent } from 'outdent'
 
 // This is the format as of next@12.2
 interface EdgeFunctionDefinitionV1 {
@@ -196,8 +198,6 @@ export const writeEdgeFunctions = async (netlifyConfig: NetlifyConfig) => {
   const edgeFunctionRoot = resolve('.netlify', 'edge-functions')
   await emptyDir(edgeFunctionRoot)
 
-  await copy(getEdgeTemplatePath('../edge-shared'), join(edgeFunctionRoot, 'edge-shared'))
-
   if (!process.env.NEXT_DISABLE_EDGE_IMAGES) {
     console.log(
       'Using Netlify Edge Functions for image format detection. Set env var "NEXT_DISABLE_EDGE_IMAGES=true" to disable.',
@@ -215,13 +215,18 @@ export const writeEdgeFunctions = async (netlifyConfig: NetlifyConfig) => {
     })
   }
   if (!process.env.NEXT_DISABLE_NETLIFY_EDGE) {
+    await copy(getEdgeTemplatePath('../edge-shared'), join(edgeFunctionRoot, 'edge-shared'))
+
     const middlewareManifest = await loadMiddlewareManifest(netlifyConfig)
     if (!middlewareManifest) {
       console.error("Couldn't find the middleware manifest")
       return
     }
 
+    let usesEdge = false
+
     for (const middleware of middlewareManifest.sortedMiddleware) {
+      usesEdge = true
       const edgeFunctionDefinition = middlewareManifest.middleware[middleware]
       const functionDefinitions = await writeEdgeFunction({
         edgeFunctionDefinition,
@@ -234,6 +239,7 @@ export const writeEdgeFunctions = async (netlifyConfig: NetlifyConfig) => {
     // No, the version field was not incremented
     if (typeof middlewareManifest.functions === 'object') {
       for (const edgeFunctionDefinition of Object.values(middlewareManifest.functions)) {
+        usesEdge = true
         const functionDefinitions = await writeEdgeFunction({
           edgeFunctionDefinition,
           edgeFunctionRoot,
@@ -242,6 +248,12 @@ export const writeEdgeFunctions = async (netlifyConfig: NetlifyConfig) => {
         manifest.functions.push(...functionDefinitions)
       }
     }
+    if (usesEdge) {
+      console.log(outdent`
+        ✨ Deploying middleware and functions to ${greenBright`Netlify Edge Functions`} ✨
+        This feature is in beta. Please share your feedback here: https://ntl.fyi/next-netlify-edge
+      `)
+    }
   }
   await writeJson(join(edgeFunctionRoot, 'manifest.json'), manifest)
 }

packages/runtime/src/index.ts

@@ -2,7 +2,7 @@
 import { join, relative } from 'path'
 
 import type { NetlifyPlugin } from '@netlify/build'
-import { greenBright, bold, redBright } from 'chalk'
+import { bold, redBright } from 'chalk'
 import { existsSync, readFileSync } from 'fs-extra'
 import { outdent } from 'outdent'
 
@@ -16,12 +16,7 @@ import {
   generateCustomHeaders,
 } from './helpers/config'
 import { onPreDev } from './helpers/dev'
-import {
-  enableEdgeInNextConfig,
-  writeEdgeFunctions,
-  loadMiddlewareManifest,
-  cleanupEdgeFunctions,
-} from './helpers/edge'
+import { writeEdgeFunctions, loadMiddlewareManifest, cleanupEdgeFunctions } from './helpers/edge'
 import { moveStaticPages, movePublicFiles, patchNextFiles } from './helpers/files'
 import { generateFunctions, setupImageFunction, generatePagesResolver } from './helpers/functions'
 import { generateRedirects, generateStaticRedirects } from './helpers/redirects'
@@ -88,30 +83,30 @@ const plugin: NetlifyPlugin = {
 
     const middlewareManifest = await loadMiddlewareManifest(netlifyConfig)
 
-    let usingEdge = false
-
-    if (middlewareManifest?.functions && Object.keys(middlewareManifest.functions).length !== 0) {
-      usingEdge = true
-      if (process.env.NEXT_DISABLE_NETLIFY_EDGE) {
-        failBuild(outdent`
-          You are using Next.js experimental edge runtime, but have set NEXT_DISABLE_NETLIFY_EDGE to true. This is not supported.
-          To use edge runtime, remove the env var ${bold`NEXT_DISABLE_NETLIFY_EDGE`}.
-        `)
-      }
+    if (
+      middlewareManifest?.functions &&
+      Object.keys(middlewareManifest.functions).length !== 0 &&
+      process.env.NEXT_DISABLE_NETLIFY_EDGE
+    ) {
+      failBuild(outdent`
+        You are using Next.js experimental edge runtime, but have set NEXT_DISABLE_NETLIFY_EDGE to true. This is not supported.
+        To use edge runtime, remove the env var ${bold`NEXT_DISABLE_NETLIFY_EDGE`}.
+      `)
     }
 
-    if (middlewareManifest?.middleware && Object.keys(middlewareManifest.middleware).length !== 0) {
-      usingEdge = true
-      if (process.env.NEXT_DISABLE_NETLIFY_EDGE) {
-        console.log(
-          redBright(outdent`
-            You are using Next.js Middleware without Netlify Edge Functions.
-            This is deprecated because it negatively affects performance and will disable ISR and static rendering.
-            It also disables advanced middleware features from @netlify/next
-            To get the best performance and use Netlify Edge Functions, remove the env var ${bold`NEXT_DISABLE_NETLIFY_EDGE`}.
-          `),
-        )
-      }
+    if (
+      middlewareManifest?.middleware &&
+      Object.keys(middlewareManifest.middleware).length !== 0 &&
+      process.env.NEXT_DISABLE_NETLIFY_EDGE
+    ) {
+      console.log(
+        redBright(outdent`
+          You are using Next.js Middleware without Netlify Edge Functions.
+          This is deprecated because it negatively affects performance and will disable ISR and static rendering.
+          It also disables advanced middleware features from @netlify/next
+          To get the best performance and use Netlify Edge Functions, remove the env var ${bold`NEXT_DISABLE_NETLIFY_EDGE`}.
+        `),
+      )
     }
 
     if (isNextAuthInstalled()) {
@@ -178,16 +173,7 @@ const plugin: NetlifyPlugin = {
       buildId,
     })
 
-    if (usingEdge) {
-      await writeEdgeFunctions(netlifyConfig)
-
-      await enableEdgeInNextConfig(publish)
-
-      console.log(outdent`
-        ✨ Deploying middleware and functions to ${greenBright`Netlify Edge Functions`} ✨
-        This feature is in beta. Please share your feedback here: https://ntl.fyi/next-netlify-edge
-      `)
-    }
+    await writeEdgeFunctions(netlifyConfig)
   },
 
   async onPostBuild({