Seamless Internationalization: Balancing CMS and Frontend with Umbraco and Next.js

Umbraco CMS offers robust features to support internationalization, making it easier to manage multilingual websites. Two key features are in-place localized content and dictionaries.

1. In-Place Localized Content

In-place localized content allows content editors to manage different language versions of the same content directly within the Umbraco interface. This feature ensures a streamlined process for updating and maintaining content across multiple languages without the need to duplicate or manually sync content. Editors can switch between languages within the same content node, making it easy to compare and ensure consistency.

2. Dictionaries

Dictionaries in Umbraco provide a centralized way to manage translations of static text used throughout the website, such as labels, error messages, and other UI elements. By defining dictionary items, editors can maintain translations in a single location, ensuring consistency and making updates more efficient. Each dictionary item can have multiple translations corresponding to the different languages supported by the site.

These features enable content editors to deliver a seamless multilingual user experience by simplifying the localization process and maintaining consistency across various language versions of the website.

Internationalization Libraries for Next.js

Next.js does not include internationalization (i18n) support out of the box, but several libraries can help developers implement i18n seamlessly. Here are some popular choices:

1. next-i18next
   - Provides an easy way to add i18n support using the i18next ecosystem.
   - Features include automatic language detection, server-side translations, and dynamic namespaces.
   - Ideal for projects requiring comprehensive i18n management with minimal configuration.

2. react-intl
   - Part of the FormatJS suite, designed for formatting dates, numbers, and strings.
   - Provides advanced i18n features like message formatting and locale data handling.
   - Works well with any React application, including those built with Next.js.

3. next-translate
   - Focuses on simplicity and performance.
   - Allows loading translations from static files, optimizing for static export scenarios.
   - Supports multiple locales and easy integration with Next.js routing.

Features of `next-intl`

For this website, we chose `next-intl` to handle internationalization within the Next.js framework. Here are some key features that make `next-intl` a strong choice:

1. Simple Integration
   - Easily integrates with Next.js, requiring minimal setup.
   - Uses JSON files to manage translations, making it straightforward to add and update translations.

2. Contextual Translation
   - Supports contextual and dynamic translation, allowing developers to tailor messages based on the application state and user interactions.

3. Locale Management
   - Simplifies locale management with built-in hooks and providers.
   - Automatically handles locale detection and routing, ensuring users see content in their preferred language.

4. Optimized for Performance
   - Designed to be lightweight and efficient, minimizing the impact on application performance.
   - Lazy loads translations, reducing initial load times and improving user experience.

5. SSR and SSG Support
   - Fully compatible with Next.js’s server-side rendering (SSR) and static site generation (SSG) capabilities.
   - Ensures translated content is available at build time, enhancing SEO and load performance.

Conclusions

We choose to leverage Umbraco's out of the box features for managing localized content for both content items and dictionary items. Umbraco's Delivery API delivers the localized content to headless clients. We wrote a simple rest service for exposing the dictionary items. We used next-intl primarily for managing locale. This included identifying current locale from different locations of the website and passing the locale with requests for content and dictionary items to Umbraco.

We anticipate writing more in depth articles on the technical aspects of implementing these features along with articles related to automating the translations process. Check back soon.