Road to v2: Switching to React/NextJS and Implementing i18n

Introduction

At Gentlent, we are constantly striving to enhance our software as a service and web development capabilities. We're excited to kick off our new blog series, "Road to v2," where we will share the development journey of releasing the latest version of our services. This new version brings a host of exciting features and re-designs while maintaining a familiar look and feel. In this first part of the series, we'll dive into the process of switching from vanilla JavaScript to React/NextJS and implementing internationalization (i18n) to support multiple languages.

Why Switch to React/NextJS?

As our services grew in complexity, we realized the need for a more robust and efficient framework to build scalable and maintainable applications. After careful consideration, we chose React, a popular JavaScript library for building user interfaces, and its companion framework, NextJS, for server-side rendering and routing.

The decision to adopt React/NextJS brought several benefits to our development process:

1. Component-Based Architecture: React's component-based approach enables us to break down complex user interfaces into reusable and manageable parts. This modular structure improves code maintainability and encourages code reusability across different parts of our application.
2. Efficient Rendering: NextJS offers server-side rendering (SSR), which allows us to pre-render pages on the server, resulting in faster initial page loads and improved performance. This ensures a seamless user experience, especially for applications with dynamic content.
3. Enhanced Developer Experience: React/NextJS provides an extensive ecosystem of libraries, tools, and community support. This ecosystem empowers our development team to be more productive, deliver high-quality code, and leverage best practices in the industry.

Implementing Internationalization (i18n)

To cater to our global user base, we recognized the importance of providing multilingual support in our application. Implementing internationalization (i18n) was a crucial step in making our services accessible and user-friendly for people worldwide.

Custom i18n Implementation

To achieve i18n functionality, our development team created a custom implementation tailored to the specific needs of our services at Gentlent. This custom i18n solution allows us to handle translations and support multiple languages seamlessly.

Setting Up English and German Languages

With our custom i18n solution, we started by enabling support for English (en) and German (de) languages in our application. We created separate translation files for each language, encapsulating all the text snippets used throughout the application.

Loading Language Resources

Our custom i18n implementation provides a straightforward mechanism for loading language resources based on the user's preference. When a user selects a specific language, we dynamically load the corresponding translation file and make it available throughout the application.

Switching Between Languages

To allow users to switch between languages seamlessly, we added a language switcher functionality to the user interface. When a user selects a different language, the application dynamically updates the content by fetching the corresponding translation file and refreshing the page with the new language. You will be able to find it at the bottom of most pages.

Extensibility: Adding New Languages

Our custom i18n implementation was designed with extensibility in mind, allowing us to add new languages as our user base expands. Adding a new language is a straightforward process that involves creating a new translation file for the desired language and integrating it into the application.

Conclusion

In this first part of our "Road to v2" series, we explored the journey of switching from vanilla JavaScript to React/NextJS and implementing internationalization (i18n) using our custom solution in the new version of our services at Gentlent. By embracing React/NextJS, we gained the benefits of a component-based architecture, efficient rendering, and an enhanced developer experience. Additionally, our custom i18n implementation ensures that our services are accessible and user-friendly for people around the world.

Stay tuned for the next part of our series, where we will delve into the exciting new features and re-designs that our team has been working on for v2.

If you have any questions or feedback, please don't hesitate to reach out to us. We appreciate your continued support as we strive to deliver the best possible experience for our users.