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.
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.
I have the same issue, try this