---
title: Internationalization in Astro
description: Learn how to set up basic internationalization using field-level translation within your Astro project.
url: https://www.storyblok.com/docs/quickstarts/astro/internationalization
---

# Internationalization in Astro

Learn how to create a basic implementation of field-level translation in an Astro project.

## Setup

In your space, open **Settings** → **Internationalization** → **Languages** and add `es` (Spanish).

-   In the article content type block schema, set the `title` and `content` fields as translatable.
-   Open each article, select the Spanish language, and provide translated content. You can also use [AI Translations](https://www.storyblok.com/docs/manuals/translations#generate-ai-translations).

> [!TIP]
> To learn more, check the [Internationalization concept](/docs/concepts/internationalization).

## Use the language parameter

To support language paths, update the `src/pages/[...slug].astro` file:

src/pages/\[...slug\].astro

```astro
---
import { useStoryblokApi } from "@storyblok/astro";
import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";
import Layout from "../layouts/Layout.astro";

const slug = Astro.params.slug?.split("/") ?? [];

const availableLanguages = ["es"];
const language = availableLanguages.includes(slug[0]) ? slug[0] : undefined;

if (language) {
  slug.shift();
}

const storyblokApi = useStoryblokApi();
const { data } = await storyblokApi.get(`cdn/stories/${slug && slug.length > 0 ? slug.join("/") : "home"}`, {
  version: "draft",
  resolve_relations: "featured-articles.articles",
  language,
});

const story = data.story;
---

<Layout>
  <StoryblokComponent blok={story.content} />
</Layout>
```

First, the code defines an array with all language codes configured in the space.

The language code is the first part of the `full_slug` of each language-specific story version, and the Visual Editor requests that path. For example, the Spanish version of `articles/example-article` becomes `es/articles/example-article`.

In the example code, if the first array element of the `slug` is in the `languages` array, it’s set as the language parameter for the API request. The first array element is subsequently removed so that the slug used for the API request doesn’t contain any language-specific information. The language is exclusively handled via the `language` parameter.

> [!NOTE]
> Note that this approach works for all stories except the home story, if it is defined as the root. Internationalization is highly implementation-specific, and how to handle the home story as well as other aspects is dependent on the exact project requirements. In Astro, you may, for example, want to create a static route `pages/es/index.astro` that takes precedence over the dynamic route `pages/[…slug].astro`. You can configure this static route to fetch the home story in Spanish, rendering it when users visit `https://example.com/es`.

## Related resources

[Concept: Internationalization](/docs/concepts/internationalization)

[Internationalization in Astro](https://docs.astro.build/en/guides/internationalization/)

## Pagination

-   [Previous: Content Modeling in Astro](/docs/quickstarts/astro/content-modeling)
-   [Next: Integrate Next.js with Storyblok](/docs/quickstarts/nextjs)