Add Internationalization Support (English & French) to Frontend

[OchiengPaul442]

Is your feature request related to a problem? Please describe.
Our current AirQo website frontend is built with Next.js and is only available in English. This limits accessibility and usability for our French-speaking audience in West Africa. Users are currently frustrated because they cannot interact with the site in their native language, which may affect user engagement and overall satisfaction.

Describe the solution you'd like
We would like to add internationalization support to the AirQo website's frontend by implementing a language toggle between English and French. The solution should include:

• A language toggle button placed at the extreme right of the top banner that allows users to switch between English and French seamlessly.
• Integration of a suitable internationalization library (e.g., next-i18next) for managing translations in our Next.js application.
• Creation and implementation of language resource files for both English and French, ensuring all static and dynamic text elements on the website are translatable.
• Following best practices for internationalization in Next.js, with clear documentation to support future additions of more languages.

Describe alternatives you've considered

• Custom Internationalization Solution: Developing a custom solution without a dedicated library was considered, but it may lead to increased maintenance and potential pitfalls in handling edge cases.
• Other i18n Libraries: While alternatives such as react-intl were reviewed, next-i18next aligns more closely with our Next.js stack and offers a straightforward integration with existing server-side rendering and routing.

Additional context

• This issue focuses exclusively on the frontend implementation. No changes are required on the Django backend at this time.
• Coordination with the UI/UX team is encouraged to ensure the language toggle integrates seamlessly into the existing design without disrupting the user experience.
• Performance implications should be considered to ensure smooth switching between languages without negatively impacting page load times or user interactions.
• Screenshots or design mockups of the proposed toggle position and style can be provided upon request.

To help guide the implementation, here are some proposed resources and links:

next-i18next Documentation:

• https://github.com/isaachinman/next-i18next
• Provides a comprehensive guide on integrating internationalization in Next.js using next-i18next.

Next.js Internationalized Routing:

• https://nextjs.org/docs/advanced-features/i18n-routing
• Official documentation on Next.js’ built-in support for internationalized routing, which might complement our i18n implementation.

Next.js Examples for Internationalization:

• https://github.com/vercel/next.js/tree/canary/examples/with-next-i18next
• An example repository demonstrating how to implement next-i18next with Next.js.

React Internationalization Best Practices:

• https://react.i18next.com/
• Even if we are using next-i18next, this resource offers valuable insights into handling i18n within React applications.

How to Contribute
Assign Yourself: Only pick this issue if it has no assignee.
Implementation: Fork the repo and create a feature branch.
Submit a pull request with clear documentation of changes(including screenshots).

[TroyMoses]

I ask to be assigned this issue