Error: Failed to call useTranslations because the context from NextIntlClientProvider was not found.

[ScreamZ]

Hi,

Following my thread on #1031

I'm using the following structure and I get this message:

Error: Failed to call useTranslations because the context from NextIntlClientProvider was not found.

Footer.tsx

export const Footer: React.FC = () => {
  const t = useTranslations("Footer");

  return null;
}

Output is

Even if I comment children the error occurs. Even if i remove async

Question

Why is this considered a client component and crash isn't this supposed to be a shared component as defined here? I don't even use a use client directive. And therefore I don't need to show a context with all the messages sent to the front.

(I'm having so much issue with this new app router, why is this so complicated Vercel team 😅) (I know you're not concerned directly about this)

[ScreamZ]

Exact same code in [locale] part of the application, no issues. Damn 😅 I guess some contextual data might be missing ?

Isn't this supposed to fallback on the default locale or whatever ?

[amannn]

Well the problem is that you're using localization APIs in a folder that's called "(not-localized)" 😄. It's interesting that you see that particular error message though. I have to say you probably haven't picked the easiest use case to start out with a mix of localized and not localized pages.

I'm currently working on #1017 which will allow to use APIs from next-intl in an app that only uses a single locale (your "not localized" use case). However, having both not localized and localized pages in the same app is still quite tricky.

Some options that could work for you:

1. Consider if it isn't an option to localize all pages, avoiding a mixed setup
2. You could avoid using APIs from next-intl in the "(not-localized)" folder
3. Split the localized and not localized part into separate Next.js apps (the not localized one could use feat: Support providing a locale in i18n.ts instead of reading it from the pathname #1017)

Is there anything in this list that could work for you?

[ScreamZ]

You're quite right, I didn't started with the most simple use case ahah 😅.
But as a freelance you know, sometimes you need to fulfill marketing directives and we have different URLs pattern.

• I might be able to push them for "Hidden default locale mode" A.K.A « as-needed » maybe, this could also solve the issue. So the URLs without /en are in English by default for the whole app. And put the app back in [locale].
• Or I might be able to push to the domain configuration maybe, this might help,
• In worst case scenario, I'll rely on your second suggestion, and importing the JSON as direct import yep.

But still, I don't get why I have this message. Maybe because it's not able to fallback on some default ? As these URLs are not going through the middle-ware, I should be missing some context. (As talked about in #1031).

I removed the middleware because it automatically redirect to the default locale by URL rewriting, I'll make some trick tests with localePrefix: 'never'.

Thank you for you kindness and assistance so far, will be pleased to help if I can in the future

[amannn]

But as a freelance you know, sometimes you need to fulfill marketing directives and we have different URLs pattern.

I can relate, yes! 😄 Hope you can get your app back on track now! 🤞

Thank you for you kindness and assistance so far, will be pleased to help if I can in the future

Really cool, thanks! 🙌