Next.js I18n

⚠️

This feature is only available in the docs theme.

Nextra supports Next.js Internationalized Routing out of the box. This docs explains 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):

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...
})

Use Add Locale to Filenames

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

/pages
  _meta.en.json
  _meta.zh.json
  _meta.de.json
  index.en.md
  index.zh.md
  index.de.md
  ...

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' }
]

Last updated on December 3, 2022

Next.js SSG Next.js Image