@intlayer/docs 9.4.3 → 9.5.0

package/blog/de/vue-i18n_vs_intlayer.md

@@ -33,15 +33,11 @@ Wir konzentrieren uns auf moderne Vue-Tools (Vite, Composition API) und bewerten
 
 > **Kurzfassung**: Beide können Vue-Apps lokalisieren. Wenn Sie **komponentenbezogenen Inhalt**, **strenge TypeScript-Typen**, **Build-Zeit-Prüfungen für fehlende Schlüssel**, **tree-shakbare Wörterbücher** und **integrierte Router-/SEO-Hilfen** sowie **Visuellen Editor & KI-Übersetzungen** wünschen, ist **Intlayer** die umfassendere, modernere Wahl.
 
----
-
 ## Übergeordnete Positionierung
 
 - **vue-i18n** - Die de-facto i18n-Bibliothek für Vue. Flexible Nachrichtenformatierung (ICU-Stil), SFC-`<i18n>`-Blöcke für lokale Nachrichten und ein großes Ökosystem. Sicherheit und groß angelegte Wartung liegen größtenteils bei Ihnen.
 - **Intlayer** - Komponentenorientiertes Inhaltsmodell für Vue/Vite/Nuxt mit **strenger TS-Typisierung**, **Build-Zeit-Prüfungen**, **Tree-Shaking**, **Router- & SEO-Hilfen**, optionalem **Visuellen Editor/CMS** und **KI-unterstützten Übersetzungen**.
 
----
-
 ## Gegenüberstellung der Funktionen (Vue-fokussiert)
 
 | Funktion                                           | **Intlayer**                                                                                   | **vue-i18n**                                                                                               |
@@ -65,8 +61,6 @@ Wir konzentrieren uns auf moderne Vue-Tools (Vite, Composition API) und bewerten
 | **Wartbarkeit bei großen Projekten**               | ✅ Fördert modulare, designsystemfreundliche Struktur                                          | ✅ Möglich, erfordert jedoch strenge Datei-/Namespace-Disziplin                                            |
 | **Ökosystem / Community**                          | ⚠️ Kleiner, aber schnell wachsend                                                              | ✅ Groß und ausgereift im Vue-Ökosystem                                                                    |
 
----
-
 ## Tiefgehender Vergleich
 
 ### 1) Architektur & Skalierbarkeit
@@ -76,8 +70,6 @@ Wir konzentrieren uns auf moderne Vue-Tools (Vite, Composition API) und bewerten
 
 **Warum das wichtig ist:** In großen Vue-Anwendungen oder Designsystemen skaliert **modularer Inhalt** besser als monolithische Kataloge.
 
----
-
 ### 2) TypeScript & Sicherheit
 
 - **vue-i18n**: Gute TS-Unterstützung; **strikte Schlüsseltypisierung** erfordert typischerweise benutzerdefinierte Schemata/Generics und sorgfältige Konventionen.
@@ -85,8 +77,6 @@ Wir konzentrieren uns auf moderne Vue-Tools (Vite, Composition API) und bewerten
 
 **Warum das wichtig ist:** Starke Typisierung erkennt Probleme **vor** der Laufzeit.
 
----
-
 ### 3) Umgang mit fehlenden Übersetzungen
 
 - **vue-i18n**: **Laufzeit**-Warnungen/Fallbacks (z.B. Rückfall auf Locale oder Schlüssel).
@@ -94,8 +84,6 @@ Wir konzentrieren uns auf moderne Vue-Tools (Vite, Composition API) und bewerten
 
 **Warum das wichtig ist:** Durchsetzung zur Buildzeit hält die Produktions-UI sauber und konsistent.
 
----
-
 ### 4) Routing- & URL-Strategie (Vue Router/Nuxt)
 
 - **Beide** können mit lokalisierten Routen arbeiten.
