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

# Internationalization in Next.js

Learn how to create a basic implementation of field-level translation in a Next.js 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/app/[...slug]/page.js` file:

src/app/\[...slug\]/page.js

```javascript
import { StoryblokStory } from "@storyblok/react/rsc";
import { getStoryblokApi } from "@/lib/storyblok";

export default async function Page({ params }) {
  const { slug } = await params;

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

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

  const fullSlug = slug ? slug.join("/") : "home";

  const storyblokApi = getStoryblokApi();
  let { data } = await storyblokApi.get(`cdn/stories/${fullSlug}`, {
    version: "draft",
    resolve_relations: "featured-articles.articles",
    language,
  });

  return (
    <div>
      <StoryblokStory story={data.story} />
    </div>
  );
}
```

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.

## Related resources

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

[Internationalization in Next.js](https://nextjs.org/docs/pages/guides/internationalization)

## Pagination

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