How to sync url locale & cookie locale after using browser back / forward / fresh？

[GrahamQuan]

[question]

How to sync url locale & cookie locale after using browser back / forward / fresh?

[ref]

Been using next-intl for a while, everything feels great on RSC and client side, but recently I found out that next 13 /app remove router.event which may be a issue when we use browser back / forward / fresh with next-intl, and it happened. Link: vercel/next.js#41934 (comment)

[behavior]

1. lets say we are in /en/pricing (cookie locale en)
2. switch locale to /ja/pricing (cookie locale ja)
3. click browser back button, back to /en/pricing (cookie locale still ja)
4. click other page to /en/blog (cookie locale still ja)

[code]

I have a customFetch function get locale from cookie, cookie is legacy so this function will be an issue, code be like

const res = await fetch(url, {
  headers: {
    'Content-Language': getContentLanguage(cookies()?.get('NEXT_LOCALE')?.value),
  }
}

[next-intl setup]

import createMiddleware from 'next-intl/middleware';

import { localePrefix } from '@/app/navigation';

import { locales } from '../i18n';

const intlMiddleware = createMiddleware({
  locales,
  defaultLocale: 'en',
  localePrefix,
  localeDetection: false,
});

export default intlMiddleware;

[version]

"next": "14.2.4",
"next-intl": "3.21.1"

[GrahamQuan]

client side not work, but could do it in server side

export default function middleware(request: NextRequest) {
  ...
  i18nResponse.cookies.set('NEXT_LOCALE', locale);
  ...
}