Issue 2963: Adding Next-i18next for front-end translations

[AmasiaNalbandian]

Issue This PR Addresses

fixes #2963

Type of Change

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Description

I added next-i18next to be able to translate our front end web page.

As of now, when you go to google and navigate to settings > language and set to spanish or english you should see the strings for the corresponding language on the page navigation.

Steps to test the PR

1. MUST do npm ci
2. cp config/env.staging .env
3. npm run dev
4. Notice the top right navigation "about us" and "sign in" in english.
5. Go to chrome settings > language > set to display in spanish. This will reload your browser (dont freak out!)
6. refresh the web page, and you should see the strings for about us and sign in in spanish
   
7. To go back to english, search in the settings for idioma (language in spanish).

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[gitpod-io]

[AmasiaNalbandian]

I'm putting this PR up but I am having ALOT of problems with the following issue: vercel/next.js#20616 and vercel/next.js#18318

We simply can't build the static pages using pnpm run build in /src/web
Is this function necessary?

[cindyorangis]

Oddly enough, I couldn't figure out how to do the Settings thing for Google Chrome but I was able to do it in Firefox.

Pretty cool that going to localhost:8000/es translates the About Us and Sign In into Spanish! I tried localhost:8000/fr just to see what it does and I got a 404 because there's no French. Which is what we expect.

There's quite a bit of stuff I learned while reading your PR. I knew that Next.js has its own i18n thing so I questioned why we chose to use a third-party package as opposed to something Next.js already has built-in. Apparently, Next.js internationalization routing only handles the routing and not the actual translation functionality itself. I can see Next.js internationalized routing being used to support a toggle or dropdown menu to allow users to select the language they want.

next-i18next claims to fully support SSG/SSR so the error below could be a Next.js error, not next-i18next

Error: i18n support is not compatible with next export. See here for more info on deploying

[cindyorangis]

I read vercel/next.js#18318 and I cannot believe the number of people running into this problem wow. I'm stumped.

[AmasiaNalbandian]

I read vercel/next.js#18318 and I cannot believe the number of people running into this problem wow. I'm stumped.

I'm assuming they have 0 intentions of providing a fix for it. I've tried to go with many of the fixes, however after attempting to do this again today, I think we should just scrap nexti18next.

I've explored the routing option and if we only want the about page translated, it's doable. I might play around with this and see it out as a POC

[AmasiaNalbandian]

closing this - I got the routing option to work and will be much easier to implement than next-i18next