Good morning. I'm trying to render an component in a backend endpoint. My goal is to print the component later via puppeteer.
But I've big problems to solve the i18n problematic there.
Currently I'm trying:

import i18n from '../../i18n';
import { I18nextProvider } from 'react-i18next';
import { NextApiRequest, NextApiResponse } from 'next/types';
import { handleApiError } from 'src/errors/general';
import { InvalidRequestTypeError } from 'src/errors/validation';
import ReactDOMServer from 'react-dom/server';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {

    try {
        if (req.method !== 'GET') {
            throw new InvalidRequestTypeError('Invalid request method');
        }
        const htmlString = ReactDOMServer.renderToString(
          <I18nextProvider i18n={i18n} defaultNS={'default'}>
              <MyComponent />
          </I18nextProvider>,
        );
        console.log(htmlString);
        res.status(200).json({});
    } catch (error) {
        console.error(error);
        handleApiError(error, res);
    }
}

i18n:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
    backend: {
        loadPath: 'public/locales/de/default.json', // Pfad zu Ihren Ãœbersetzungsdateien
    },
    lng: 'de', // Sie können die Standardsprache hier festlegen
    fallbackLng: 'de',
    defaultNS: 'default',
    interpolation: {
        escapeValue: false,
    },
});

export default i18n;

But this ends in:
a page, which contains only the keys of the words to translate:

[...]
<span class="topic">myComponent.generation.footer.website</span><span class="content">https://testwebsite.de</span></div><di
[...]

can somebody help here?