app-router supports

[chhornponleu]

I just want to know if this lib support app-router in nextjs 13 and how to configure

[Matthew-Herman1]

Is there any way to use a Provider component instead of using the 'appWithI18Next' method to be called in _app

• https://jcquintas.gitbook.io/ni18n/usage/getting-started#4.-next.js-app

[Matthew-Herman1]

After some testing, I concluded it doesn't make sense to use this library with the app router, I am instead using next-intl which is suggested on the next.js app router docs

[pedro-amadio]

I need that for app-router too

[netgfx]

same here I would use this with app-router, it seems there is no other library that supports locales without changing the url

[JCQuintas]

I'll see if I can check how app router works soon. I'm up to suggestions on what you expect to see and how it should work.

[netgfx]

Thanks for taking note!

The naive thing from the top of my head is that this

const MyApp = ({ Component, pageProps }) => <Component {...pageProps} />

export default appWithI18Next(MyApp, ni18nConfig)

needs to be replaced with some kind of provider on the layout.js (which is the root now). At least that is how i18n-next works and probably others.

[pedro-amadio]

So... I managed to make it work but without ni18n and only with i18next and react-i18next

( Solution found at i18next/next-app-dir-i18next-example#12 (comment)
Credits to the author)

You'll have to create 3 files:
client.ts, server.ts, settings.ts

client.ts

'use client'

import i18next from 'i18next'
import { initReactI18next, useTranslation as useTranslationOrg } from 'react-i18next'
import resourcesToBackend from 'i18next-resources-to-backend'
// import LocizeBackend from 'i18next-locize-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { getOptions } from './settings'

// on client side the normal singleton is ok
i18next
.use(initReactI18next)
.use(LanguageDetector)
.use(resourcesToBackend((language: any, namespace: any) => import(./locales/${language}/${namespace}.json)))
// .use(LocizeBackend) // locize backend could be used on client side, but prefer to keep it in sync with server side
.init({
...getOptions(),
lng: undefined, // let detect the language on client side
detection: {
order: ['querystring', 'cookie', 'htmlTag', 'navigator'],
caches: ['cookie']
}
})

export const useTranslation = useTranslationOrg`

server.ts:

import { createInstance } from 'i18next'
import resourcesToBackend from 'i18next-resources-to-backend'
import { initReactI18next } from 'react-i18next/initReactI18next'
import { getOptions, languages, fallbackLng } from './settings'
import { cookies, headers } from 'next/headers'
import acceptLanguage from 'accept-language'

const initI18next = async (lng: any, ns: any) => {
// on server side we create a new instance for each render, because during compilation everything seems to be executed in parallel
const i18nInstance = createInstance()
await i18nInstance
.use(initReactI18next)
.use(resourcesToBackend((language: any, namespace: any) => import(./locales/${language}/${namespace}.json)))
.init(getOptions(lng, ns))
return i18nInstance
}

acceptLanguage.languages(languages)
const cookieName = 'i18next'

export function detectLanguage() {
const ckies = cookies()
const hders = headers()
let lng
const nextUrlHeader = hders.has('next-url') && hders.get('next-url')
if (nextUrlHeader && nextUrlHeader.indexOf("lng":") > -1) {
const qsObj = JSON.parse(nextUrlHeader.substring(nextUrlHeader.indexOf('{'), nextUrlHeader.indexOf(}) + 1))
lng = qsObj.lng
}
if (!lng && ckies.has(cookieName)) lng = acceptLanguage.get(ckies?.get(cookieName)?.value ?? "en")
if (!lng) lng = acceptLanguage.get(hders.get('Accept-Language'))
if (!lng) lng = fallbackLng
return lng
}

export async function useTranslation(ns: any, options: any = {}) {
const lng = detectLanguage()
const i18nextInstance = await initI18next(lng, ns)
return {
t: i18nextInstance.getFixedT(lng, Array.isArray(ns) ? ns[0] : ns, options.keyPrefix),
ready: true,
i18n: i18nextInstance
}
}

settings.ts

export const fallbackLng = 'en'
export const languages = [fallbackLng, 'pt-BR', 'fr', 'de-DE']
export const defaultNS = 'translation'

export function getOptions (lng = fallbackLng, ns = defaultNS) {
return {
// debug: true,
supportedLngs: languages,
// preload: languages,
fallbackLng,
lng,
fallbackNS: defaultNS,
defaultNS,
ns,
// backend: {
// projectId: '0000000-0000-0000-0000-00000' //Replace with a v5UUID code
// }
}
}

As i said, I'm no longer using this lib 😢

I REALLY want to use this lib again!!!

If anyone can make it so we can get back to it I'd appreciate it alot!

Thanks <3