I can't figure out why i18n its not working

[GerardPolloRebozado]

I have tried setting up a new repository and folow the steps in the docs. The issue is that it doesnt show any text when using the t() or show any error

[3m1l1a]

Hi!

I have not updated to the latest version yet. But compare the docs with my code #10716, maybe it will help. Also take a look at the issue I’m referencing in my discussion.

I never got the custom-translations.ts to work, there are bugs being worked on. Use the payload.config.ts for now instead.

Regards, Emilia

[GerardPolloRebozado]

Thanks for your reply but I have tried with your code and I have typescript error even on the latest version of payload, and if I leave the custom translation just to use it as types the error dissapears but text still not visible:

'use client'
import React from 'react'
import './styles.css'
import { CustomTranslationsObject, CustomTranslationsKeys } from '@/custom-translations'
import { useTranslation } from '@payloadcms/ui'

export default function HomePage() {
  const { i18n, t } = useTranslation<CustomTranslationsObject, CustomTranslationsKeys>()
  return (
    <div className="home">
      <p>{t('general:myCustomKey')}</p>
    </div>
  )
}

i18n: {
    fallbackLanguage: 'en',
    supportedLanguages: { en, es },
    translations: {
      en: {
        general: {
          myCustomKey: 'My custom english translation',
        },
        fields: {
          addLabel: 'Add!',
        },
      },
      es: {
        general: {
          myCustomKey: 'Mi traducción personalizada en español',
        },
        fields: {
          addLabel: '¡Añadir!',
        },
      },
    },
  },

And then the customn translations is only imported where I need the types:

import { enTranslations } from '@payloadcms/translations/languages/en'
import type { NestedKeysStripped } from '@payloadcms/translations'

export const customTranslations = {
  en: {
    general: {
      myCustomKey: 'My custom english translation',
    },
    fields: {
      addLabel: 'Add!',
    },
  },
  es: {
    general: {
      myCustomKey: 'Mi traducción personalizada en español',
    },
    fields: {
      addLabel: '¡Añadir!',
    },
  },
}

export type CustomTranslationsObject = typeof customTranslations.en & typeof enTranslations
export type CustomTranslationsKeys = NestedKeysStripped<CustomTranslationsObject>

[3m1l1a]

With Payload v3.29.0 (2025-03-20). Following the docs för i18n and l10n works fine for adding the functionality and for extending the English languages with custom translations and types in the backend (Payload) src/app/(payload). The docs isn’t clear about adding it to the frontend src/app/(frontend), included with the blank and website templates are supposed to work out of the box as well.

I had no luck with extending a second language, in my case Swedish.
I got an error message saying duplicate shared translations object, when trying to add the custom types.

@JessChowdhury any tips on this?
Also, if it would be possible to select default and additional languages and locales with create-payload-app would be awesome! My default language is Swedish and I have to add it to every project I create. Thanks in advance!
Regards, Emilia

[GerardPolloRebozado]

for now im just going to use next-intl for the frontend. The backend and text that comes from payload api works fine for me except for floats that use dot instead of period