Configure i18n for Portaljs

[steveoni]

This pull request configures and setup i8n for Portal js. The configuration leads to the upgrading of nextjs from version 9.x to 10, due to the fact that it is very difficult to set up i18n for server-side Props.

The latest version of Nextjs gives the ability to switch from a different language using subpath, this makes providing language namespace easier.

Usecase

For subsequent users to add their language of choice, below are the steps to take

1. Update next.config.js, to add more languages to the i18n locales

   i18n: {
   locales: ['en', 'fr', 'nl-NL'], // add more language to the list
   defaultLocale: 'en',  // set the default language to use
   },

2. Create a folder for the language in locales --> locales/en-Us

3. In the language folder, different namespace files (json) can be created for each translation. For the index.js use-case, I named it common.json

   
   // locales/en/common.json
   {
   "title" : "Portal js in English",
   }

// locales/fr/common.json { "title" : "Portal js in French", }

4. To used on pages using Server-side Props.
```js
import { loadNamespaces } from './_app';
import useTranslation from 'next-translate/useTranslation';

const Home: React.FC = ()=> {
  const { t } = useTranslation();
  return (
    <div>{t`common:title`}</div> // we use common and title base on the common.json data
  );
};

export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
      ........  ........
  return {
    props : {
      _ns:  await loadNamespaces(['common'], locale),
    }
  };
};

5. Go to the browser and view the changes using language subpath like this. http://localhost:3000 and http://localhost:3000/fr. Note The subpath also activate chrome language Translator

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/datopian1/portal/34hmj2og9
✅ Preview: Failed

[Deployment for 7a13bcb failed]

[rufuspollock]

@steveoni looks good.

• can you rebase so we can merge (merge conflict atm)
• can you add some info to the README about how to use this (similar to what you have in PR description)

[steveoni]

@steveoni looks good.

• can you rebase so we can merge (merge conflict atm)
• can you add some info to the README about how to use this (similar to what you have in PR description)

ok. I will do that now.

[steveoni]

The conflict is now resolved and the readme is updated @rufuspollock

[anuveyatsu]

@steveoni I have left some comments. Also, please remove package-lock.json file as we are using yarn.lock and yarn by default. Having both lock files is risky as they can easily become out of sync.

[anuveyatsu]

@steveoni any updates on this PR? Please, check my review.

[steveoni]

@steveoni any updates on this PR? Please, check my review.

I thought I'd made the changes last week but I've not. I'm sorry for that. I will do that today

[steveoni]

@anuveyatsu