Next.js I18n

⚠️

This feature is only available in the docs theme.

Nextra supports Next.js Internationalized Routing (opens in a new tab) out of the box. These docs explain how to configure and use it.

Add I18n Config

To add multi-language pages to your Nextra application, you need to config i18n in next.config.mjs first:

next.config.mjs

import nextra from 'nextra'
 
const withNextra = nextra({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.tsx'
})
 
export default withNextra({
  i18n: {
    locales: ['en-US', 'zh-CN', 'de-DE'],
    defaultLocale: 'en-US'
  }
})

Add Locale to Filenames

Then, add the locale codes to your file extensions (required for the default locale too):

/pages
  _meta.en-US.json
  _meta.zh-CN.json
  _meta.de-DE.json
  index.en-US.md
  index.zh-CN.md
  index.de-DE.md
  ...

Configure the Docs Theme

Finally, add the i18n option to your theme.config.jsx to configure the language dropdown:

theme.config.jsx

i18n: [
  { locale: 'en-US', name: 'English' },
  { locale: 'zh-CN', name: '中文' },
  { locale: 'de-DE', name: 'Deutsch' },
  { locale: 'ar-SA', name: 'العربية', direction: 'rtl' }
]

Next.js SSG Custom CSS