Next.js I18n

⚠️

This feature is only available in the docs theme.

Nextra supports Next.js Internationalized Routing 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