How to solve "expression of type 'string' can't be used to index type"

I try to migrate a webseite from React to Next.js, but struggeling to implement i18n for SSR-pages. At the moment I try to follow this tutorial here: https://localizely.com/blog/nextjs-i18n-tutorial/

I’ve already created an lang-folder and put some json-files in there. Here is the content of de.json:

{
    "demo": "Startseite (de)",
    "eventlist":"Event-Liste",
    "menu": {
        "home": "Startseite",
        "events": "Events",
        "nearby" : "In deiner Nähe",
        "worthknowing": "Gut zu wissen",
        "about": "Über uns"
    }
}

I’ve also followed the tutorial to adapt the _app.tsx:

...
import { useRouter } from 'next/router'
import { IntlProvider } from 'react-intl'
import de from '../lang/de.json'
import en from '../lang/en.json'
import fr from '../lang/fr.json'
import it from '../lang/it.json'
...
const messages = {
  de: de,
  en: en,
  fr: fr,
  it: it,
}
...
function App({ Component, pageProps }: AppProps) {
  let { locale } = useRouter()
  return (
    <IntlProvider locale={locale} messages={messages[locale]}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </IntlProvider>
  )
}

export default App

Unfortunately there is a problem to set the messages-prop of the IntlProvider:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type

I can see, what the problem ist, whenI inspect the "messages"-object:

const messages: {
    de: {
        demo: string;
        eventlist: string;
        menu: {
            home: string;
            events: string;
            nearby: string;
            worthknowing: string;
            about: string;
        };
    };
...

As this is the first time, I use TypeScript, i’m some kind of lost to figure out how to solve this situation.

I can think of 3 different solutions:
a) type casting "locale" at the point, where I assign thes "messages"-Prop
b) type casting "locale" at definition time
c) somehow use Strings as object keys in "messages"

What is the best way, to work this out?

>Solution :

The error message is indicating that the type of the locale variable is not matching the keys of the messages object.
try to add typeof like so:

let { locale } = useRouter()
const messages = {
  de: de,
  en: en,
  fr: fr,
  it: it,
}
const localeKey = locale as keyof typeof messages //this should help
return (
  <IntlProvider locale={locale} messages={messages[localeKey]}>
    <Layout>
      <Component {...pageProps} />
    </Layout>
  </IntlProvider>
)

but I would advise to look for a better solution for managing language support.