@intlayer/docs 9.4.4 → 9.5.1

package/blog/en-GB/i18n_using_next-i18next.md

@@ -71,8 +71,6 @@ Before we dive into the implementation, here are some practices you should follo
 
 > See our doc listing everything you need to know about internationalisation and SEO: [Internationalisation (i18n) with next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en-GB/internationalization_and_SEO.md).
 
----
-
 ## Step-by-Step Guide to Set Up i18next in a Next.js Application
 
 <iframe
@@ -119,7 +117,6 @@ Here's the project structure we'll be creating:
 ```
 
 <Steps>
-
 <Step number={1} title="Install Dependencies">
 
 Install the necessary packages using npm:
@@ -141,7 +138,6 @@ yarn add i18next react-i18next i18next-resources-to-backend
 - **i18next-resources-to-backend**: A plugin that enables dynamic loading of translation files, allowing you to load only the namespaces you need.
 
 </Step>
-
 <Step number={2} title="Configure Your Project">
 
 Create a configuration file to define your supported locales, default locale, and helper functions for URL localisation. This file serves as the single source of truth for your i18n setup and ensures type safety throughout your application.
@@ -196,7 +192,6 @@ export function getCookie(locale: Locale) {
 ```
 
 </Step>
-
 <Step number={3} title="Centralise Translation Namespaces">
 
 Create a single source of truth for every namespace your application exposes. Reusing this list keeps server, client, and tooling code in sync and unlocks strong typing for translation helpers.
@@ -208,7 +203,6 @@ export type Namespace = (typeof namespaces)[number];
 ```
 
 </Step>
-
 <Step number={4} title="Strongly Type Translation Keys with TypeScript">
 
 Augment `i18next` to point at your canonical language files (usually English). TypeScript then infers valid keys per namespace, so calls to `t()` are checked end-to-end.
@@ -248,7 +242,6 @@ export type AboutTranslator = TFunction<"about">;
 ```
 
 </Step>
-
 <Step number={5} title="Set Up Server-Side i18n Initialisation">
 
 Create a server-side initialisation function that loads translations for server components. This function creates a separate i18next instance for server-side rendering, ensuring that translations are loaded before rendering.
