Support passing locale by state/cookie

[EliasVal]

Is your feature request related to a problem? Please describe.

I'm using next-intl and it has been great so far, but I want to integrate it with server components too.
But the docs don't mention anything about being able to set the locale from a client's cookie.

I'd love to have this feature since my workplace requires it to be passed by cookie instead of subdomain/URL slug.

Describe the solution you'd like

Being able to set the locale using a client cookie that could be sent with the HTTP requests that go to the server (if that is possible)

Describe alternatives you've considered

None.

[amannn]

Great to hear if it works well for you so far!

The middleware docs should have some answers for you. Can you have a look?

I'll move this to a discussion, since this seems to be a usage question.

[EliasVal]

Hello, and sorry it took time for me to reply, I've been now trying to read the docs and incorporate next-intl on the server side to no avail.

I'm getting the unable to find next-intl locale because the middleware didn't run on this request error.
middleware.ts:

export default createMiddleware({
  defaultLocale: 'he',
  localePrefix: 'never',
  locales: ['he', 'en', 'ar'],
});
export const config = {
  matcher: ['/^((?!_next|assets).*)'],
};

[EliasVal]

Oh! managed to figure out a solution.

first, my Regex was faulty, so now changed it to:

export const config = {
  matcher: ['/((?!_next|assets).*)'],
};

And the middleware was still redirecting by the locale so I have used this to go around it:

import createIntlMiddleware from 'next-intl/middleware';
import { NextRequest } from 'next/server';

export default async function middleware(request: NextRequest) {
  const defaultLocale = request.headers.get('x-default-locale') || 'he';

  const handleI18nRouting = createIntlMiddleware({
    locales: ['he', 'en', 'ar'],
    defaultLocale,
    localePrefix: 'never',
    alternateLinks: false,
    localeDetection: false,
  });
  const response = handleI18nRouting(request);

  // @ts-ignore
  response.headers.set('X-Middleware-Rewrite', response.headers.get('X-Middleware-Rewrite')?.replace('/he', ''));

  // This line is unrelated, I need the url somewhere else in a server component :P
  request.headers.set('x-url', request.url);

  return response;
}

[amannn]

I'm investigating improved support for the localePrefix: 'never' / localeDetection: false combination in #1017. Feel free to have a look and leave feedback there if this is relevant for you!