Does PayloadCMS i18n support frontend NextJS applications or only backend/Admin Panel?

[only-issues]

Hi PayloadCMS team and community! 👋

I'm new to PayloadCMS and have a question about the i18n functionality mentioned in the documentation.

Context:
I'm building a multilingual website using PayloadCMS v3 with NextJS as the frontend. I've read through the i18n documentation and understand that it supports:

Admin Panel interface translations (30+ languages)

Backend API error messages

Custom translations for collections, globals, and field labels

TypeScript support for custom translations

My Question:
Does the PayloadCMS i18n configuration also work for the frontend NextJS application, or is it limited to the backend and Admin Panel only?

Specific scenarios I'm wondering about:

Can I use PayloadCMS i18n translations directly in my NextJS frontend components?

Do I need to implement a separate i18n solution (like next-i18next, next-intl, etc.) for the frontend?

If PayloadCMS i18n doesn't cover frontend, what's the recommended approach for maintaining consistency between backend and frontend translations?

Additional context:
I want to ensure I'm not duplicating translation efforts and would prefer to have a unified i18n system across both backend and frontend if possible.

Any guidance or examples would be greatly appreciated!

Thanks in advance! 🙏

[Patrickroelofs]

i18n is for the admin panel, this means you can have translations for every language available in the admin panel, you make the choice which languages to support by including them in your project. This translates the admin panel, not your content.

Localization is for your own content, this allows you to define languages which can then be edited by your content editor, you can create any locale you want and edit content for that locale.

[only-issues]

Thank you for your response, but I still don't fully understand.
For example: /src/app/(frontend)/auth/login/page.tsx
This file contains the following code:

import React from 'react';
export function LoginPage() {
  return (
    <div>
      <form>
        {/* Form login */}
      </form>
      <button type="submit">I18n Login Button Label</button>
    </div>
  );
}

So, for the text I18n Login Button Label, should I use an external library like next-intl or next-i18next, or should I use the built-in I18n from Payload?

[Patrickroelofs]

The documentation for I18n is only for the payload admin panel the /admin route in your project. If your own frontend needs translations you can use Localization to have content in multiple languages. But for the case of the submit button you would most likely use a package like next-intl to render that data into multiple languages, since its values that don't really change in doesn't need to be in the admin panel and can be saved in a json file in the project. You can of course register that button text value in PayloadCMS if you want to.