next-i18next fail to load locales from public folder

Question

I migrated to next.js and started to use next-i18next. I would like to know, how to make next-i18next load locales from the public folder? It works only when I place the locales folder in the root directory not in public.

i18n.json ;

{
    "locales": ["en", "fr", "ar"],
    "defaultLocale": "en",
    "pages": {
      "*": ["common"]
    }
}

next.config.js ;

// next.config.js
const nextTranslate = require("next-translate");

module.exports = {
  ...nextTranslate(),
};

Answer 1

Create i18n.js file root add this code inside: const path = require('path');

module.exports = {
  i18n: {
    locales: ['en', 'ru', 'tm'],
    defaultLocale: 'en',
    localeDetection: false,
    localePath: path.resolve('./public/locales'),
  },
};

and add config next.config.js file this:

const { i18n } = require('./i18n');

const nextConfig = {
  reactStrictMode: true,
  i18n,
};

module.exports = nextConfig;

after every page add transalition code. example: index.file

import React, { useContext, useEffect } from 'react';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';
import Router from 'next/router';
import { Title } from '../components';
import i18n from '../i18n';

const Home = () => {
  const { t } = useTranslation('');

  useEffect(() => {
    if (!user) {
      Router.push('/login');
    }
  });
  return (
    <>
      <Title title={`${t('page.home')} | Trillo`} />
      <div className="min-h-screen">Home</div>
    </>
  );
};

export const getServerSideProps = async ({ locale }) => (
  { props: {
    ...(await serverSideTranslations(
      locale,
      ['common'],
      i18n,
    )),
  } }
);

export default Home;

After you create these files inside public folder like this. see this and see this 2