@@ -103,8 +91,6 @@ Wir konzentrieren uns auf moderne Vue-Tools (Vite, Composition API) und bewerten
 
 **Warum das wichtig ist:** Weniger individuelle Verbindungs-Schichten und **saubereres SEO** über verschiedene Sprachen hinweg.
 
----
-
 ### 5) Leistung & Ladeverhalten
 
 - **vue-i18n**: Unterstützt asynchrone Locale-Nachrichten; das Vermeiden von Über-Bundling liegt bei dir (Kataloge sorgfältig aufteilen).
@@ -112,8 +98,6 @@ Wir konzentrieren uns auf moderne Vue-Tools (Vite, Composition API) und bewerten
 
 **Warum das wichtig ist:** Kleinere Bundles und schnellerer Start für mehrsprachige Vue-Anwendungen.
 
----
-
 ### 6) Entwicklererfahrung & Werkzeuge
 
 - **vue-i18n**: Ausgereifte Dokumentation und Community; in der Regel verlassen Sie sich auf **externe Lokalisierungsplattformen** für redaktionelle Workflows.
@@ -121,8 +105,6 @@ Wir konzentrieren uns auf moderne Vue-Tools (Vite, Composition API) und bewerten
 
 **Warum das wichtig ist:** Geringere Betriebskosten und eine kürzere Entwicklungs-Content-Schleife.
 
----
-
 ### 7) SEO, SSR & SSG
 
 - **Beide** funktionieren mit Vue SSR und Nuxt.
@@ -130,8 +112,6 @@ Wir konzentrieren uns auf moderne Vue-Tools (Vite, Composition API) und bewerten
 
 **Warum das wichtig ist:** Internationale SEO ohne maßgeschneiderte Verkabelung.
 
----
-
 ## Warum Intlayer? (Problem & Ansatz)
 
 Die meisten i18n-Stacks (einschließlich **vue-i18n**) starten mit **zentralisierten Katalogen**:
@@ -221,8 +201,6 @@ Dieser Ansatz:
 - **Vermeidet tote Schlüssel** (ungenutzte Komponenten importieren keinen Inhalt).
 - **Optimiert das Laden** (lazy-geladene Komponenten bringen ihren Inhalt mit).
 
----
-
 ## Zusätzliche Funktionen von Intlayer (Vue-relevant)
 
 - **Framework-übergreifende Unterstützung**: Funktioniert mit Vue, Nuxt, Vite, React, Express und mehr.
@@ -240,23 +218,17 @@ Dieser Ansatz:
 - **MCP-Server & VSCode-Erweiterung**: Automatisieren Sie i18n-Workflows und das Verfassen direkt in Ihrer IDE.
 - **Interoperabilität**: Verbindet bei Bedarf mit **vue-i18n**, **react-i18next** und **react-intl**.
 
----
-
 ## Wann welches wählen?
 
 - **Wählen Sie vue-i18n**, wenn Sie den **standardmäßigen Vue-Ansatz** bevorzugen, gerne selbst Kataloge/Namespaces verwalten und Ihre App **klein bis mittelgroß** ist (oder Sie bereits Nuxt i18n verwenden).
 - **Wählen Sie Intlayer**, wenn Sie **komponentenbezogenen Inhalt**, **striktes TypeScript**, **Build-Zeit-Garantien**, **Tree-Shaking** und **umfangreiche Routing/SEO/Editor-Tools** schätzen – besonders für **große, modulare Vue/Nuxt-Codebasen**.
 
----
-
 ## Interoperabilität mit vue-i18n
 
 `intlayer` kann auch bei der Verwaltung deiner `vue-i18n` Namespaces helfen.
 
 Mit `intlayer` kannst du deinen Content im Format deiner bevorzugten i18n-Bibliothek deklarieren, und intlayer generiert deine Namespaces an dem Ort deiner Wahl (Beispiel: `/messages/{{locale}}/{{namespace}}.json`).
 
----
-
 ## Praktische Migrationshinweise (vue-i18n → Intlayer)
 
 - **Pro Funktion starten**: Verschieben Sie eine Route/Ansicht/Komponente nach der anderen in lokale Intlayer-Wörterbücher.
