# How the Prompt Engineering Guide Supports Multiple Language Translations

> Learn how the Prompt Engineering Guide leverages Next.js i18n and Nextra for seamless multiple language translations with locale-aware components and MDX files.

- Repository: [DAIR.AI/Prompt-Engineering-Guide](https://github.com/dair-ai/Prompt-Engineering-Guide)
- Tags: best-practices
- Published: 2026-03-03

---

**The Prompt Engineering Guide supports multiple language translations through a Next.js internationalization (i18n) configuration paired with the Nextra docs theme, using per-locale MDX content files and locale-aware React components.**

The [dair-ai/Prompt-Engineering-Guide](https://github.com/dair-ai/Prompt-Engineering-Guide) is an open-source documentation project built on Next.js and Nextra. To support multiple language translations, the project leverages Next.js built-in i18n routing, Nextra’s language selector UI, and a file-based content structure where each page maintains separate MDX files for every supported locale.

## Next.js i18n Configuration for Multiple Language Support

The foundation for translation support resides in [`next.config.js`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/next.config.js). This file declares all available locales and sets the default fallback language.

```javascript
// https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/next.config.js
module.exports = withNextra({
  i18n: {
    locales: ['en','zh','jp','pt','tr','es','it','fr','kr','ca','fi','ru','de','ar'],
    defaultLocale: 'en',
  },
  // ...
})

```

When a user visits a path such as `/zh/pages/introduction` or `/de/tools`, Next.js automatically resolves the locale from the URL segment and passes it to the Nextra theme. If a specific translation file is missing, the system falls back to the `defaultLocale` (`en`).

## Nextra Theme Language Selector Implementation

The user-facing language switcher is configured in [`theme.config.tsx`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/theme.config.tsx). This file maps locale codes to human-readable labels displayed in the UI dropdown.

```tsx
// https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/theme.config.tsx
i18n: [
  { locale: 'en', text: 'English' },
  { locale: 'zh', text: '中文' },
  { locale: 'jp', text: '日本語'},
  { locale: 'pt', text: 'Português'},
  { locale: 'tr', text: 'Türkçe'},
  { locale: 'es', text: 'Español'},
  { locale: 'it', text: 'Italiano'},
  { locale: 'fr', text: 'Français'},
  { locale: 'kr', text: '한국어'},
  { locale: 'ca', text: 'Català'},
  { locale: 'fi', text: 'Suomi'},
  { locale: 'ru', text: 'Русский'},
  { locale: 'de', text: 'Deutsch'},
  { locale: 'ar', text: 'العربية'},
],

```

The `i18n` array feeds the dropdown component, allowing readers to switch languages dynamically. Nextra handles the routing transition automatically when a selection is made.

## Per-Locale Content File Structure

Each documentation page exists as a set of MDX files differentiated by locale suffixes. The file naming convention follows the pattern `pagename.locale.mdx`.

For example, the homepage exists in multiple translations:

- **English**: `pages/index.en.mdx` ([view](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/pages/index.en.mdx))
- **Chinese**: `pages/index.zh.mdx` ([view](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/pages/index.zh.mdx))
- **Portuguese tools page**: `pages/tools.pt.mdx` ([view](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/pages/tools.pt.mdx))

When Next.js resolves a request for `/pt/tools`, it loads `pages/tools.pt.mdx`. If `tools.pt.mdx` is absent, the framework serves `tools.en.mdx` as the fallback.

## Locale-Aware Component Logic

React components within the guide access the current locale via Next.js’s `useRouter` hook to conditionally render elements. The `CopyPageDropdown` component demonstrates this pattern:

```tsx
// https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/components/CopyPageDropdown.tsx
const router = useRouter();
const isEnglishPage = router.locale === 'en' && router.pathname !== '/';

```

This logic ensures that certain features—such as the “Copy page” button—appear only on English pages where the functionality is fully supported, while hiding or adapting them for other locales.

## How to Add a New Language Translation

Extending the guide to support multiple language translations for a new locale requires three configuration steps and the creation of content files.

**Step 1: Register the locale in Next.js**

Add the locale code to the `locales` array in [`next.config.js`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/next.config.js):

```javascript
// next.config.js
i18n: {
  locales: ['en','zh','jp','pt','tr','es','it','fr','kr','ca','fi','ru','de','ar','sw'],
  defaultLocale: 'en',
},

```

**Step 2: Add the language label**

Insert a human-readable entry in [`theme.config.tsx`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/theme.config.tsx):

```tsx
// theme.config.tsx
i18n: [
  // ... existing locales
  { locale: 'sw', text: 'Kiswahili' },
],

```

**Step 3: Create translated content files**

For every page requiring translation, create an MDX file with the new locale suffix. For example, to add a German translation of the about page:

```mdx
<!-- pages/about.de.mdx -->

# Über diese Anleitung

Willkommen zur Prompt Engineering Guide...

```

Once committed, the site automatically serves `/de/about` and displays “Deutsch” in the language selector.

## Summary

- **Next.js i18n**: The [`next.config.js`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/next.config.js) file defines 14 supported locales and sets English as the default fallback.
- **Nextra integration**: The [`theme.config.tsx`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/theme.config.tsx) file maps locale codes to display names, powering the UI language dropdown.
- **File-based routing**: Each page uses locale-specific MDX files (e.g., `index.zh.mdx`) to serve translated content.
- **Component awareness**: React components use `useRouter().locale` to conditionally render features based on the active language.
- **Extensibility**: Adding a new translation requires updating two config files and creating suffixed MDX content files.

## Frequently Asked Questions

### What framework does the Prompt Engineering Guide use to support multiple language translations?

The guide uses **Next.js** with the **Nextra** documentation theme. Next.js provides the underlying internationalization routing and locale detection, while Nextra supplies the UI components—such as the language selector dropdown—that render the translated content.

### How does the guide handle missing translations for specific pages?

If a user requests a page in a locale where the translation file does not exist, Next.js automatically falls back to the `defaultLocale` defined in [`next.config.js`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/next.config.js) (which is `en`). For example, requesting `/fr/tools` when `tools.fr.mdx` is missing will serve `tools.en.mdx` instead.

### What files need to be modified to add a new language to the guide?

You must update three locations: first, add the locale code to the `locales` array in [`next.config.js`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/next.config.js); second, add the display name mapping to the `i18n` array in [`theme.config.tsx`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/theme.config.tsx); third, create translated content files using the locale suffix (e.g., `pages/about.newlocale.mdx`).

### How does the language selector UI know which languages to display?

The language selector reads the `i18n` configuration array exported from [`theme.config.tsx`](https://github.com/dair-ai/Prompt-Engineering-Guide/blob/main/theme.config.tsx). Each object in this array contains a `locale` code and a `text` label (e.g., `{ locale: 'es', text: 'Español' }`). Nextra renders these entries as options in the dropdown menu, allowing users to switch between the configured languages dynamically.