Language handling / redirection for sveltekit : Example implementations

[MarArMar]

This is my code (sveltekit) :

import type { Handle } from '@sveltejs/kit'
import type { AvailableLanguageTag } from '$paraglide/runtime'

export const handleLang: Handle = async ({ event, resolve }) => {
  const userLanguage: AvailableLanguageTag | null =
    // 1. If the user has set the lang in URL (eg captured by a path matcher), use that
    getParamLang(event) ??
    // 2. Else, check if the user has a preferred language in a cookie
    getCookieLang(event)[0] ??
    // 3. Missing or invalid cookie, detect language from the Accept-Language header
    getHeaderLang(event) ??
    // 4. No matching language, use default language
    sourceLanguageTag

  return await resolve(event, {
    transformPageChunk({ done, html }) {
      if (done) {
        return html.replace('%lang%', userLanguage as AvailableLanguageTag)
      }
    },
  })
}

Provided the functions work, is this a good way to handle language for my users ?

I plan to set the cookie from thie own actions like settings

[anhtuank7c]

@MarArMar I believe this is the good way to implement i18n that good for SEO as well.

[MarArMar]

Great thank you for your feedback !

[LorisSigrist]

Yes! This is a very good way to implement language redirection!
What you could do is to pass the language that you detect here into your layout. That way there isn't the risk that the client & server get out of sync.

To do this, set event.locals.lang to the userLanguage you detect here, and in your root +layout.js file pass it to the frontend:

// src/routes/[[lang]]/+layout.js

export function load({ locals }) {
    return { lang: locals.lang}
}

And then in your layout:

<script>
    import { setLanguageTag } from "../paraglide/runtime.js"
    export let data;
    
    $: setLanguageTag(data.lang)
</script>


