Next.js I18n

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.js first:

const withNextra = require('nextra')({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.tsx'
module.exports = withNextra({
  i18n: {
    locales: ['en', 'zh', 'de'],
    defaultLocale: 'en'

Add Middleware

Then, you need to add a middleware.js file in the root of your project (related Next.js docs (opens in a new tab)):

export { locales as middleware } from 'nextra/locales'

If you already have the middleware defined, you can do this instead:

import { withLocales } from 'nextra/locales'
export const middleware = withLocales(request => {
  // Your middleware code...

Add Locale to Filenames

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


Configure the Docs Theme

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

i18n: [
  { locale: 'en', text: 'English' },
  { locale: 'zh', text: '中文' },
  { locale: 'de', text: 'Deutsch' },
  { locale: 'ar', text: 'العربية', direction: 'rtl' }