How the Prompt Engineering Guide Supports Multiple Language Translations

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 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. This file declares all available locales and sets the default fallback language.

// 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. This file maps locale codes to human-readable labels displayed in the UI dropdown.

// 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)
• Chinese: pages/index.zh.mdx (view)
• Portuguese tools page: pages/tools.pt.mdx (view)

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:

// 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:

// 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:

// 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:

<!-- 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 file defines 14 supported locales and sets English as the default fallback.
• Nextra integration: The 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 (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; second, add the display name mapping to the i18n array in 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. 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}