reactjslaraveli18nextinertiajsreact-i18next

How to use Inertia SSR with i18next to support localization


i have configured react i18next with inertia and it works without SSR mode.

react-i18next:: You will need to pass in an i18next instance by using initReactI18next
Error: Ziggy error: 'locale' parameter is required for route 'application.home.index'.

my routes are in following style:

import { useTranslation } from 'react-i18next';
const { t, i18n } = useTranslation();
route('application.home.index', {locale: i18n.language})

I imported this i18n.js file in app.jsx and nothing else import ./utlis/i18n.js'; And i have used useTransltion() hook in components that i need to translate something.

I have attached an image to show the code snippet that I prepared for the i18n configurations.

I would appreciate it if you could help me to solve this error: react-i18next:: You will need to pass in an i18next instance by using initReactI18next

this is my i18n.js file configuration:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import Backend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";

i18n.use(Backend)
    .use(initReactI18next) 
    .use(LanguageDetector)
    .init({
        detection: {
            order: ["path", "htmlTag"],
        },
        fallbackLng: "en",
        interpolation: {
            escapeValue: false, 
        },
    });

export default i18n;

I think that i need to do some changes in app.jsx or ssr.jsx but I don't know which file is proper and can't find what type of changes do I need.


Solution

  • well, this is my i18n.js configuration.

    import i18n from "i18next";
    import { initReactI18next } from "react-i18next";
    import Backend from "i18next-http-backend";
    import LanguageDetector from "i18next-browser-languagedetector";
    
    i18n.use(Backend)
        .use(initReactI18next) 
        .use(LanguageDetector)
        .init({
            detection: {
                order: ["path", "htmlTag"],
            },
            fallbackLng: "en",
            interpolation: {
                escapeValue: false, 
            },
        });
    
    export default i18n;
    

    and all i need to do is import that in app.jsx:

    import './Utils/i18n';
    

    and import it into ssr.jsx:

    import i18n  from './Utils/i18n';
    

    and set i18n as global property in setup method:

    setup: ({ App, props }) => {
                global.i18n = i18n;
                global.route = (name, params, absolute) =>
                    route(name, params, absolute, {
                        ...page.props.ziggy,
                        location: new URL(page.props.ziggy.location),
                    });
    
                return <App {...props} />;
            },
        ```