W3cubDocs

/Astro

Add i18n features

Astro doesn’t have built-in internationalization (i18n) support, but you can build your own i18n solution. In this recipe, you’ll learn how to use content collections and dynamic routing to serve content for different languages.

This example serves each language at its own subpath, e.g. example.com/en/blog for English and example.com/fr/blog for French.

Recipe

Set up pages for each language

  1. Create a directory for each language you want to support. For example, en/ and fr/ if you are supporting English and French:

    • Directorysrc/
      • Directorypages/
        • Directoryen/
          • about.astro
          • index.astro
        • Directoryfr/
          • about.astro
          • index.astro
        • index.astro

  2. Set up src/pages/index.astro to redirect to your default language.

    src/pages/index.astro

    This approach uses a meta refresh and will work however you deploy your site. Some static hosts also let you configure server redirects with a custom configuration file. See your deploy platform’s documentation for more details.

Use collections for translated content

  1. Create a folder in src/content/ for each type of content you want to include and add subdirectories for each supported language. For example, to support English and French blog posts:

    • Directorysrc/
      • Directorycontent/
        • Directoryblog/
          • Directoryen/ Blog posts in English
            • post-1.md
            • post-2.md
          • Directoryfr/ Blog posts in French
            • post-1.md
            • post-2.md

  2. Create a src/content/config.ts file and export a collection for each type of content.

    src/content/config.ts

    📚 Read more about Content Collections.

  3. Use dynamic routes to fetch and render content based on a lang and a slug parameter.

    In static rendering mode, use getStaticPaths to map each content entry to a page:

    src/pages/[lang]/blog/[...slug].astro

    📚 Read more about dynamic routing.

Translate UI strings

Create dictionaries of terms to translate the labels for UI elements around your site. This allows your visitors to experience your site fully in their language.

  1. Create a src/i18n/ui.ts file to store your translation strings:

    src/i18n/ui.ts

  2. Create two helper functions: one to detect the page language based on the current URL, and one to get translations strings for different parts of the UI in src/i18n/utils.ts:

    src/i18n/utils.ts

  3. Import the helpers where needed and use them to choose the UI string that corresponds to the current language. For example, a nav component might look like:

    src/components/Nav.astro

  4. Each page must have a lang attribute on the <html> element that matches the language on the page. In this example, a reusable layout extracts the language from the current route:

    src/layouts/Base.astro

    You can then use this base layout to ensure that pages use the correct lang attribute automatically.

    src/pages/en/about.astro

Let users switch between languages

Create links to the different languages you support so users can choose the language they want to read your site in.

  1. Create a component to show a link for each language:

    src/components/LanguagePicker.astro

  2. Add <LanguagePicker /> to your site so it is shown on every page. The example below adds it to the site footer in a base layout:

    src/layouts/Base.astro

Resources

Community libraries

  • astro-i18next — An Astro integration for i18next including some utility components.
  • astro-i18n — A TypeScript-first internationalization library for Astro.
  • astro-i18n-aut — An Astro integration for i18n that supports the defaultLocale without page generation. The integration is adapter agnostic and UI framework agnostic.

More recipes

© 2021 Fred K. Schott
Licensed under the MIT License.
https://docs.astro.build/en/recipes/i18n/