Improve Proxy invalid export error message

Author: devjiwonchoi

packages/next/src/build/analysis/get-page-static-info.ts

@@ -392,7 +392,16 @@ function validateMiddlewareProxyExports({
 
   if (!hasValidExport) {
     throw new Error(
-      `The ${fileName === 'proxy' ? 'Proxy' : 'Middleware'} file "./${basename(pageFilePath)}" must export a function named \`${fileName}\` or a default function.`
+      `The ${fileName === 'proxy' ? 'Proxy' : 'Middleware'} file "./${basename(pageFilePath)}" must export a function named \`${fileName}\` or a default function.\n` +
+        `This function is what Next.js runs for every request handled by this ${fileName === 'proxy' ? 'proxy (previously called middleware)' : 'middleware'}.\n\n` +
+        `Why this happens:\n` +
+        `- The file exists but doesn't export a function.\n` +
+        `- The export is not a function (e.g., an object or constant).\n` +
+        `- There's a syntax error preventing the export from being recognized.\n\n` +
+        `To fix it:\n` +
+        `- Check your "${fileName}" file.\n` +
+        `- Ensure it has either a default or "${fileName}" function export.\n` +
+        `- Restart the dev server if the error persists.`
     )
   }
 }

packages/next/src/build/templates/middleware.ts

@@ -19,8 +19,21 @@ const isProxy = page === '/proxy' || page === '/src/proxy'
 const handler = (isProxy ? mod.proxy : mod.middleware) || mod.default
 
 if (typeof handler !== 'function') {
+  const fileName = isProxy ? 'proxy' : 'middleware'
+
   throw new Error(
-    `The ${isProxy ? 'Proxy' : 'Middleware'} file "${relativeFilePath.startsWith('.') ? relativeFilePath : `./${relativeFilePath}`}" must export a function named \`${isProxy ? 'proxy' : 'middleware'}\` or a default function.`
+    `The ${isProxy ? 'Proxy' : 'Middleware'} file "${relativeFilePath.startsWith('.') ? relativeFilePath : `./${relativeFilePath}`}" must export a function named \`${isProxy ? 'proxy' : 'middleware'}\` or a default function.
+This function is what Next.js runs for every request handled by this ${fileName === 'proxy' ? 'proxy (previously called middleware)' : 'middleware'}.
+
+Why this happens:
+- The file exists but doesn't export a function.
+- The export is not a function (e.g., an object or constant).
+- There's a syntax error preventing the export from being recognized.
+
+To fix it:
+- Check your "${fileName}" file.
+- Ensure it has either a default or "${fileName}" function export.
+- Restart the dev server if the error persists.`
   )
 }