const languages = [
    {
        code: 'en',
        name: 'English',
    },
    {
        code: 'id',
        name: 'Bahasa',
    },
]


i18next
    .use(HttpApi)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        supportedLngs: ['en', 'id'],
        fallbackLng: 'en',
        debug: false,
        // Options for language detector
        detection: {
            order: ['path', 'cookie', 'htmlTag'],
            caches: ['cookie'],
        },
        // react: { useSuspense: false },
        backend: {
        loadPath: '/assets/locales/{{lng}}/translation.json',
        },
    })

const Index = ({ courses, categories }) => {
    
    const currentLanguageCode = cookies.get('i18next') || 'en'
    const currentLanguage = languages.find((l) => l.code === currentLanguageCode)
    const { t } = useTranslation()

I am following a youtube tutorial on how to do this but it seems like it is not working on my web application. On the video they are using react while i am using next.js (which also uses react.js) so I juse asume it would work. The code that is written above are on index.js on pages folder. I have setup a language change on the navbar and for a while after launching it would work normally but when I refresh the page it will get stuck in loading. I tried analyzing the problem and it looks like the problem is either while the app is fetching data from cookies or on the i18next.use(initReactI18next) because when I delete the i18next.use part, the code goes through but it does not show the translation.

I still dont know the solution here so any help would be appreciated. Thanks in advance.

(Note: If there are better ways to make a multi language page then I might want to look into other methods instead)