how to use the NEXT_LOCALE

hello, I need to persist the change when somebody goes to /en route or click

   # placed in components/header.tsx
   # href is empty so would not change the page, but when we move to 
   # another page it will be back to default, how to persist so it would only 
   # change when we click another locale="otherlang" ?

    <Link href="" locale="en" key="en">
      {t(`common:menuchangetodefaultinheader`)}
    </Link>

they should persist until anybody change the default language is there an example on how to use the next_locale in a nextjs project? where should it be placed? how do you guys use cookie or NEXT_lOCALE?

[felipe-aguirre]

Example on useEffect:

import { useRouter } from 'next/router'

// ...

function usePersistLocaleCookie() {
    const { locale, defaultLocale } = useRouter()

    useEffect(persistLocaleCookie, [locale, defaultLocale])
    function persistLocaleCookie() {
      if(locale !== defaultLocale) {
         const date = new Date()
         const expireMs = 100 * 365 * 24 * 60 * 60 * 1000 // 100 days
         date.setTime(date.getTime() + expireMs)
         document.cookie = `NEXT_LOCALE=${locale};expires=${date.toUTCString()};path=/`
      }
    }
}

This should be on the README, thanks a lot

[aralroca]

@BjoernRave, this is part of Next.js, not Next-translate:

https://nextjs.org/docs/advanced-features/i18n-routing#leveraging-the-next_locale-cookie

Next-translate since version 0.19 uses the i18n routing of Next.js, and all the logic is exactly the same as Next.js. The only new logic that Next-translate introduces now is to inject code inside the loaders (getStaticProps, getServerSideProps…) to download the translations that each page needs according to the current language.

By this, I mean that the reason why by default is so, it’s something that wasn’t discussed here in the library. Surely any suggestions on routing are best addressed to @timneutkens’s RFC.