middleware & nextconfig fixed

Author: Gerome-Elassaad

middleware.ts

@@ -2,36 +2,29 @@ import { NextResponse } from 'next/server'
 import type { NextRequest } from 'next/server'
 
 export function middleware(request: NextRequest) {
-  
   const requestId = `mid_${crypto.randomUUID()}`
   const startTime = Date.now()
 
   console.log(`[Middleware ${requestId}] ${request.method} ${request.nextUrl.pathname}`)
 
-  
   if (request.nextUrl.pathname.startsWith('/api/')) {
     const response = NextResponse.next()
 
-    
     response.headers.set('Access-Control-Allow-Origin', '*')
     response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
     response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With')
     response.headers.set('Access-Control-Max-Age', '86400')
 
-    
     response.headers.set('X-Request-ID', requestId)
     response.headers.set('X-Response-Time', `${Date.now() - startTime}ms`)
 
-    
     if (request.method === 'OPTIONS') {
       return new Response(null, { status: 200, headers: response.headers })
     }
 
-    
     if (request.method === 'POST') {
       const contentType = request.headers.get('content-type')
 
-      
       if (request.nextUrl.pathname === '/api/chat') {
         if (!contentType?.includes('application/json')) {
           console.warn(`[Middleware ${requestId}] Invalid content type for /api/chat: ${contentType}`)
@@ -49,7 +42,6 @@ export function middleware(request: NextRequest) {
         }
       }
 
-      
       if (request.nextUrl.pathname === '/api/project/analyze' || 
           request.nextUrl.pathname === '/api/upload-files') {
         if (!contentType?.includes('multipart/form-data')) {
@@ -96,7 +88,7 @@ export function middleware(request: NextRequest) {
 
   response.headers.set('Content-Security-Policy', csp)
 
-  
+  // Add request tracking
   response.headers.set('X-Request-ID', requestId)
 
   console.log(`[Middleware ${requestId}] Processed in ${Date.now() - startTime}ms`)
@@ -106,7 +98,13 @@ export function middleware(request: NextRequest) {
 
 export const config = {
   matcher: [
-    
+    /*
+     * Match all request paths except for the ones starting with:
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico (favicon file)
+     * - public folder
+     */
     '/((?!_next/static|_next/image|favicon.ico|public|icons).*)',
   ],
 }

next.config.mjs

@@ -1,55 +1,6 @@
-import { readFile } from 'fs/promises';
-import { join } from 'path';
-
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  webpack: config => {
-    config.externals.push({
-      '@supabase/realtime-js': 'commonjs @supabase/realtime-js',
-    });
-
-    // Handling large JSON files by reading them at build time
-    const templatesPath = join(process.cwd(), 'lib', 'templates.json');
-    config.plugins.push(
-      new (class {
-        apply(compiler) {
-          compiler.hooks.thisCompilation.tap(
-            'InjectTemplatesPlugin',
-            compilation => {
-              compilation.hooks.processAssets.tapAsync(
-                {
-                  name: 'InjectTemplatesPlugin',
-                  stage:
-                    compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
-                },
-                async (assets, callback) => {
-                  try {
-                    const templatesContent = await readFile(
-                      templatesPath,
-                      'utf-8',
-                    );
-                    const templatesJson = JSON.stringify(
-                      JSON.parse(templatesContent),
-                    );
-                    const assetId = 'lib/templates.json';
-                    assets[assetId] = {
-                      source: () => `export default ${templatesJson}`,
-                      size: () => templatesJson.length,
-                    };
-                    callback();
-                  } catch (error) {
-                    callback(error);
-                  }
-                },
-              );
-            },
-          );
-        }
-      })(),
-    );
 
-    return config;
-  },
+const nextConfig = {
   env: {
     SANDBOX_ID: 'ina8cw5gcg0ts1as7iz7o-5b7f1102',
   },
@@ -69,6 +20,28 @@ const nextConfig = {
       },
     ];
   },
+  webpack: (config, { isServer, webpack }) => {
+    // The "Critical dependency: the request of a dependency is an expression" warning
+    // often originates from libraries like @supabase/realtime-js when they use
+    // dynamic requires or imports that Webpack cannot statically analyze.
+
+    // If this warning appears during server-side bundling (e.g., for API routes, as in this case),
+    // making @supabase/realtime-js external can resolve it. This means Node.js
+    // will require() it at runtime instead of Webpack trying to bundle it.
+    // This is generally safe if its real-time client features aren't actively used
+    // in the server-side context where it's imported.
+    if (isServer) {
+      config.externals = [...config.externals, '@supabase/realtime-js'];
+    }
+
+    // Additionally, @supabase/realtime-js or its dependencies (like WebSocket libraries)
+    // might try to optionally include native modules like 'bufferutil' and 'utf-8-validate'.
+    // Making these external tells Webpack not to bundle them and can prevent related warnings.
+    // This is a common fix for issues involving the 'ws' package or similar.
+    config.externals.push('bufferutil', 'utf-8-validate');
+
+    return config;
+  },
 };
 
-export default nextConfig;
+export default nextConfig;