Merge branch 'main' into mk/edge-dev

Author: ascorbic

demos/middleware/netlify.toml

@@ -3,8 +3,12 @@ command = "npm run build"
 publish = ".next"
 ignore = "if [ $CACHED_COMMIT_REF == $COMMIT_REF ]; then (exit 1); else git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF ../..; fi;"
 
-# [[plugins]]
-# package = "../plugin-wrapper/"
+[build.environment]
+NEXT_USE_NETLIFY_EDGE = "true"
+
+[[plugins]]
+package = "../plugin-wrapper/"
+
 # This is a fake plugin, that makes it run npm install
 [[plugins]]
 package = "@netlify/plugin-local-install-core"

demos/server-components/netlify.toml

@@ -3,9 +3,6 @@ command = "npm run build"
 publish = ".next"
 ignore = "if [ $CACHED_COMMIT_REF == $COMMIT_REF ]; then (exit 1); else git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF ../..; fi;"
 
-[build.environment]
-NEXT_USE_NETLIFY_EDGE = "true"
-
 [[plugins]]
 package = "../plugin-wrapper/"
 

packages/runtime/src/helpers/edge.ts

@@ -161,11 +161,9 @@ export const writeEdgeFunctions = async (netlifyConfig: NetlifyConfig) => {
   await emptyDir(edgeFunctionRoot)
 
   if (!process.env.NEXT_DISABLE_EDGE_IMAGES) {
-    if (!process.env.NEXT_USE_NETLIFY_EDGE) {
-      console.log(
-        'Using Netlify Edge Functions for image format detection. Set env var "NEXT_DISABLE_EDGE_IMAGES=true" to disable.',
-      )
-    }
+    console.log(
+      'Using Netlify Edge Functions for image format detection. Set env var "NEXT_DISABLE_EDGE_IMAGES=true" to disable.',
+    )
     const edgeFunctionDir = join(edgeFunctionRoot, 'ipx')
     await ensureDir(edgeFunctionDir)
     await copyEdgeSourceFile({ edgeFunctionDir, file: 'ipx.ts', target: 'index.ts' })
@@ -178,7 +176,7 @@ export const writeEdgeFunctions = async (netlifyConfig: NetlifyConfig) => {
       path: '/_next/image*',
     })
   }
-  if (process.env.NEXT_USE_NETLIFY_EDGE) {
+  if (!process.env.NEXT_DISABLE_NETLIFY_EDGE) {
     const middlewareManifest = await loadMiddlewareManifest(netlifyConfig)
     if (!middlewareManifest) {
       console.error("Couldn't find the middleware manifest")
@@ -210,9 +208,10 @@ export const writeEdgeFunctions = async (netlifyConfig: NetlifyConfig) => {
   await writeJson(join(edgeFunctionRoot, 'manifest.json'), manifest)
 }
 
-export const updateConfig = async (publish: string) => {
+export const enableEdgeInNextConfig = async (publish: string) => {
   const configFile = join(publish, 'required-server-files.json')
   const config = await readJSON(configFile)
+  // This is for runtime in Next.js, rather than a build plugin setting
   config.config.env.NEXT_USE_NETLIFY_EDGE = 'true'
   await writeJSON(configFile, config)
 }

packages/runtime/src/helpers/files.ts

@@ -60,7 +60,7 @@ export const matchesRewrite = (file: string, rewrites: Rewrites): boolean => {
 }
 
 export const getMiddleware = async (publish: string): Promise<Array<string>> => {
-  if (process.env.NEXT_USE_NETLIFY_EDGE) {
+  if (!process.env.NEXT_DISABLE_NETLIFY_EDGE) {
     return []
   }
   const manifestPath = join(publish, 'server', 'middleware-manifest.json')

packages/runtime/src/index.ts

@@ -1,8 +1,8 @@
 /* eslint-disable max-lines */
 import { join, relative } from 'path'
 
-import type { NetlifyPlugin, OnPreBuild } from '@netlify/build'
-import { greenBright, yellowBright, bold } from 'chalk'
+import type { NetlifyPlugin } from '@netlify/build'
+import { greenBright, bold, redBright } from 'chalk'
 import { existsSync, readFileSync } from 'fs-extra'
 import { outdent } from 'outdent'
 
@@ -16,7 +16,7 @@ import {
   generateCustomHeaders,
 } from './helpers/config'
 import { onPreDev } from './helpers/dev'
-import { updateConfig, writeEdgeFunctions, loadMiddlewareManifest } from './helpers/edge'
+import { enableEdgeInNextConfig, writeEdgeFunctions, loadMiddlewareManifest } from './helpers/edge'
 import { moveStaticPages, movePublicFiles, patchNextFiles } from './helpers/files'
 import { generateFunctions, setupImageFunction, generatePagesResolver } from './helpers/functions'
 import { generateRedirects, generateStaticRedirects } from './helpers/redirects'
@@ -81,6 +81,34 @@ const plugin: NetlifyPlugin & { onPreDev?: OnPreBuild; onDev?: OnPreBuild } = {
       },
     )
 
+    const middlewareManifest = await loadMiddlewareManifest(netlifyConfig)
+
+    let usingEdge = false
+
+    if (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 (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 (experimental.images) {
       experimentalRemotePatterns = experimental.images.remotePatterns || []
     }
@@ -139,27 +167,15 @@ const plugin: NetlifyPlugin & { onPreDev?: OnPreBuild; onDev?: OnPreBuild } = {
       buildId,
     })
 
-    // We call this even if we don't have edge functions enabled because we still use it for images
-    await writeEdgeFunctions(netlifyConfig)
+    if (usingEdge) {
+      await writeEdgeFunctions(netlifyConfig)
+
+      await enableEdgeInNextConfig(publish)
 
-    if (process.env.NEXT_USE_NETLIFY_EDGE) {
       console.log(outdent`
-        ✨ Deploying to ${greenBright`Netlify Edge Functions`} ✨
+        ✨ 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 updateConfig(publish)
-    }
-
-    const middlewareManifest = await loadMiddlewareManifest(netlifyConfig)
-
-    if (!process.env.NEXT_USE_NETLIFY_EDGE && middlewareManifest?.sortedMiddleware?.length) {
-      console.log(
-        yellowBright(outdent`
-          You are using Next.js Middleware without Netlify Edge Functions.
-          This will soon be deprecated because it negatively affects performance and will disable ISR and static rendering.
-          To get the best performance and use Netlify Edge Functions, set the env var ${bold`NEXT_USE_NETLIFY_EDGE=true`}.
-        `),
-      )
     }
   },