Will middleware size affect the website?

[levipadre]

Is this a problem?

I have a simple middleware for different domains:

import createMiddleware from 'next-intl/middleware';
 
export default createMiddleware({
    locales: ['en', 'fr'],
    defaultLocale: 'en',
    alternateLinks: false,
    domains: [
        {
            domain: 'next.domain.com',
            defaultLocale: 'en',
            locales: ['en']
        },
        {
            domain: 'next.domain.fr',
            defaultLocale: 'fr',
            locales: ['fr']
        }
    ],
    localeDetection: false
});

export const config = {
    matcher: ['/((?!api|_next|.*\\..*).*)']
}

[amannn]

Hey @levipadre and thanks for the question!

I noticed this too recently, it seems like after a Next.js release the size of the middleware grew significantly. If I'm not mistaken, this happened when dynamic open graph image generation was released. I didn't have time to verify this yet or analyze where/how this can be fixed—this might just be a bug on the Next.js side.

In case you manage to find the cause of this, it would be helpful if you could share it here!

[m-nathani]

Same thing is happening for me.. after upgrading from nextjs 14 to nextjs 15 and upgrading "next-intl": "^3.26.3", to support it my middleware size has threefolded (45KB to 155KB) :S ... does anyone knows why ? :O

middleware.ts

import { type NextFetchEvent, type NextRequest } from 'next/server';
import createMiddleware from 'next-intl/middleware';
import { routing } from '@/i18n/routing';
import { CustomMiddleware } from './chain';

const handleI18nRouting = createMiddleware(routing);

export function i18nMiddleware(middleware: CustomMiddleware) {
  return async (request: NextRequest, event: NextFetchEvent) => {
    // The first middleware in the chain has to create the response
    // object and pass it down the chain.
    const response = handleI18nRouting(request);

    // Call the next middleware and pass the request and response
    return middleware(request, event, response);
  };
}

here are changes for old to new next-intl:

nextjs-14 with next-intl 3.20

nextjs-15 with next-intl 3.26

NOTE: the size increased from 45KB to 155KB

[amannn]

Interesting, are you composing your middleware with another one?

In my Next.js 15 update branch the build result of next-intl-example-app-router looks good:

ƒ Middleware                             54.1 kB

[m-nathani]

Correct, to manage and keep the logic separate we created a chain for middleware.. so the actual middleware file is

middleware.ts

import { chain } from '@/middlewares/chain';
import { locationMiddleware } from './middlewares/location-middleware';
import { i18nMiddleware } from './middlewares/i18n-middleware';

export default chain([i18nMiddleware, locationMiddleware]);

export const config = {
  matcher: [
    // Enable a redirect to a matching locale at the root
    '/',
    // Match only internationalized pathnames
    '/(de|en)/:path*',
    // Match all pathnames except for
    // - … if they start with `/api`, `/_next` or `/_vercel`
    // - … the ones containing a dot (e.g. `favicon.ico`)
    '/((?!api|_next|_vercel|.*\\..*).*)',
  ],
};

and chain is recursive function for middleware

/middleware/chain.ts

import type { NextMiddlewareResult } from 'next/dist/server/web/types';
import type { NextResponse, NextFetchEvent, NextRequest } from 'next/server';

export type CustomMiddleware = (
  request: NextRequest,
  event: NextFetchEvent,
  response: NextResponse
) => NextMiddlewareResult | Promise<NextMiddlewareResult>;

type MiddlewareFactory = (middleware: CustomMiddleware) => CustomMiddleware;

export function chain(functions: MiddlewareFactory[], index = 0): CustomMiddleware {
  const current = functions[index];

  if (current) {
    const next = chain(functions, index + 1);
    return current(next);
  }

  return (request: NextRequest, event: NextFetchEvent, response: NextResponse) => {
    return response;
  };
}

[m-nathani]

@amannn , boss there is no change in the code from my side too.. just upgraded next and next-intl, also enabled generateStaticParams

export function generateStaticParams() {
  return routing.locales.map((locale) => ({ locale }));
}

Really confused on why its threfolded :S also if Nextjs has increased the size of middleware 🤔

[amannn]

I can recommend @next/bundle-analyzer for analyzing such issues!