---
title: Internationalization in Next.js
description: Learn how to set up basic internationalization using field-level translation within your Next.js project.
url: https://storyblok.com/docs/guides/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, go to **Settings** > **Internationalization** > **Languages** and add `es` (Spanish).

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

> [!NOTE]
> Learn more in the [internationalization concept](/docs/concepts/internationalization).

## Use the language parameter

Update the `src/app/[...slug]/page.js` file to support language paths.

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, an array with all language codes configured in the space is defined.

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

In the example code, if the first array element of the `slug` is included in the `languages` array, it is set as the language parameter for the API request. Moreover, the first array element is subsequently removed so that the slug used for the API request does not 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/guides/nextjs/content-modeling)