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.
If you prefer the default language to not be visible in the URL unlike other languages, there are instructions to hide the default language below.
Set up pages for each language
Create a directory for each language you want to support. For example,
fr/if you are supporting English and French:
src/pages/index.astroto redirect to your default language.
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.
If you are using an SSR adapter, you can use
Astro.redirectto redirect to the default language on the server.
Use collections for translated content
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:
Директорияen/ Blog posts in English
Директорияfr/ Blog posts in French
src/content/config.tsfile and export a collection for each type of content.
📚 Read more about Content Collections.
Use dynamic routes to fetch and render content based on a
In static rendering mode, use
getStaticPathsto map each content entry to a page:
In SSR mode, fetch the requested entry directly:
📚 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.
src/i18n/ui.tsfile to store your translation strings:
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
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:
Each page must have a
langattribute on the
<html>element that matches the language on the page. In this example, a reusable layout extracts the language from the current route:
You can then use this base layout to ensure that pages use the correct
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.
Create a component to show a link for each language:
<LanguagePicker />to your site so it is shown on every page. The example below adds it to the site footer in a base layout:
Hide default language in the URL
Create a directory for each language except the default language. For example, store your default language pages directly in
pages/, and your translated pages in
Add another line to the
src/i18n/ui.tsfile to toggle the feature:
Add a helper function to
src/i18n/utils.ts, to translate paths based on the current language:
Import the helper where needed. For example, a
navcomponent might look like:
The helper function can also be used to translate paths for a specific language. For example, when users switch between languages:
Translate the routes of your pages for each language.
Add route mappings to
useTranslatedPathhelper function in
src/i18n/utils.tsto add router translation logic.
Create a helper function to get the route, if it exists based on the current URL, in
The helper function can be used to get a translated route. For example, when no translated route is defined, the user will be redirected to the home page:
- 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
defaultLocalewithout page generation. The integration is adapter agnostic and UI framework agnostic.