@@ -265,8 +237,6 @@ Mit `intlayer` kannst du deinen Content im Format deiner bevorzugten i18n-Biblio
 - **Router/SEO-Hilfen übernehmen**: Standardisieren Sie die Lokalerkennung und `hreflang`-Tags.
 - **Bundles messen**: Erwarten Sie **Reduzierungen der Bundle-Größe**, da ungenutzte Inhalte ausgeschlossen werden.
 
----
-
 ## Fazit
 
 Sowohl **vue-i18n** als auch **Intlayer** lokalisieren Vue-Apps gut. Der Unterschied liegt darin, **wie viel Sie selbst aufbauen müssen**, um eine robuste, skalierbare Lösung zu erreichen:

package/blog/de/what_is_internationalization.md

@@ -101,8 +101,6 @@ Diese kurze Übersicht deckt die wichtigsten Elemente ab, die internationalisier
 - **Kulturelle Sensitivitäten**  
   Icons, Farben und Symbole können je nach Kultur unterschiedliche Bedeutungen haben. Es ist wichtig, visuelle und textuelle Inhalte anzupassen, um lokale kulturelle Nuancen zu respektieren.
 
----
-
 ## Best Practices für die Implementierung von i18n
 
 - **Früh planen**  
@@ -117,8 +115,6 @@ Diese kurze Übersicht deckt die wichtigsten Elemente ab, die internationalisier
 - **Wiederverwendbarkeit der Übersetzungen**  
   Organisieren Sie Ihre Übersetzungsdateien so, dass sie über mehrere Websites oder Anwendungen hinweg wiederverwendbar sind. Wenn Sie beispielsweise einen mehrsprachigen Footer oder Header haben, richten Sie dedizierte Übersetzungsdateien ein, damit gemeinsame Elemente leicht auf alle Projekte angewendet werden können.
 
----
-
 ## Lokale Inhaltsdeklaration vs. CMS-Inhaltsexternalisierung
 
 Bei der Erstellung einer Website bieten **Content Management Systeme (CMS) wie WordPress, Wix oder Drupal in der Regel verbesserte Wartbarkeit**. Besonders für Blogs oder Landing Pages aufgrund ihrer integrierten i18n-Funktionen.
@@ -136,8 +132,6 @@ Angesichts dieser Herausforderungen ist es nicht ungewöhnlich, sich für ein he
 
 Es ist wichtig, das richtige Tool für Ihre Bedürfnisse auszuwählen und Ihre Internationalisierungsstrategie von Anfang an zu planen. **Intlayer bietet eine überzeugende Lösung, indem es lokale Inhaltsdeklaration mit einem eng integrierten headless CMS kombiniert, das das Beste aus beiden Welten bietet.**
 
----
-
 ### Siehe Liste der i18n-Bibliotheken und -Tools nach Technologie
 
 Wenn Sie eine Liste von i18n-Bibliotheken und Tools nach Technologie suchen, sehen Sie sich die folgenden Ressourcen an:
@@ -155,8 +149,6 @@ Wenn Sie eine Liste von i18n-Bibliotheken und Tools nach Technologie suchen, seh
 - Svelte: [Siehe Liste der i18n-Bibliotheken und -Tools](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/list_i18n_technologies/frameworks/svelte.md)
 - React Native : [Siehe Liste der i18n-Bibliotheken und -Tools](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/list_i18n_technologies/frameworks/react-native.md)
 
----
-
 ## Fazit
 
 Internationalisierung (i18n) ist mehr als nur eine technische Aufgabe; es ist eine **strategische Investition**, die es Ihrer Software ermöglicht, die Sprache Ihrer Nutzer zu sprechen – buchstäblich. Indem Sie ortsspezifische Elemente abstrahieren, sprachliche und kulturelle Variationen berücksichtigen und die zukünftige Expansion planen, ermöglichen Sie es Ihrem Produkt, auf dem globalen Markt zu gedeihen.