@@ -305,7 +298,6 @@ export async function initI18next(
 ```
 
 </Step>
-
 <Step number={6} title="Create Client-Side i18n Provider">
 
 Create a client component provider that wraps your application with the i18next context. This provider receives pre-loaded translations from the server to prevent flash of untranslated content (FOUC) and avoid duplicate fetching.
@@ -390,7 +382,6 @@ export default function I18nProvider({
 ```
 
 </Step>
-
 <Step number={7} title="Define Dynamic Locale Routes">
 
 Set up dynamic routing for locales by creating a `[locale]` directory in your app folder. This allows Next.js to handle locale-based routing where each locale becomes a URL segment (e.g., `/en/about`, `/fr/about`).
@@ -444,7 +435,6 @@ export default function LocaleLayout({
 ```
 
 </Step>
-
 <Step number={8} title="Create Your Translation Files">
 
 Create JSON files for each locale and namespace. This structure allows you to organise translations logically and load only what you need for each page.
@@ -539,7 +529,6 @@ Organising translations by namespace (e.g., `common.json`, `about.json`) enables
 </Tabs>
 
 </Step>
-
 <Step number={9} title="Utilise Translations in Your Pages">
 
 Create a page component that initialises i18next on the server and passes translations to both server and client components. This ensures that translations are loaded before rendering and prevents content flashing.
@@ -601,7 +590,6 @@ export default async function AboutPage({
 ```
 
 </Step>
-
 <Step number={10} title="Use Translations in Client Components">
 
 Client components can use the `useTranslation` hook to access translations. This hook provides access to the translation function and the i18n instance, allowing you to translate content and access locale information.
@@ -654,7 +642,6 @@ export default ClientComponent;
 ```
 
 </Step>
-
 <Step number={11} title="Use Translations in Server Components">
 
 Server components cannot use React hooks, so they receive translations via props from their parent components. This approach keeps server components synchronous and allows them to be nested inside client components.
@@ -702,7 +689,6 @@ export default ServerComponent;
 ```
 
 </Step>
-
 <Step number={12} title="Change the language of your content" isOptional={true}>
 
 To change the language of your content in Next.js, the recommended approach is to use locale-prefixed URLs and Next.js links. The example below reads the current locale from the route, removes it from the pathname, and renders one link per available locale.
@@ -776,7 +762,6 @@ export default function LocaleSwitcher() {
 ```
 
 </Step>
-
 <Step number={13} title="Build a localised Link component" isOptional={true}>
 
 Reusing localised URLs across your app keeps navigation consistent and SEO-friendly. Wrap `next/link` in a small helper that prefixes internal routes with the active locale while leaving external URLs untouched.
@@ -829,7 +814,6 @@ export default function LocalizedLink({
 > Tip: Because `LocalizedLink` is a drop-in replacement, migrate gradually by swapping imports and letting the component handle locale-specific URLs.
 
 </Step>
-
 <Step number={14} title="Access the active locale inside Server Actions" isOptional={true}>
 
 Server Actions often require the current locale for emails, logging, or third-party integrations. Combine the locale cookie set by your proxy with the `Accept-Language` header as a fallback.
@@ -869,7 +853,6 @@ export async function stuffFromServer(formData: FormData) {
 > Because the helper relies on Next.js cookies and headers, it works in Route Handlers, Server Actions, and other server-only contexts.
 
 </Step>
-
 <Step number={15} title="Internationalise Your Metadata" isOptional={true}>
 
 Translating content is important, but the main goal of internationalisation is to make your website more visible to the world. I18n is an incredible lever to improve your website visibility through proper SEO.
@@ -938,7 +921,6 @@ export default async function AboutPage() {
 ```
 
 </Step>
-
 <Step number={16} title="Internationalise Your Sitemap" isOptional={true}>
 
 Generate a sitemap that includes all locale versions of your pages. This helps search engines discover and index all language versions of your content.
@@ -995,7 +977,6 @@ export default function sitemap(): MetadataRoute.Sitemap {
 ```
 
 </Step>
-
 <Step number={17} title="Internationalise Your robots.txt" isOptional={true}>
 
 Create a robots.txt file that correctly handles all locale versions of your protected routes. This ensures that search engines do not index admin or dashboard pages in any language.
@@ -1028,7 +1009,6 @@ export default function robots(): MetadataRoute.Robots {
 ```
 
 </Step>
-
 <Step number={18} title="Set Up Middleware for Locale Routing" isOptional={true}>
 
 Create a proxy to automatically detect the user's preferred locale and redirect them to the appropriate locale-prefixed URL. This enhances user experience by displaying content in their preferred language.
@@ -1119,7 +1099,6 @@ export const config = {
 ```
 
 </Step>
-
 <Step number={19} title="Automate Your Translations Using Intlayer" isOptional={true}>
 
 Intlayer is a **free** and **open-source** library designed to assist the localisation process in your application. While i18next handles the translation loading and management, Intlayer helps automate the translation workflow.

package/blog/en-GB/i18n_using_next-intl.md

@@ -62,8 +62,6 @@ Before we dive into the implementation, here are some practices you should follo
 
 > See our documentation listing everything you need to know about internationalisation and SEO: [Internationalisation (i18n) with next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/internationalization_and_SEO.md).
 
----
-
 ## Step-by-Step Guide to Set Up next-intl in a Next.js Application
 
 <iframe
@@ -109,7 +107,6 @@ Here's the project structure we'll be creating:
 ```
 
 <Steps>
-
 <Step number={1} title="Install Dependencies">
 
 Install the necessary packages using npm:
@@ -129,7 +126,6 @@ yarn add next-intl
 - **next-intl**: The core internationalisation library for Next.js App Router that provides hooks, server functions, and client providers for managing translations.
 
 </Step>
-
 <Step number={2} title="Configure Your Project">
 
 Create a configuration file that defines your supported locales and sets up next-intl's request configuration. This file serves as the single source of truth for your i18n setup and ensures type safety throughout your application.
@@ -215,7 +211,6 @@ export const proxy = createMiddleware(routingOptions);
 ```
 
 </Step>
-
 <Step number={3} title="Define Dynamic Locale Routes">
 
 Set up dynamic routing for locales by creating a `[locale]` directory in your app folder. This allows Next.js to handle locale-based routing where each locale becomes a URL segment (e.g., `/en/about`, `/fr/about`).
@@ -305,7 +300,6 @@ export default async function AboutPage({
 ```
 
 </Step>
-
 <Step number={4} title="Create Your Translation Files">
 
 Create JSON files for each locale and namespace. This structure allows you to organise translations logically and load only what you need for each page.
@@ -367,7 +361,6 @@ Organising translations by namespace (e.g., `common.json`, `about.json`) enables
 </Tabs>
 
 </Step>
-
 <Step number={5} title="Utilise Translations in Your Pages">
 
 Create a page component that loads translations on the server and passes them to both server and client components. This ensures that translations are loaded before rendering and prevents content flashing.
@@ -420,7 +413,6 @@ export default async function AboutPage({
 ```
 
 </Step>
-
 <Step number={6} title="Use Translations in Client Components">
 
 Client components can use the `useTranslations` and `useFormatter` hooks to access translations and formatting functions. These hooks read from the `NextIntlClientProvider` context.
@@ -458,7 +450,6 @@ const ClientComponent = () => {
 ```
 
 </Step>
-
 <Step number={7} title="Use Translations in Server Components">
 
 Server components cannot use React hooks, so they receive translations and formatters via props from their parent components. This approach keeps server components synchronous and allows them to be nested inside client components.
@@ -492,7 +483,6 @@ const ServerComponent = ({
 > In your page/layout, use `getTranslations` and `getFormatter` from `next-intl/server` to pre-compute translations and formatting, then pass them as props to server components.
 
 </Step>
-
 <Step number={8} title="Change the language of your content" isOptional={true}>
 
 To change the language of your content with next-intl, render locale-aware links that point to the same pathname while switching locale. The provider rewrites URLs automatically, so you only have to target the current route.
@@ -566,7 +556,6 @@ export default function LocaleSwitcher() {
 ```
 
 </Step>
-
 <Step number={9} title="Use the localised Link component" isOptional={true}>
 
 `next-intl` provides a subpackage `next-intl/navigation` that contains a localised link component that automatically applies the active locale. We have already extracted it for you in the `@/i18n` file, so you can use it like this:
@@ -578,7 +567,6 @@ return <Link href="/about">t("about.title")</Link>;
 ```
 
 </Step>
-
 <Step number={10} title="Access the active locale inside Server Actions" isOptional={true}>
 
 Server Actions can read the current locale using `next-intl/server`. This is useful for sending localised emails or storing language preferences alongside submitted data.
@@ -603,7 +591,6 @@ export async function handleContactForm(formData: FormData) {
 > `getLocale` reads the locale set by the `next-intl` proxy, so it works anywhere on the server: Route Handlers, Server Actions, and edge functions.
 
 </Step>
-
 <Step number={11} title="Internationalise Your Metadata" isOptional={true}>
 
 Translating content is important, but the main goal of internationalisation is to make your website more visible to the world. I18n is an incredible lever to improve your website visibility through proper SEO.
@@ -644,7 +631,6 @@ export async function generateMetadata({
 ```
 
 </Step>
-
 <Step number={12} title="Internationalise Your Sitemap" isOptional={true}>
 
 Generate a sitemap that includes all locale versions of your pages. This helps search engines discover and index all language versions of your content.
@@ -700,7 +686,6 @@ export default function sitemap(): MetadataRoute.Sitemap {
 ```
 
 </Step>
-
 <Step number={13} title="Internationalise Your robots.txt" isOptional={true}>
 
 Create a robots.txt file that properly handles all locale versions of your protected routes. This ensures that search engines do not index admin or dashboard pages in any language.
@@ -735,7 +720,6 @@ export default function robots(): MetadataRoute.Robots {
 ```
 
 </Step>
-
 <Step number={14} title="Set Up Proxy for Locale Routing" isOptional={true}>
 
 Create a proxy to automatically detect the user's preferred locale and redirect them to the appropriate locale-prefixed URL. next-intl provides a convenient proxy function that handles this automatically.
@@ -757,7 +741,6 @@ export const config = {
 ```
 
 </Step>
-
 <Step number={15} title="Set Up TypeScript Types for the Locale" isOptional={true}>
 
 Setting up TypeScript will help you to get autocompletion and type safety for your keys.
@@ -785,7 +768,6 @@ declare module "next-intl" {
 This code will use Module Augmentation to add the locales and messages to the next-intl AppConfig type.
 
 </Step>
-
 <Step number={16} title="Automate Your Translations Using Intlayer" isOptional={true}>
 
 Intlayer is a **free** and **open-source** library designed to assist the localisation process in your application. While next-intl handles the translation loading and management, Intlayer helps automate the translation workflow.

package/blog/en-GB/index.md

@@ -20,8 +20,6 @@ author: aymericzip
 
 Welcome to our blog dedicated to all things **internationalization** for JavaScript applications! Here, we explore the best practices, strategies, and tools to help developers expand their digital products across the globe.
 
----
-
 ## Why Internationalization (i18n) Matters
 
 In today’s interconnected world, users expect seamless, localized experiences. Internationalization (i18n) ensures that your web application can adapt to different languages and cultural nuances. By incorporating i18n practices right from the start, you unlock numerous benefits, such as:
@@ -31,8 +29,6 @@ In today’s interconnected world, users expect seamless, localized experiences.
 3. **Improved Accessibility:** Well-structured i18n often aligns with accessibility standards, making your app more inclusive.
 4. **Better SEO Performance:** Localized content can boost your visibility in region-specific search results.
 
----
-
 ## Open-Source Internationalization Solutions
 
 Building an internationalized application doesn’t have to be complicated. The open-source community provides many powerful, well-supported tools and libraries that make localization more straightforward. Popular solutions like **react-intl**, **i18next**, and **FormatJS** provide flexible APIs and easy integration with modern JavaScript frameworks such as React, Vue, and Angular.
@@ -43,8 +39,6 @@ Building an internationalized application doesn’t have to be complicated. The
 - **Cost Savings:** No licence fees, making it simpler to test or scale your application.
 - **Community Support:** Large communities often mean more tutorials, documentation, and ready-made plugins.
 
----
-
 ## Announcements and What’s Next
 
 We’re excited to announce upcoming tutorials, best practices, and **case studies** on how to optimize your JavaScript applications for global audiences. Here’s a sneak peek:
@@ -55,8 +49,6 @@ We’re excited to announce upcoming tutorials, best practices, and **case studi
 
 Stay tuned for these updates and more!
 
----
-
 ## Contribute to Our Blog!
 
 We believe in community-driven knowledge sharing. If you have a great idea for a blog post related to internationalization, **SEO**, or any other relevant topic, we’d love to hear from you. You can submit a Pull Request by adding your proposed blog post to our GitHub repository:
@@ -65,6 +57,4 @@ We believe in community-driven knowledge sharing. If you have a great idea for a
 
 Your contributions help us enrich this platform and empower developers worldwide. Let’s build a community of global-first applications, together.
 
----
-
 **Thank you for reading, and welcome to our i18n community!** Stay tuned for more insights, tips, and best practices on how to take your JavaScript applications to international success.

package/blog/en-GB/internationalization_and_SEO.md

@@ -21,16 +21,12 @@ author: aymericzip
 
 Want to reach more users worldwide? Making your website multilingual is one of the best ways to expand your audience and improve your SEO (Search Engine Optimisation). In this blog post, we’ll break down the basics of international SEO, often referred to as **i18n** (short for “internationalisation”), in clear, understandable terms. You’ll learn about the key decisions you need to make, how to use technical elements like `hreflang`, and why tools like **Intlayer** can simplify your multilingual Next.js projects.
 
----
-
 ## 1. What Does It Mean to Make Your Website Multilingual?
 
 A multilingual website offers its content in more than one language. For example, you might have an English version (`example.com/en/`), a French version (`example.com/fr/`), and a Spanish version (`example.com/es/`). This approach lets search engines display the correct language version to users based on their preferences or geographic location.
 
 When you do this right, you’ll create a far more user-friendly experience for non-English speakers, leading to better engagement, higher conversion rates, and improved SEO in different regions.
 
----
-
 ## 2. Choosing the Right URL Structure
 
 If you decide to have multiple language versions, you’ll need a clear, consistent way to organise your site’s URLs. Each language (or region) should have its own unique “address” on the internet. Below are three common ways to structure multilingual websites:
@@ -52,8 +48,6 @@ If you decide to have multiple language versions, you’ll need a clear, consist
 
 > **Tip:** If you have a global brand and want to keep things simpler, subdirectories often work best. If you’re only targeting one or two main countries and want to really emphasise each one, ccTLDs might be the way to go.
 
----
-
 ## 3. Mastering Language Targeting with Hreflang
 
 ### 3.1. What Is Hreflang?
@@ -84,8 +78,6 @@ In your HTML, you’ll add something like:
 
 > **Quick Note:** Make sure the URLs in these tags point directly to the final page, with **no** additional redirects.
 
----
-
 ## 4. Making Content Truly “Local” (Not Just Translated)
 
 ### 4.1. Localisation vs. Translation
@@ -97,8 +89,6 @@ In your HTML, you’ll add something like:
 
 Even with good translations, search engines can flag your site for duplicate content if it appears too similar in structure. Hreflang helps clarify that these pages aren’t duplicates but are language variations.
 
----
-
 ## 5. Technical SEO Must-Haves
 
 ### 5.1. Language Declarations (`lang` and `dir`)
@@ -127,8 +117,6 @@ Canonical tags tell search engines which page is the “original” or primary v
 <link rel="canonical" href="https://example.com/fr/produits" />
 ```
 
----
-
 ## 6. On-Page SEO in Multiple Languages
 
 ### 6.1. Title & Meta Descriptions
@@ -145,8 +133,6 @@ Your headings should reflect each region’s **local phrases** or **keywords**.
 - Localise alt text, captions, and filenames if needed.
 - Use visuals that resonate with the target culture.
 
----
-
 ## 7. Language Switching & User Experience
 
 ### 7.1. Auto-Redirect or a Language Selector?
@@ -224,8 +210,6 @@ const LocaleSwitcher: FC = () => {
 - Save your user’s language choice in a **cookie** or **session**.
 - Next time they visit your site, you can automatically load their preferred language.
 
----
-
 ## 8. Building Local Backlinks
 
 **Backlinks** (links from external sites to yours) remain an important SEO factor. When you run a multilingual site, consider:
@@ -233,8 +217,6 @@ const LocaleSwitcher: FC = () => {
 - Reaching out to local news sites, blogs, or forums. For instance, a `.fr` domain pointing to your French subdirectory can boost your local French SEO.
 - Monitoring backlinks per language to see which regions need more PR/marketing efforts.
 
----
-
 ## 9. Monitoring & Maintaining Your Multilingual Site
 
 ### 9.1. Google Analytics & Search Console
@@ -247,8 +229,6 @@ const LocaleSwitcher: FC = () => {
 - Keep translations fresh. If you change a product description in English, update it in French, Spanish, etc.
 - Outdated translations can be confusing for customers and hurt user trust.
 
----
-
 ## 10. Common Pitfalls to Avoid
 
 1. **Machine-Translated Content**
@@ -263,14 +243,10 @@ const LocaleSwitcher: FC = () => {
 4. **Ignoring Cultural Nuances**
    A joke or phrase that works in one country might be offensive or meaningless in another.
 
----
-
 ## Audit your website with the Intlayer SEO Scanner
 
 To ensure your multilingual app is perfectly optimised, we recommend using the [Intlayer SEO Scanner](https://intlayer.org/i18n-seo-scanner). It is a specialised tool for multilingual website checking, helping you identify missing hreflang tags, broken links, and other SEO issues across all your localised pages.
 
----
-
 ## Wrapping Up
 
 Making your website multilingual involves more than just translating text. It’s about structuring URLs effectively, using `hreflang` tags to help search engines serve the correct version, and providing a stellar user experience, complete with localised visuals, language selectors, and consistent navigation. Following these best practices will set you up for success in global markets, boost user satisfaction, and, ultimately, deliver better SEO results across regions.

package/blog/en-GB/intlayer_with_i18next.md

@@ -73,7 +73,6 @@ This guide explains how to leverage Intlayer as an **adapter for i18next**, allo
 ## Step-by-Step Guide to Set Up Intlayer with i18next
 
 <Steps>
-
 <Step number={1} title="Install Dependencies">
 
 Install the necessary packages:
@@ -120,7 +119,6 @@ bun add intlayer @intlayer/sync-json-plugin --dev
 - **@intlayer/sync-json-plugin**: Plugin to export Intlayer content declarations to i18next compatible JSON format
 
 </Step>
-
 <Step number={2} title="Implement the Intlayer plugin to wrap the JSON">
 
 Create an Intlayer configuration file to define your supported locales:

package/blog/en-GB/intlayer_with_next-i18next.md

@@ -62,12 +62,9 @@ This guide explains how to leverage Intlayer as an **adapter for i18next**, allo
 - Automate your JSON translations in CLI or CI/CD pipelines.
 - Test, sync, and manage translations more effectively.
 
----
-
 ## Step-by-Step Guide to Set Up Intlayer with next-i18next
 
 <Steps>
-
 <Step number={1} title="Install Dependencies">
 
 Install the necessary packages using your preferred package manager:
@@ -114,7 +111,6 @@ bun add intlayer @intlayer/sync-json-plugin --dev
 - **@intlayer/sync-json-plugin**: Plugin to synchronise Intlayer content declarations to i18next JSON format
 
 </Step>
-
 <Step number={2} title="Implement the Intlayer plugin to wrap the JSON">
 
 Create an Intlayer configuration file to define your supported locales:

package/blog/en-GB/intlayer_with_next-intl.md

@@ -68,7 +68,6 @@ This guide explains how to leverage Intlayer as an **adapter for next-intl**, al
 ## Step-by-Step Guide to Set Up Intlayer with next-intl
 
 <Steps>
-
 <Step number={1} title="Install Dependencies">
 
 Install the necessary packages:
@@ -115,7 +114,6 @@ bun add intlayer @intlayer/sync-json-plugin --dev
 - **@intlayer/sync-json-plugin**: Plugin to export Intlayer content declarations to next-intl compatible JSON format
 
 </Step>
-
 <Step number={2} title="Implement the Intlayer plugin to wrap the JSON">
 
 Create an Intlayer configuration file to define your supported locales:

package/blog/en-GB/intlayer_with_react-i18next.md

@@ -67,7 +67,6 @@ This guide explains how to leverage Intlayer as an **adapter for react-i18next**
 ## Step-by-Step Guide to Set Up Intlayer with react-i18next
 
 <Steps>
-
 <Step number={1} title="Install Dependencies">
 
 Install the necessary packages:
@@ -114,7 +113,6 @@ bun add intlayer @intlayer/sync-json-plugin --dev
 - **@intlayer/sync-json-plugin**: Plugin to export Intlayer content declarations to react-i18next compatible JSON format
 
 </Step>
-
 <Step number={2} title="Implement the Intlayer plugin to wrap the JSON">
 
 Create an Intlayer configuration file to define your supported locales:

package/blog/en-GB/intlayer_with_react-intl.md

@@ -65,7 +65,6 @@ This guide explains how to leverage Intlayer as an **adapter for react-intl**, a
 ## Step-by-Step Guide to Set Up Intlayer with react-intl
 
 <Steps>
-
 <Step number={1} title="Install Dependencies">
 
 Install the necessary packages:
@@ -112,7 +111,6 @@ bun add intlayer @intlayer/sync-json-plugin --dev
 - **@intlayer/sync-json-plugin**: Plugin to export Intlayer content declarations to react-intl compatible JSON format
 
 </Step>
-
 <Step number={2} title="Implement the Intlayer plugin to wrap the JSON">
 
 Create an Intlayer configuration file to define your supported locales:

package/blog/en-GB/intlayer_with_vue-i18n.md

@@ -62,12 +62,9 @@ This guide explains how to leverage Intlayer as an **adapter for vue-i18n**, all
 - Automate your JSON translations in CLI or CI/CD pipelines.
 - Test, sync, and manage translations more effectively.
 
----
-
 ## Step-by-Step Guide to Set Up Intlayer with vue-i18n
 
 <Steps>
-
 <Step number={1} title="Install Dependencies">
 
 Install the necessary packages using your preferred package manager:
@@ -114,7 +111,6 @@ bun add intlayer @intlayer/sync-json-plugin --dev
 - **@intlayer/sync-json-plugin**: Plugin to synchronise Intlayer content declarations to vue-i18n JSON format
 
 </Step>
-
 <Step number={2} title="Implement the Intlayer plugin to wrap the JSON">
 
 Create an Intlayer configuration file to define your supported locales:

package/blog/en-GB/list_i18n_technologies/frameworks/angular.md

@@ -23,16 +23,12 @@ author: aymericzip
 
 In today's interconnected world, offering your website in multiple languages can significantly expand your reach and improve user experience. For developers working with Angular, implementing internationalization (i18n) is crucial for efficiently managing translations while preserving application structure, SEO, and performance. In this article, we'll explore various i18n approaches from Angular's built-in solutions to popular third-party libraries to help you determine the best fit for your project.
 
----
-
 ## What is Internationalization (i18n)?
 
 Internationalization, often referred to as i18n, is the process of designing and preparing your application to support multiple languages and cultural contexts. In Angular, it entails configuring your app so that text, dates, numbers, and even UI layouts can adapt seamlessly to different locales. Laying this groundwork properly ensures that integrating future translations remains organized and efficient.
 
 Learn more about i18n basics by reading our article: [What is Internationalization (i18n)? Definition and Challenges](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/what_is_internationalization.md).
 
----
-
 ## The Translation Challenge for Angular Applications
 
 Translating an Angular application introduces several challenges:
@@ -43,8 +39,6 @@ Translating an Angular application introduces several challenges:
 - **Routing and State**: Ensuring the correct language is maintained while navigating between routes involves state management and possibly custom route guards or interceptors.
 - **Scalability & Maintenance**: Translation files can grow quickly, and keeping them organized, versioned, and in sync with your application's evolution can be an ongoing task.
 
----
-
 ## Leading i18n Solutions for Angular
 
 Angular offers a built-in i18n framework, and there are several third-party libraries designed to simplify your multilingual setup. Below are some of the most popular solutions.
@@ -69,8 +63,6 @@ Angular offers a built-in i18n framework, and there are several third-party libr
 
 - **Community & Ecosystem**: Though growing, the ecosystem is newer, so community-driven plugins and tooling may be more limited compared to more established solutions.
 
----
-
 ### 2. Angular's Built-In i18n
 
 **Overview**  
@@ -89,8 +81,6 @@ Angular ships with a **built-in i18n** system that includes tooling for extracti
 - **Dynamic Content**: Handling real-time or user-driven content may require custom logic since Angular's built-in solution focuses heavily on compile-time translations.
 - **Limited Runtime Flexibility**: Switching languages on the fly (without reloading the app) can be challenging because translations are baked in at build time.
 
----
-
 ### 3. ngx-translate
 
 Website: [https://github.com/ngx-translate/core](https://github.com/ngx-translate/core)
@@ -111,8 +101,6 @@ Website: [https://github.com/ngx-translate/core](https://github.com/ngx-translat
 - **SEO & SSR**: If you need server-side rendering with Angular Universal, ngx-translate requires extra setup to ensure correct translations are served to crawlers and browsers on the first load.
 - **Performance**: While flexible at runtime, handling many translations on large pages can have performance implications, so caching strategies are recommended.
 
----
-
 ### 4. Transloco
 
 Website: [https://ngneat.github.io/transloco/](https://ngneat.github.io/transloco/)

package/blog/en-GB/list_i18n_technologies/frameworks/react-native.md

@@ -23,8 +23,6 @@ author: aymericzip
 
 In an increasingly global market, delivering your React Native app in multiple languages can significantly enhance accessibility and user satisfaction. Internationalization (i18n) is central to managing translations effectively, allowing you to display language-specific text, date and time formats, currency, and more without complicating your codebase. In this article, we’ll dive into various i18n approaches, ranging from dedicated libraries to more general solutions, and help you find the one that best fits your React Native project.
 
----
-
 ## What is Internationalization (i18n)?
 
 Internationalization, or i18n, involves structuring an application so it can easily adapt to different languages, regional formats, and cultural norms. In React Native, i18n includes handling strings for buttons and labels, as well as formatting dates, times, currencies, and more according to a user’s locale. Properly prepared React Native apps let you seamlessly integrate additional languages and locale-specific behaviour later on, without massive refactors.
@@ -32,8 +30,6 @@ Internationalization, or i18n, involves structuring an application so it can eas
 For a deeper dive into internationalization concepts, check out our article:  
 [What is Internationalization (i18n)? Definition and Challenges](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/what_is_internationalization.md).
 
----
-
 ## The Translation Challenge for React Native Applications
 
 Working with translations in React Native introduces its own unique considerations:
@@ -53,8 +49,6 @@ Working with translations in React Native introduces its own unique consideratio
 - **App Updates & Over-the-Air (OTA)**  
   If you use CodePush or another OTA update mechanism, you need to plan how translation updates or new languages will be delivered without requiring a full app store release.
 
----
-
 ## Leading i18n Solutions for React Native
 
 Below are several popular approaches to managing multilingual content in React Native. Each aims to simplify your translation workflow in different ways.
@@ -88,8 +82,6 @@ Below are several popular approaches to managing multilingual content in React N
 - **Community & Ecosystem**  
   Still a relatively new solution, so you may find fewer community-driven examples or ready-made plugins compared to long-established libraries.
 
----
-
 ### 2. React-i18next
 
 > Website: [https://react.i18next.com/](https://react.i18next.com/)
@@ -122,8 +114,6 @@ Below are several popular approaches to managing multilingual content in React N
 - **Performance**  
   While React-i18next generally performs well, you’ll want to pay attention to how you organise and load translation resources to avoid overhead on mobile devices.
 
----
-
 ### 3. React Intl (from FormatJS)
 
 > Website: [https://formatjs.io/docs/react-intl/](https://formatjs.io/docs/react-intl/)
@@ -156,8 +146,6 @@ Below are several popular approaches to managing multilingual content in React N
 - **Community Examples**  
   While widely used, React Native-specific usage examples may be fewer than for React web. You’ll likely adapt existing docs and patterns to a native environment.
 
----
-
 ### 4. LinguiJS
 
 > Website: [https://lingui.js.org/](https://lingui.js.org/)
@@ -190,8 +178,6 @@ Below are several popular approaches to managing multilingual content in React N
 - **Code Organisation**  
   Deciding how to break up your message catalogs (by screen, feature, or language) is vital to maintain clarity in larger apps.
 
----
-
 ## Final Thoughts
 
 When selecting an i18n solution for your React Native application: