Qwik Speak and Adapters

If you use Qwik-provided adapters for publishing your app, especially with edge functions or static generation, it is recommended to bundle the translation files (see Translation functions)

If your production environment doesn't support dynamic import, you can import files directly:

/**
 * Translation files are imported directly as string
 */
const translationData = import.meta.glob<Translation>('/i18n/**/*.json', { as: 'raw', eager: true });

const loadTranslation$: LoadTranslationFn = server$((lang: string, asset: string) =>
  JSON.parse(translationData[`/i18n/${lang}/${asset}.json`])
);

Static Site Generation (SSG)

If you want to use Static Site Generation, you need to generate for each supported language an index.html of each page you will include in SSG.

Get the code ready

• Bundle the translation files (see Translation functions) or provide a running server during the build if you are fetching the files

• Configure a localized router with a lang parameter

• Handle the dynamic lang parameter, adding the values it can take to each page included in SSG, e.g.:

src/routes/[...lang]/index.tsx

export const onStaticGenerate: StaticGenerateHandler = () => {
  return {
    params: config.supportedLocales.map(locale => {
      return { lang: locale.lang !== config.defaultLocale.lang ? locale.lang : '.' };
    })
  };
};

See Dynamic SSG routes in official Qwik docs for more details

Building

npm run build

Inspect the dist folder: you should have for each language an index.html of each page you have included in SSG.