{#key data.lang}
    <slot />
{/key}

Doing it this way ensures that there is never a disconnect between the server & client.

[MarArMar]

Very clear, thank you for your answer

[eikaramba]

this is my script in hooks.server.js file to FORCE a language tag in the url(otherwise he will not be able to choose the language and have the url change as well. e.g. you are in the root path change the language and reload) and redirect the user based on the browser preference. Make sure prefixDefaultLanguage: 'always' is set in the i18n config.

export const i18n = createI18n(runtime,{prefixDefaultLanguage: 'always'});

  // Try to get locale from `pathname`.
  let pathLang = pathname.match(/[^/]+?(?=\/|$)/);
  if(pathLang!=null) pathLang = pathLang.toString().toLowerCase();
  let lang = availableLanguageTags.find((l) => `${l}`.toLowerCase() === pathLang);

  // If no language is specified in the url
  if (!lang) {
    lang = sourceLanguageTag; //default
    let possibleSupportedLocale=getHeaderLang(event) //get user preference from request header

    // take the first from the user preferences and if not continue using the default
    if (possibleSupportedLocale) lang = possibleSupportedLocale;


    let pathnameWithoutLang;
    if(!pathLang) // Case A: Rooth url -> /
      pathnameWithoutLang = "/";
    else if(pathLang?.length==2) // Case B: An unsupported Language is specified in the url-> /fr/catalog
      pathnameWithoutLang = pathname.replace(`${pathLang}`,"").replace("//","/");
    else // Case C: Subpath is specified in the url -> /catalog
      pathnameWithoutLang = "/" + pathLang;

    return new Response(undefined, { headers: {'location': `/${lang}${pathnameWithoutLang}${search}` }, status: 301 });
  }

Update 2024: this works now with latest "@inlang/paraglide-js-adapter-sveltekit": "0.3.7",

[psntr]

Nice additional content, I'm glad there are other people interested in making this work :)

I'm a beginner at this, do you mind sharing a bit more insight? I'm not quite sure if I have to adjust the hooker.server.js and therefore overwrite the handle function?

[eikaramba]

yes exactly. that code belongs into the handle function in the hooks.server.js file
keep in mind the latest paraglide is also exporting a handle function itself. easiest way for me was to just use the sequence function to define multiple handle functions.

import { sequence } from '@sveltejs/kit/hooks';
import { i18n,getHeaderLang  } from "$lib/utils/i18n"; //or wherever your i18n file is sitting

export const i18nHandle = i18n.handle()

export const MyHandle = async ({ event, resolve }) => {
....the code from above.....
  let response = await resolve(event);
  return response;
};
export const handle = sequence(i18nHandle, MyHandle);

in the code above i forgot to also include the getHeaderLang function from the i18n.js file. here it is:

import * as runtime from "$paraglide/runtime.js"
import { createI18n } from "@inlang/paraglide-js-adapter-sveltekit"

const languageNames = {
	"en": "English",
	"de": "German"
}
export function getLanguageName(lang:string){
	return languageNames[lang]
}
export const i18n = createI18n(runtime,{prefixDefaultLanguage: 'always'});
export function getHeaderLang(event) {
	const acceptLanguage = event.request.headers.get("accept-language");
	const locales = acceptLanguage
	?.split(',')
	?.map(lang => lang.split(";")[0].trim()) ?? []
  
	for (const locale of locales) {
	  if (runtime.availableLanguageTags.includes(locale)) {
		return locale;
	  }
	}
	return null;
  }

[psntr]

Thank you for the speedy reply. I'm seeing clearer now in your code and thank you very much for adding the further info regarding the sequence, wouldn't have known how to add it.

I took your example and re-adapted for my use case, this is what I got now:

// src/hooks.server.js

import { sequence } from "@sveltejs/kit/hooks";
import { getPreferredLanguage } from "$lib/utils/i18nUtils";
import { sourceLanguageTag, availableLanguageTags } from "$paraglide/runtime";
import { i18n } from "$lib/i18n";

export const i18nHandle = i18n.handle()

export async function customHandle({ event, resolve }) {
    const { pathname, search } = new URL(event.request.url);

    let pathLang = pathname.match(/[^/]+?(?=\/|$)/);
    let matchedLang = pathLang ? pathLang[0].toLowerCase() : null;
    let lang = availableLanguageTags.find(l => l.toLowerCase() === matchedLang);

    if (!lang) {
        lang = getPreferredLanguage(event.request, availableLanguageTags, sourceLanguageTag) || sourceLanguageTag;
        const pathnameWithoutLang = pathLang ? pathname.replace(`/${pathLang}`, '') : pathname;
        return new Response(undefined, {
            headers: { 'Location': `/${lang}${pathnameWithoutLang}${search}` },
            status: 301
        });
    }
    // Set the detected or default language in `event.locals` for later usage in `+layout.server.js` as data.lang
    event.locals.lang = lang;
    // Proceed with the request
    const response = await resolve(event);
    return response;
}
export const handle = sequence(i18nHandle, customHandle);

Then taking the comment for LorisSigrist, I did the following in +layout.server.js:

// src/routes/+layout.server.js
export async function load({ url, locals }) {
    const { pathname } = url;
    return { pathname, lang: locals.lang }
}

and finally layout +layout.svelte:

// src/+layout.svelte
<script>
  import "../app.pcss";
  import { ParaglideJS } from "@inlang/paraglide-js-adapter-sveltekit";
  import { i18n } from "$lib/i18n";
  import { setLanguageTag, languageTag } from "$paraglide/runtime.js";
  import Header from "$lib/components/Header.svelte";
  import { fly } from "svelte/transition";
  export let data;
  $: pathname = data.pathname; // for transition
  $: setLanguageTag(data.lang); // for language and querying the right data in sanity
</script>
<ParaglideJS {i18n}>
  <div class="app">
    <Header />
    <main>
      {#key pathname} 
        <div
          in:fly={{ y: "100%", duration: 1000, delay: 1000 }}
          out:fly={{ y: "100%", duration: 1000 }}
          class="absolute w-full h-full inset-0 z-20 pointer-events-none"
        >
          {#key data.lang}
            <slot />
          {/key}
        </div>
      {/key}
    </main>
  </div>
</ParaglideJS>

This seems to work so far, I'll then fetch the proper data from Sanity (haven't gotten that far yet).

Edit: formatting

[LorisSigrist]

UPDATE: Writing the path-handling yourself is no longer necessary!
A few weeks ago we released @inlang/paraglide-js-adapter-sveltekit, which takes care of all that. Check it out here: https://inlang.com/m/dxnzrydw/library-inlang-paraglideJsAdapterSvelteKit

Sorry I misread the question

[eikaramba]

are you sure? i did setup everything exactly according to the docs but paraglide did NOT read the browser language header nor did it automatically force the language on the rooth path (e.g. / -> /de)

i also don´t see it in the source code -> https://github.com/opral/monorepo/blob/main/inlang/source-code/paraglide/paraglide-js-adapter-sveltekit/src/runtime/hooks/handle.ts

update: ok no problem :)