I have the default layout.tsx and page.tsx files. For the project I am doing I don’t need anything else and it will be Client Side so I would like to know how to configure i18n so that in the page.tsx file I can use translations.
I don’t need the router or anything related to the urls, I just need to use the t() function to be able to show the messages in the indicated language.
In the public/locales folder I have the language json files.
I have this i18n configuration in the next-i18next.config.mjs file:
<code>export default {
i18n: {
defaultLocale: 'es',
locales: ['en', 'es'],
localeDetection: false,
},
};
</code>
<code>export default {
i18n: {
defaultLocale: 'es',
locales: ['en', 'es'],
localeDetection: false,
},
};
</code>
export default {
i18n: {
defaultLocale: 'es',
locales: ['en', 'es'],
localeDetection: false,
},
};
and this in the next.config.mjs file:
<code>import nextI18NextConfig from './next-i18next.config.mjs';
/** @type {import('next').NextConfig} */
const nextConfig = {
i18n: nextI18NextConfig.i18n,
};
export default nextConfig;
</code>
<code>import nextI18NextConfig from './next-i18next.config.mjs';
/** @type {import('next').NextConfig} */
const nextConfig = {
i18n: nextI18NextConfig.i18n,
};
export default nextConfig;
</code>
import nextI18NextConfig from './next-i18next.config.mjs';
/** @type {import('next').NextConfig} */
const nextConfig = {
i18n: nextI18NextConfig.i18n,
};
export default nextConfig;
What should I have in layout.tsx and/or page.tsx for the translations to work?
I have searched the internet and there is no example of what I want to achieve.
1