No intl context found error in Next.js application with use-intl library ( NEXTjs 14.0.1 )

Question

No intl context found error in Next.js application with use-intl library ( NEXTjs 14.0.1 )

2.2k views Asked by George At 11 September 2024 at 22:42

I'm encountering an error in my Next.js application when using the use-intl library. The error message I'm seeing is:

⨯ Error: No intl context found. Have you configured the provider? error console

I'm using Next.js version 14.0.1 My project is organized with the "src" folder structure, and App Router. It seems that this error is related to the use-intl library.

I attached images of my folder structure with middleware, config, languages, layout.

closed opened

this is my layout.tsx (path src/app/[locale]/layout.tsx)

import { notFound } from "next/navigation";
import { NextIntlClientProvider } from "next-intl";

export function generateStaticParams()
{
    return [ { locale: 'en' }, { locale: 'sk' }, { locale: 'cz' } ];
}

export default async function LocaleLayout( { children, params }: {
    children: React.ReactNode;
    params: { locale: string }
} )
{
    const locale = params.locale;
    let translations;
    try
    {
        translations = ( await import(`../../translations/${ locale }.json`) ).default;
    }
    catch( error )
    {
        notFound();
    }


    return (

        <html lang={ locale } className={ `bg-black ${ SF.variable } font-sans` }>
        <body>
        <NextIntlClientProvider locale={ locale } messages={ translations }>

            <main className="space-y-24 md:space-y-40">
                <Navigation/>
                { children }
                <Footer/>
            </main>

        </NextIntlClientProvider>
        </body>
        </html>

    )
}

this is my middleware.ts (path src/middleware.ts)

import createMiddleware from 'next-intl/middleware';
import { i18n } from "@/config/i18n.config";

export default createMiddleware(i18n);

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

this is my i18n.config.ts (path src/config/i18n.config.ts)

const defaultLocale = 'en'
const langs = [ defaultLocale, 'sk', 'cz' ] as const;

const locales = langs as unknown as string[];
export const i18n = { defaultLocale, locales, localeDetection: true };
export type Locale = ( typeof langs) [number];

Could someone please provide guidance on how to fix this error and configure the provider for the use-intl library properly in a Next.js project using the App Router and the "src" folder structure? Thank you in advance!

I've been trying to set up internationalization in my Next.js project based on the official documentation provided here: https://nextjs.org/docs/app/building-your-application/routing/internationalization

Nothing help, also I didn't found any question that solves my error.

I cannot finish the build because of this error.

Original Q&A

There are 2 answers

**Adnane ROUHI** · Answer 1 · 2024-02-19 05:44:25

import getMessages and use it as message instead it may fi your problem import { getMessages} from 'next-intl/server'; and inside your localLayout

  const messages = await getMessages();

...

<NextIntlClientProvider messages={messages}>

....

 </NextIntlClientProvider>

**Purzynski** · Answer 2 · 2024-02-26 20:02:08

The documentation says that you need to first wrap your layout with NextIntlClientProvider -> documentation

import {NextIntlClientProvider, useMessages} from 'next-intl';
import {notFound} from 'next/navigation';
 
export default function LocaleLayout({children, params: {locale}}) {
  // ...
 
  // Receive messages provided in `i18n.ts`
  const messages = useMessages();
 
  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider locale={locale} messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

Then, on your client component, you can do:

const messages = useMessages();

And every translation is in your messages var, which you can use in the html.

TechQA.

No intl context found error in Next.js application with use-intl library ( NEXTjs 14.0.1 )

There are 2 answers

Related Questions in NEXT.JS

Related Questions in INTERNATIONALIZATION

Related Questions in MIDDLEWARE

Related Questions in MULTILINGUAL

Related Questions in NEXT-INTL

Popular Questions

Popular Tags

Trending Questions