i18n of text in theme config

[JohnUW42]

Hi!

Would you please tell what is the procedure of internationalising text in the theme's config.

For example, I have the following in theme.config.tsx:

footer: { text: 'Copyright © {new Date().getFullYear()} Me. All rights reserved.', },

How can I add German, French, other translations of the relevant text ?

Thank you!

[fuma-nama]

You can render a component, use the useRouter hook or other methods inside to get the current language and return different content based on the language

[JohnUW42]

Thank you for the response.

Too bad that I am not really a coder, but rather an end user.

If it is not much trouble, I would appreciate if anyone could suggest a modification to the code below, please.

On a side note, hearing how ChatGPT can write code, I've been now for an hour trying the AI to come up with a woking solution — nothing came up, unfortunately. In all my tries the generated code either did not build or did not switch the locale text :-(

Thank you very much!

import React from 'react'
import { DocsThemeConfig } from 'nextra-theme-docs'
import { useRouter } from 'next/router'

const config: DocsThemeConfig = {
  logo: <span>My Project</span>,
  useNextSeoProps() {
    const { asPath } = useRouter()
    if (asPath !== '/') {
      return {
        titleTemplate: '%s – MYSITE'
      }
    }
  },
  footer: {
    text: 'Copyright © {new Date().getFullYear()} Me. All rights reserved.',
  },
  i18n: [
    { locale: 'en', text: 'English' },
    { locale: 'lv', text: 'Latviešu' }
  ]
}

export default config

[JohnUW42]

Was trying ChatGTP to help me further. Below is the most successful attempt yet. However I'm losing the footer styling.

Please help, if anyone can.

Thank you.

import React from 'react';
import { DocsThemeConfig } from 'nextra-theme-docs';
import { useRouter } from 'next/router';

const MyFooter = () => {
  const { locale } = useRouter();

  if (locale === 'en') {
    return <span>English footer text</span>;
  }

  if (locale === 'lv') {
    return <span>Latvian footer text</span>;
  }

  // default to English
  return <span>English footer text</span>;
};

const config: DocsThemeConfig = {
  logo: <span>My Project</span>,
  useNextSeoProps() {
    const { asPath } = useRouter();
    if (asPath !== '/') {
      return {
        titleTemplate: '%s – MYSITE'
      };
    }
  },
  footer: {
    component: MyFooter
  },
  i18n: [
    { locale: 'en', text: 'English' },
    { locale: 'lv', text: 'Latviešu' }
  ]
};

export default config;

[fuma-nama]

The code above replaces the default footer component to your custom component. If you only want to change the text, try use text instead

footer: {
    text: MyFooter
}

[JohnUW42]

That works!
Thank you very much!

[fuma-nama]

Glad to hear that!

If you like the solution, you can click "Mark as answer" so that people can know this question has been solved