internationalization of BeforeLogin component in Payload website template

[3m1l1a]

Hi!

I have added i18n to the BeforeLogin component. I had to convert it from a server component to a client component with 'use client' to make it work. What is best practices, is it possible to keep it as a server component?

'use client'

import React from 'react'
import { useTranslation } from '@payloadcms/ui'

const BeforeLogin: React.FC = () => {
  const { t } = useTranslation()

  return (
    <div>
      <p>
        <b>{t('BeforeLogin:welcome')}</b>
      </p>
      <p>{t('BeforeLogin:welcomeMessage')}</p>
    </div>
  )
}

export default BeforeLogin

I couldn't implement type safety. Tried follow the docs: https://payloadcms.com/docs/configuration/i18n#typescript
Could anyone give me an explanation for a newbie?

ideally I would like to have the translations in a separate package like @payloadcms/translations-seed.

My payload.config:

// Other imports
import { sv } from '@payloadcms/translations/languages/sv'
import { en } from '@payloadcms/translations/languages/en'
// Other imports

export default buildConfig({
 i18n: {
    supportedLanguages: { sv, en },
    fallbackLanguage: 'sv',
    translations: {
      sv: {
      BeforeLogin: {
          welcome: 'Välkommen till din manöverpanel!',
          welcomeMessage:
            'Det är här webbplatsadministratörer loggar in för att hantera din webbplats.',
        },
      },
      en: {
      BeforeLogin: {
          welcome: 'Welcome to your dashboard!',
          welcomeMessage: 'This is where site admins will log in to manage your website.',
        },
      },
    },
  },
  // Other configurations
  })

[3m1l1a]

I guess the typescript problem has something to do with this #9858.

[3m1l1a]

See also this discussion #11710.