package/blog/en/hreflang_guide_multilingual_seo.md

@@ -25,8 +25,6 @@ You translated your app. You shipped `/en`, `/fr`, `/es`. And French users still
 
 Translating is the easy half. The hard half is telling search engines that these pages are the **same page in another language**, not three documents competing with each other. That is what `hreflang` does, and it is where most multilingual sites quietly lose their traffic.
 
----
-
 ## What hreflang actually is
 
 An annotation on a page saying: _this URL has equivalent versions over there, for those languages._
@@ -42,8 +40,6 @@ It buys you two things: the right version shown to the right user, and your loca
 
 It is worth being clear about what it is not. It is **not a redirect** — it is a hint, and Google may override it. It is **not a ranking boost** — it changes _which_ version ranks, not _whether_ you rank. And Bing ignores it entirely, relying on `content-language` and geo-targeting instead.
 
----
-
 ## Where to declare it
 
 Three placements, all valid. Pick one and stay there — the same cluster declared in two places is how sets drift apart.
@@ -54,8 +50,6 @@ Three placements, all valid. Pick one and stay there — the same cluster declar
 
 **HTTP `Link` header** is the only option for non-HTML files like PDFs.
 
----
-
 ## The rules
 
 ### Self-reference and reciprocity
@@ -107,8 +101,6 @@ What people get wrong is what it means. `x-default` is **not "the English versio
 
 Two things to keep straight: `x-default` is one extra entry in the set, not a replacement for the self-referencing one, and like every other entry it must appear identically on every page in the cluster.
 
----
-
 ## The canonical trap
 
 Each localized page must be **its own canonical**:
@@ -131,8 +123,6 @@ says the French page is a duplicate that should not be indexed, while `hreflang`
 
 **Canonical is self-referential per locale. `hreflang` describes the cluster.**
 
----
-
 ## Choosing a URL structure
 
 `hreflang` annotates URLs, so the structure comes first.
@@ -149,14 +139,11 @@ The one structure to avoid: serving different languages at the **same URL** base
 
 > Intlayer covers all three through `routing.mode` and `routing.domains`. See [custom domains](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/custom_domains.md) and the [configuration reference](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md).
 
----
-
 ## Implementation
 
 Hand-writing these tags does not survive contact with a second locale. Derive them from your locale list instead.
 
 <Steps>
-
 <Step number={1} title="Emit the cluster on every page">
 
 Same set everywhere, canonical per locale, absolute URLs, `x-default` included.
