What should be the locale type

[addlistener]

What should be the locale type here?

// pages/_app.tsx
import { I18nProvider } from '../locales'
import { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <I18nProvider locale={pageProps.locale}>
      <Component {...pageProps} />
    </I18nProvider>
  )
}

I tried using typeof en but there's type mismatch. Even though all the locales are the same.

// locales/en.ts
export default {
  "product slogan": "xxxx",

  "dash": {
    "leftnav": {
      "sites": "xxxx",
      "account": "xxxx"
    }
  }
} as const

I don't know it's FlattenLocale or as const. Still thinking...

The deducted type

My type

[QuiiBz]

It's a complex type: to avoid manually writing it, you can use:

ComponentProps<typeof I18nProvider>['locale']

[addlistener]

Thank you! It would be great this could be included in the official examples