Internationalization in Next.js

Learn how to create a basic implementation of field-level translation in a Next.js project.

Setup

Alternatively, 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.

Use the language parameter

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

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.

Related Resources

• Concepts - Internalization
• Internalization Guide for Next.js