Search code examples
next.jsnext-intl

Error: Unable to find `next-intl` locale because the middleware didn't run on this request

I'm using Next.js 14, I installed and configured the library called next-intl. Everything is working fine, but the console shows the following error:

*null
 ⨯ node_modules\next-intl\dist\esm\server\RequestLocale.js (1:609) @ eval
 ⨯ Error: Unable to find `next-intl` locale because the middleware didn't run on this request. See https://next-intl-docs.vercel.app/docs/routing/middleware#unable-to-find-locale
    at Home (./app/[locale]/page.tsx:11:68)
    at async Promise.all (index 0)
    at async Promise.all (index 0)
digest: "3382004036"*

There is a weird error even though internationalization is working fine.

I will show the order and configuration of necessary files for working with next-intl.

folders

layout.tsx
`import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { useLocale } from "next-intl";
import "./globals.css";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: any;
}) {
  const locale = useLocale();

  if (params.locale !== locale) {
    notFound();
  }

  return (
    <html lang={locale}>
      <body>{children}</body>
    </html>
  );
}`


i18n.ts
`import {getRequestConfig} from 'next-intl/server';
 
export default getRequestConfig(async ({locale}) => ({
  messages: (await import(`./messages/${locale}.json`)).default
}));`


middleware.ts
import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  // A list of all locales that are supported
  locales: ['es', 'en'],
 
  // Used when no locale matches
  defaultLocale: 'es'
});
 
export const config = {
  // Match only internationalized pathnames
  matcher: ['/', '/(en|es)/:path*']
};

Even though everything seems to be working fine, I don't want this error to appear in the console.

Solution

  • I have the same issue, try this

    export const config = {
  // Match only internationalized pathnames
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico|apple-touch-icon.png|favicon.svg|images/books|icons|manifest).*)'
  ]
};