correct-apricot•2mo ago

useNotificationProvider does not translate toast messages on Next.js

Hello, I followed the i18n-nextjs example in the refinedev/refine repo, but I couldn't get notifications to read the translation file. it shows "notifications.createSuccess" instead of text, and i'm absolutley sure i18n is setup because i'm able to change between languages and it does change the texts to translated lang.

8 Replies

kapa.ai•2mo ago

Hi @Onder. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, it appears that there might be an issue with how the i18n provider is set up or how the notification messages are being handled in your Next.js application. Let's address this problem step by step: 1. First, make sure you have properly set up the i18n provider in your Next.js application. The i18n Next.js example should provide a good starting point. 2. Check if you have the correct translation keys in your translation files. According to the i18n Provider documentation, you should have a structure like this in your translation file:

{
  "notifications": {
    "success": "Successful",
    "error": "Error (status code: {{statusCode}})",
    "createSuccess": "Successfully created {{resource}}",
    // ... other notification keys
  }
}

{
  "notifications": {
    "success": "Successful",
    "error": "Error (status code: {{statusCode}})",
    "createSuccess": "Successfully created {{resource}}",
    // ... other notification keys
  }
}

3. Ensure that you're using the correct namespace for your translations. Some Refine hooks might be using a different namespace than expected. As mentioned in a GitHub issue, there was an inconsistency where some hooks used the "common" namespace while others used the default namespace. This issue has been addressed, but it's worth checking if you're using the correct namespace in your setup. 4. Make sure your i18nProvider is correctly implemented and passed to the <Refine> component. Here's an example of how it should look:

import { useTranslation } from "react-i18next";

const { t, i18n } = useTranslation();

const i18nProvider: I18nProvider = {
  translate: (key: string, params) => t(key, params).toString(),
  changeLocale: (lang: string | undefined) => i18n.changeLanguage(lang),
  getLocale: () => i18n.language,
};
// In your App component
<Refine
  i18nProvider={i18nProvider}
  // ... other props
>
  {/* ... */}
</Refine>

import { useTranslation } from "react-i18next";

const { t, i18n } = useTranslation();

const i18nProvider: I18nProvider = {
  translate: (key: string, params) => t(key, params).toString(),
  changeLocale: (lang: string | undefined) => i18n.changeLanguage(lang),
  getLocale: () => i18n.language,
};
// In your App component
<Refine
  i18nProvider={i18nProvider}
  // ... other props
>
  {/* ... */}
</Refine>

5. If you're using a custom notification provider, ensure that it's properly integrated with the i18n system. The notification provider documentation shows how to integrate a custom notification provider with i18n. If you've checked all these points and the issue persists, it might be a bug in the Refine framework. In that case, you should consider opening an issue on the Refine GitHub repository with a minimal reproducible example of your setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@238969575289389057> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

correct-apricotOP•2mo ago

@kapa.ai i'm using next-intl instead of react-i18next

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for providing that additional information. It appears you're using next-intl instead of react-i18next for internationalization in your Next.js application with Refine. This is a different approach from the default setup used in Refine examples. While Refine's documentation and examples primarily focus on using react-i18next, it is possible to use next-intl with Refine. However, the integration might require some custom configuration. According to a GitHub discussion about using next-intl with Refine, a maintainer suggested: 1. You can integrate next-intl as described in the next-intl documentation. 2. You should also refer to Refine's guide on i18n: Refine i18n Guide To make next-intl work with Refine's notification system, you'll need to create a custom i18nProvider that uses next-intl's translation functions instead of react-i18next's. Here's a general approach you could try: 1. Set up next-intl in your Next.js application as per its documentation. 2. Create a custom i18nProvider that uses next-intl's translation function. It might look something like this:

import { useTranslations } from 'next-intl';

const i18nProvider = {
  translate: (key: string, params: object) => {
    const t = useTranslations();
    return t(key, params);
  },
  changeLocale: (lang: string) => {
    // Implement locale change logic using next-intl
  },
  getLocale: () => {
    // Return current locale using next-intl
  }
};

import { useTranslations } from 'next-intl';

const i18nProvider = {
  translate: (key: string, params: object) => {
    const t = useTranslations();
    return t(key, params);
  },
  changeLocale: (lang: string) => {
    // Implement locale change logic using next-intl
  },
  getLocale: () => {
    // Return current locale using next-intl
  }
};

3. Pass this custom i18nProvider to your Refine component. 4. Ensure your translation files are structured correctly for Refine's notification keys. However, please note that this is a custom solution and might require additional tweaking to work perfectly with Refine's notification system. If you continue to face issues, you might want to consider opening a new issue or discussion on the Refine GitHub repository for more specific guidance on integrating next-intl with Refine. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@238969575289389057> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

correct-apricotOP•2mo ago

@kapa.ai it was my stupidity thanks for help

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm glad to hear that you were able to resolve the issue! It's great that you figured out what was causing the problem. Don't be too hard on yourself - working with internationalization and different libraries can sometimes be tricky. If you have any more questions about Refine or need assistance with anything else related to the framework, please don't hesitate to ask. Good luck with your project! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@238969575289389057> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

useNotificationProvider does not translate toast messages on Next.js

Did you find this page helpful?