@@ -245,7 +232,6 @@ export const Route = createFileRoute("/{-$locale}/about")({
 </Tabs>
 
 </Step>
-
 <Step number={2} title="Or move it all to the sitemap">
 
 At scale, keep the annotations out of your pages entirely. `generateSitemap` emits `xhtml:link` alternates per entry, reading locales and routing mode from your config:
@@ -268,7 +254,6 @@ Two options worth knowing:
 - `entryPerLocale` (default `false`) — by default one `<url>` entry carries all the alternates. Both forms are valid, but only a URL listed as a `<loc>` counts as _submitted_ in Search Console; alternate-only locales stay discoverable yet attributed to no sitemap. Turning this on gives every localized URL its own entry with the full alternate set repeated. It multiplies entries by locale count, so watch the 50 000 URL / 50 MB limit and split into a sitemap index past it.
 
 </Step>
-
 <Step number={3} title="Verify what the crawler receives">
 
 `hreflang` fails silently, so check it rather than assume it.
@@ -281,8 +266,6 @@ For a multilingual-specific crawl, the [Intlayer SEO Scanner](https://intlayer.o
 
 </Steps>
 
----
-
 ## Checklist
 
 - [ ] Each locale has a distinct, crawlable URL
@@ -296,8 +279,6 @@ For a multilingual-specific crawl, the [Intlayer SEO Scanner](https://intlayer.o
 - [ ] Declared in exactly one place
 - [ ] No alternate redirects
 
----
-
 ## Wrapping up
 
 `hreflang` is simple and unforgiving. One missing return tag, one relative URL, one cross-locale canonical, and the cluster is discarded with no error anywhere. Every one of those comes from writing the tags by hand.

package/blog/en/i18n_meaning.md

@@ -92,8 +92,6 @@ Now that we have established the true **i18n meaning**, how do you apply it?
 - **Abstract all user-facing text:** Ensure zero hardcoded text exists in your UI components.
 - **Employ a robust translation management system:** Tools like **Intlayer** bridge the gap between developers and translators. Intlayer acts as a headless CMS that is tightly integrated with your codebase, allowing content managers to update translations visually without requiring a developer to trigger a new build.
 
----
-
 ### See list of i18n Libraries and tool per technology
 
 If you’re looking for a list of i18n libraries and tools per technology, check out the following resources:
@@ -112,8 +110,6 @@ If you’re looking for a list of i18n libraries and tools per technology, check
 - Svelte: [See list of i18n Libraries and tool](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/list_i18n_technologies/frameworks/svelte.md)
 - React Native : [See list of i18n Libraries and tool](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/list_i18n_technologies/frameworks/react-native.md)
 
----
-
 ## Conclusion
 
 The **i18n meaning** is a foundational concept for any modern digital business aiming for global impact. Far beyond being just a quirky tech abbreviation for "internationalization," i18n represents the technical architecture required to seamlessly adapt your software to diverse languages, cultures, and regional standards.

package/blog/en/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 internationalization and SEO: [Internationalization (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 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 localization. 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="Centralize 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 Initialization">
 
 Create a server-side initialization 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 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 organize translations logically and load only what you need for each page.
@@ -539,7 +529,6 @@ Organizing translations by namespace (e.g., `common.json`, `about.json`) enables
 </Tabs>
 
 </Step>
-
 <Step number={9} title="Utilize Translations in Your Pages">
 
 Create a page component that initializes 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 way is to use locale-prefixed URLs and Next.js links. The example below reads the current locale from the route, strips 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 localized Link component" isOptional={true}>
 
 Reusing localized 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 need 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="Internationalize Your Metadata" isOptional={true}>
 
 Translating content is important, but the main goal of internationalization 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="Internationalize 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.
@@ -994,7 +976,6 @@ export default function sitemap(): MetadataRoute.Sitemap {
 ```
 
 </Step>
-
 <Step number={17} title="Internationalize 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 don't index admin or dashboard pages in any language.
@@ -1027,7 +1008,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 improves user experience by showing content in their preferred language.
@@ -1118,7 +1098,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 localization process in your application. While i18next handles the translation loading and management, Intlayer helps automate the translation workflow.

package/blog/en/i18n_using_next-intl.md

@@ -62,8 +62,6 @@ Before we dive into the implementation, here are some practices you should follo
 
 > See our doc listing everything you need to know about internationalization and SEO: [Internationalization (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 internationalization 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 organize translations logically and load only what you need for each page.
@@ -367,7 +361,6 @@ Organizing translations by namespace (e.g., `common.json`, `about.json`) enables
 </Tabs>
 
 </Step>
-
 <Step number={5} title="Utilize 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 localized Link component" isOptional={true}>
 
 `next-intl` provides a subpackage `next-intl/navigation` that contains a localized link component that automatically applies the active locale. We 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 localized emails or storing language preferences alongside submitted data.
@@ -603,7 +591,6 @@ export async function handleContactForm(formData: FormData) {
 > `getLocale` reads the locale set by `next-intl` proxy, so it works anywhere on the server: Route Handlers, Server Actions, and edge functions.
 
 </Step>
-
 <Step number={11} title="Internationalize Your Metadata" isOptional={true}>
 
 Translating content is important, but the main goal of internationalization 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="Internationalize 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="Internationalize 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 don't 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 localization process in your application. While next-intl handles the translation loading and management, Intlayer helps automate the translation workflow.

package/blog/en/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 license 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.
 
----
-
 **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.