Performance issue with next-intl in middleware – all languages being loaded

[JJablonski02]

Hi,

I wanted to ask about using next-intl in middleware, as I'm encountering a performance issue.

My application supports 35 languages, and I noticed that all of them are being loaded in the middleware. This causes the middleware to become overloaded, which significantly affects the initial load time of the application.

When I analyze the bundle using next/bundle-analyzer, I can see that all languages are being bundled, as shown in the screenshot below (see attachment).

Because of this, the first time a user enters the site, they have to wait quite a while for everything to load. I've noticed this issue some time ago, but I only just identified the root cause today.

Do you know:

Why this is happening?

What can I do to fix it or reduce the middleware bundle size?

Is there a best practice for using next-intl in middleware when supporting many locales?

Any help would be greatly appreciated!

Thanks in advance!

routing.ts

import { createNavigation } from "next-intl/navigation"
import { defineRouting } from "next-intl/routing"

import SUPPORTED_LOCALES from "@/supported-locales"

export const routing = defineRouting({
  // A list of all locales that are supported
  locales: SUPPORTED_LOCALES,

  // Used when no locale matches
  defaultLocale: "en-us",
})

export type Locale = (typeof routing.locales)[number]

// Lightweight wrappers around Next.js' navigation APIs
// that will consider the routing configuration
export const { Link, redirect, usePathname, useRouter } =
  createNavigation(routing)

supported-locales.ts

import type { Language } from "./types/common-types"

export type ExtendedLanguage = Language | "en" | "zh" | "pt" // This is only used here to use translations

// Wspierane języki w aplikacji
const SUPPORTED_LOCALES: ExtendedLanguage[] = [
  "en-us", // angielski - usa
  "en-gb", // angielski - brytyjski
  "es", // hiszpański
  "de", // niemiecki
  "fr", // francuski
  "it", // włoski
  "nl", // holenderski
  "da", // duński
  "sv", // szwedzki
  "pl", // polski
  "hu", // Węgierski
  "cs", // Czeski
  "pt-pt", // portugalski
  "pt-br", // brazylijski
  "ro", // rumuński
  "vi", // wietnamski
  "tr", // turecki
  "id", // indonezyjski
  "ru", // rosyjski
  "uk", // ukraiński
  "ur", // urdu (Pakistan)
  "ar", // arabski (Arabia Saudyjska)
  "hi", // hindi
  "pa", // Punjabi
  "ta", // tamil
  "si", // syngaleski
  "fa", // perski
  "fil", // filipiński
  "bn", // bengalski (Bangladesz)
  "km", // khmerski
  "th", // tajski
  "ja", // japoński
  "zh-cn", // chiński uproszczony
  "zh-tw", // chiński tradycyjny
  "ko", // koreański,
  "en", // angielski
  "zh", // Chinski
  "pt", // Portugalski
]

middleware.ts

import { routing } from "./i18n/routing"
const intlMiddleware = createMiddleware(routing)

const authMiddleware = withAuth(
  function middleware(request: NextRequestWithAuth) {
    return intlMiddleware(request)
  },
  {
    callbacks: {
      authorized: ({ token }) => !!token,
    },
  }
)

export default function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl

  const cleanPathname = pathname.replace(langPrefixRegex, "/$2")

  if (protectedPaths.includes(cleanPathname)) {
    return (authMiddleware as any)(request)
  }

  return intlMiddleware(request)
}

[JJablonski02]

I found the issue – the problem was that I was importing
import { createNavigation } from "next-intl/navigation"
in the routing.ts file.

Once I moved that import to the navigation.ts file, the languages were no longer being loaded, and the middleware size dropped to 70kb.

[amannn]

Glad to hear that you were able to resolve it! This issue tracks the bug upstream: #1669