SvelteKit Adapter - Automatic Language Detection and Redirects

[MaxTheTurtle0]

Proposal:

Implement an option within the SvelteKit adapter (or applicable adapters) to enable automatic detection of the visitor's browser language. This feature would:

1. Automatically detect and redirect users to their browser language on their first visit, instead of serving the default language for routes without a specified language.
2. For returning visitors, a cookie should remember and apply their previously selected language, enhancing user experience by automatically serving content in their preferred language.
3. It should only redirect the user if they are visiting for the first time

Benefit:

Improves UX

[LorisSigrist]

This is something i've been looking to implement.

This would likely be incompatible with translated pathnames so those couldn't be used anymore. This is because the handle hook where we could do the language detection & work with cookies runs after the reroute hook where the translated pathnames are handled. This will likely just be a limitation

[Keagel]

I think it'd be good to have both of those be optional. For example, you might want to redirect users on their first visit to the detected language, or you might display a popup to allow the user to choose whether they wish to keep using the current locale or switch to the detected one.

Similarly, a returning user using a different locale may be intentionally visiting a different locale and I find it can be jarring/annoying to have things like those out of control. Making it optional allows for the developer to implement a way to give control to the user (ie. a popup with the same choices as mentioned before, but with a checkbox to always redirect to the preferred language).

[themataleao]

@LorisSigrist I would be okay with both solutions either after or before the first load. As long as it is functionally working.

[mmailaender]

@LorisSigrist Is the feature shipped, or have you only moved it to linear? (Because I don't see a linked pull request or documentation 🙂 )

[LorisSigrist]

Literally being shipped right now

PR

[mmailaender]

Will it be activated by default after the version upgrade, or do I need to activate it manually?

[LorisSigrist]

The new rule is: "If it's ambiguous, use negotiation"

For now you use it by setting prefixDefaultLanguage: "always". This makes any navigations to a route without a language prefix ambiguous, which triggers language negotiation.

Negotiation works like so:

1. Check if the language can be determined from the URL
2. Check the paraglide:lang cookie to see what the user's last language was.
3. If that's missing, negotiate via the Accept-Language header.
4. Use default language as fallback.

After negotiation you will be redirected the the negotiated language.


This will work once v0.9 is out.

[mmailaender]

@LorisSigrist Where do I need to add this setting? Didn't find something about this in the docs

[LorisSigrist]

I only got around to updating the docs now. It's on this page:

https://inlang.com/m/dxnzrydw/paraglide-sveltekit-i18n/localised-routing#localised-routing

[themataleao]

@LorisSigrist I am a bit confused now. What's now the suggested procedure if we wish to have autoredirection? Will the prefixDefaultLanguage: "always" will solve the issue?

[LorisSigrist]

Yes, prefixDefaultLanguage: "always" is what you need to use.

It will always cause language redirection if the language isn't explicitly in the URL

[themataleao]

@LorisSigrist can I use the same thing within my nextJS/React setup?

[LorisSigrist]

@themataleao Language Detection is supported in NextJS using custom Routing-Strategies. If a routing-strategy returns undefined as the language then language-negotiation will happen. However, users currently aren't redirected to the language-specific paths automatically. Instead the detected language is rendered in-place.

[themataleao]

@LorisSigrist ok thanks. What would you suggest as the most robust setup for now? Are you planning to make automatic redirects in the future?

[mmailaender]

@LorisSigrist I think it could help to add also the path to the file at the top of the code block. That could save some seconds of file searching 🙂 https://inlang.com/m/dxnzrydw/paraglide-sveltekit-i18n/localised-routing