Middleware on Netlify with Next.js

Yes, there are known issues with Next.js middleware (middleware.ts) on Netlify, and these can cause your pages not to display or route correctly in production, even if everything works locally.

TL;DR
read documentation:
https://docs.netlify.com/frameworks/next-js/runtime-v4/redirects-and-rewrites/


Key Issues Identified

  • Middleware Execution Differences: Netlify’s support for Next.js middleware is not always on par with Vercel or local development. Middleware may not execute as expected, or may run on every route (including static assets), causing unexpected behavior or 404 errors[3][4][7].
  • Headers and Cookies: Setting headers or cookies in middleware often works locally but fails on Netlify. For example, response cookies set in middleware may not be available on the client or in subsequent requests[1][5].
  • Route Matching Problems: The matcher config in middleware is sometimes ignored or not respected on Netlify, leading to middleware running on all paths, including those you want to exclude (like static assets or API routes)[7].
  • Export Format Issues: Netlify’s runtime may expect middleware to be exported in a certain way (named vs. default export), and mismatches can cause middleware not to run or to throw errors[7].
  • Edge Function Limitations: Some regular expressions or features used in middleware may not be supported by Netlify’s Edge Functions, resulting in build or runtime errors[6].

Workarounds and Recommendations

  1. Manually Filter Paths in Middleware
    Since Netlify may not respect the matcher config reliably, add manual checks at the top of your middleware to skip unwanted paths (e.g., static files, API routes):
   import { NextRequest, NextResponse } from 'next/server';

   const SKIP_PREFIXES = [
     '/_next',
     '/api',
     '/favicon.ico',
     '/robots.txt',
     '/icons',
   ];

   export function middleware(req: NextRequest) {
     if (SKIP_PREFIXES.some(prefix => req.nextUrl.pathname.startsWith(prefix))) {
       return NextResponse.next();
     }
     // ...your middleware logic
   }
  1. Check Your Export
    If using libraries like next-intl, try both named and default exports for the middleware function, as Netlify’s runtime may require a specific export style[7].
  2. Update Dependencies
    Use the latest versions of Next.js and @netlify/plugin-nextjs, as compatibility is actively being improved. However, some issues persist even with the latest versions[7].
  3. Test on Netlify, Not Just Locally
    Always test your deployment on Netlify, as local (netlify dev) and production behavior can differ significantly[3][7].
  4. Review Build Logs and Errors
    Check Netlify’s build and deploy logs for warnings about middleware, edge functions, or skipped files. These often provide clues if something is not being handled as expected[2][6].

Summary Table

Issue TypeImpact on NetlifyWorkaround/Advice
Middleware runs on all pathsCauses 404s, breaks static assetsManually filter paths in middleware
Cookies/headers not setPersonalization, auth, or theme logic failsLimited workaround; test thoroughly
Middleware export mismatchMiddleware not executed or errors thrownTry both default and named exports
Edge function limitationsBuild/runtime errors, unsupported regexSimplify regex, check build logs
Local vs. production diffWorks locally, fails on NetlifyAlways test on Netlify

Conclusion

Next.js middleware support on Netlify is still maturing and has several caveats.
If your pages are not displaying after adding middleware.ts, it is likely due to one of the above issues.
Manually filter paths in your middleware, check your export style, and always test on Netlify production.
For complex i18n or authentication flows, you may need to consider alternative approaches or wait for improved support in future Netlify releases[1][3][4][5][6][7].

Sources
[1] Next.js Middleware problems – Netlify Support Forums https://answers.netlify.com/t/next-js-middleware-problems/146922
[2] Nextjs middleware breaks Netlify Forms – Support https://answers.netlify.com/t/nextjs-middleware-breaks-netlify-forms/52892
[3] 404 on all pages of a Next js application with “app router” setup https://answers.netlify.com/t/404-on-all-pages-of-a-next-js-application-with-app-router-setup/93605
[4] Next.js middleware not executing in monorepo – Support https://answers.netlify.com/t/next-js-middleware-not-executing-in-monorepo/55328
[5] NextJS – Headers set in Middleware not available on Layout.tsx or … https://answers.netlify.com/t/nextjs-headers-set-in-middleware-not-available-on-layout-tsx-or-page-tsx/129098
[6] Next-auth middleware is throwing error on deploy – Support https://answers.netlify.com/t/next-auth-middleware-is-throwing-error-on-deploy/88601
[7] Unable to deploy on Netlify with latest packages · Issue #290 – GitHub https://github.com/amannn/next-intl/issues/290
[8] How do I get Next.js middleware response with TypeScript? – Support https://answers.netlify.com/t/how-do-i-get-next-js-middleware-response-with-typescript/81022
[9] Troubleshooting Next.js on Netlify https://docs.netlify.com/frameworks/next-js/runtime-v4/troubleshooting/
[10] Netlify doesn’t recognise next.js middleware when deployed – Support https://answers.netlify.com/t/netlify-doesnt-recognise-next-js-middleware-when-deployed/78577
[11] NextJS app and Netlify in production issue – Support https://answers.netlify.com/t/nextjs-app-and-netlify-in-production-issue/105566
[12] Change page content from middleware.js #49086 – GitHub https://github.com/vercel/next.js/discussions/49086
[13] Nextjs 14 deploy on netlify not showing images – Support https://answers.netlify.com/t/nextjs-14-deploy-on-netlify-not-showing-images/110039
[14] Next.js next/link doesn’t trigger middleware – Netlify Support Forums https://answers.netlify.com/t/next-js-next-link-doesnt-trigger-middleware/100703