@intlayer/docs 6.1.5 → 6.1.6-canary.0

package/blog/it/next-i18next_vs_next-intl_vs_intlayer.md

@@ -19,6 +19,8 @@ slugs:
 
 # next-i18next VS next-intl VS intlayer | Internazionalizzazione (i18n) in Next.js
 
+![next-i18next VS next-intl VS intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.png?raw=true)
+
 Diamo un'occhiata alle somiglianze e differenze tra tre opzioni i18n per Next.js: next-i18next, next-intl e Intlayer.
 
 Questo non è un tutorial completo. È un confronto per aiutarti a scegliere.
@@ -173,9 +175,9 @@ Nel caso di `next-intl` e `next-i18next`, la libreria richiede il caricamento de
 
 Ecco un esempio dell'impatto dell'ottimizzazione della dimensione del bundle utilizzando `intlayer` in un'applicazione vite + react:
 
-| Bundle ottimizzato                                                                             | Bundle non ottimizzato                                                                                             |
-| ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
-| ![bundle ottimizzato](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png) | ![bundle non ottimizzato](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle_no_optimization.png) |
+| Bundle ottimizzato                                                                                      | Bundle non ottimizzato                                                                                                      |
+| ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| ![bundle ottimizzato](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true) | ![bundle non ottimizzato](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle_no_optimization.png?raw=true) |
 
 ---
 
@@ -348,25 +350,25 @@ La struttura dell'app è importante per garantire una buona manutenibilità del
 
 ```bash
 .
-├── public
-│   └── locales
-│       ├── en
-│       │  ├── home.json
-│       │  └── navbar.json
-│       ├── fr
-│       │  ├── home.json
-│       │  └── navbar.json
-│       └── es
-│          ├── home.json
-│          └── navbar.json
-├── next-i18next.config.js
+├── i18n.config.ts
 └── src
-    ├── middleware.ts
+    ├── locales
+    │   ├── en
+    │   │  ├── common.json
+    │   │  └── about.json
+    │   └── fr
+    │      ├── common.json
+    │      └── about.json
     ├── app
-    │   └── home.tsx
+    │   ├── i18n
+    │   │   └── server.ts
+    │   └── [locale]
+    │       ├── layout.tsx
+    │       └── about.tsx
     └── components
-        └── Navbar
-            └── index.tsx
+        ├── I18nProvider.tsx
+        ├── ClientComponent.tsx
+        └── ServerComponent.tsx
 ```
 
   </TabItem>
@@ -374,6 +376,7 @@ La struttura dell'app è importante per garantire una buona manutenibilità del
 
 ```bash
 .
+├── i18n.ts
 ├── locales
 │   ├── en
 │   │  ├── home.json
@@ -384,11 +387,13 @@ La struttura dell'app è importante per garantire una buona manutenibilità del
 │   └── es
 │      ├── home.json
 │      └── navbar.json
-├── i18n.ts
 └── src
     ├── middleware.ts
     ├── app
-    │   └── home.tsx
+    │   ├── i18n
+    │   │   └── server.ts
+    │   └── [locale]
+    │       └── home.tsx
     └── components
         └── Navbar
             └── index.tsx
@@ -403,9 +408,11 @@ La struttura dell'app è importante per garantire una buona manutenibilità del
 └── src
     ├── middleware.ts
     ├── app
-    │   └── home
-    │       └── index.tsx
-    │       └── index.content.ts
+    │   └── [locale]
+    │       ├── layout.tsx
+    │       └── home
+    │           ├── index.tsx
+    │           └── index.content.ts
     └── components
         └── Navbar
             ├── index.tsx
@@ -533,8 +540,10 @@ export default async function LocaleLayout({
   const messages = await getMessages();
   const clientMessages = pick(messages, ["common", "about"]);
 
+  const rtlLocales = ["ar", "he", "fa", "ur"];
+
   return (
-    <html lang={locale}>
+    <html lang={locale} dir={rtlLocales.includes(locale) ? "rtl" : "ltr"}>
       <body>
         <NextIntlClientProvider locale={locale} messages={clientMessages}>
           {children}
@@ -851,10 +860,11 @@ const ServerComponent = ({ count }: ServerComponentProps) => {
 type ServerComponentProps = {
   count: number;
   t: (key: string) => string;
+  formatter: Intl.NumberFormat;
 };
 
-const ServerComponent = ({ t, count }: ServerComponentProps) => {
-  const formatted = new Intl.NumberFormat(i18n.language).format(count);
+const ServerComponent = ({ t, count, formatter }: ServerComponentProps) => {
+  const formatted = formatter.format(count);
 
   return (
     <div>
@@ -868,7 +878,7 @@ const ServerComponent = ({ t, count }: ServerComponentProps) => {
 > Poiché il componente server non può essere asincrono, è necessario passare le traduzioni e la funzione di formattazione come props.
 >
 > - `const t = await getTranslations("about.counter");`
-> - `const format = await getFormatter();`
+> - `const formatter = await getFormatter().then((formatter) => formatter.number());`
 
   </TabItem>
   <TabItem label="intlayer" value="intlayer">

package/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md

@@ -19,6 +19,8 @@ slugs:
 
 # next-i18next VS next-intl VS intlayer | Next.jsの国際化（i18n）
 
+![next-i18next VS next-intl VS intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.png?raw=true)
+
 Next.js向けの3つのi18nオプション、next-i18next、next-intl、Intlayerの類似点と相違点を見ていきましょう。
 
 これは完全なチュートリアルではなく、選択の参考となる比較です。
@@ -173,9 +175,9 @@ Next.jsは国際化されたルーティング（例：ロケールセグメン
 
 以下は、vite + react アプリケーションで `intlayer` を使用したバンドルサイズ最適化の影響の例です：
 
-| 最適化されたバンドル                                                                             | 最適化されていないバンドル                                                                                             |
-| ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
-| ![最適化されたバンドル](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png) | ![最適化されていないバンドル](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle_no_optimization.png) |
+| 最適化されたバンドル                                                                                      | 最適化されていないバンドル                                                                                                      |
+| --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| ![最適化されたバンドル](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true) | ![最適化されていないバンドル](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle_no_optimization.png?raw=true) |
 
 ---
 
@@ -348,25 +350,25 @@ Next.jsは国際化されたルーティング（例：ロケールセグメン
 
 ```bash
 .
-├── public
-│   └── locales
-│       ├── en
-│       │  ├── home.json
-│       │  └── navbar.json
-│       ├── fr
-│       │  ├── home.json
-│       │  └── navbar.json
-│       └── es
-│          ├── home.json
-│          └── navbar.json
-├── next-i18next.config.js
+├── i18n.config.ts
 └── src
-    ├── middleware.ts
+    ├── locales
+    │   ├── en
+    │   │  ├── common.json
+    │   │  └── about.json
+    │   └── fr
+    │      ├── common.json
+    │      └── about.json
     ├── app
-    │   └── home.tsx
+    │   ├── i18n
+    │   │   └── server.ts
+    │   └── [locale]
+    │       ├── layout.tsx
+    │       └── about.tsx
     └── components
-        └── Navbar
-            └── index.tsx
+        ├── I18nProvider.tsx
+        ├── ClientComponent.tsx
+        └── ServerComponent.tsx
 ```
 
   </TabItem>
@@ -374,6 +376,7 @@ Next.jsは国際化されたルーティング（例：ロケールセグメン
 
 ```bash
 .
+├── i18n.ts
 ├── locales
 │   ├── en
 │   │  ├── home.json
@@ -384,11 +387,13 @@ Next.jsは国際化されたルーティング（例：ロケールセグメン
 │   └── es
 │      ├── home.json
 │      └── navbar.json
-├── i18n.ts
 └── src
     ├── middleware.ts
     ├── app
-    │   └── home.tsx
+    │   ├── i18n
+    │   │   └── server.ts
+    │   └── [locale]
+    │       └── home.tsx
     └── components
         └── Navbar
             └── index.tsx
@@ -403,9 +408,11 @@ Next.jsは国際化されたルーティング（例：ロケールセグメン
 └── src
     ├── middleware.ts
     ├── app
-    │   └── home
-    │       └── index.tsx
-    │       └── index.content.ts
+    │   └── [locale]
+    │       ├── layout.tsx
+    │       └── home
+    │           ├── index.tsx
+    │           └── index.content.ts
     └── components
         └── Navbar
             ├── index.tsx
@@ -533,8 +540,10 @@ export default async function LocaleLayout({
   const messages = await getMessages();
   const clientMessages = pick(messages, ["common", "about"]);
 
+  const rtlLocales = ["ar", "he", "fa", "ur"];
+
   return (
-    <html lang={locale}>
+    <html lang={locale} dir={rtlLocales.includes(locale) ? "rtl" : "ltr"}>
       <body>
         <NextIntlClientProvider locale={locale} messages={clientMessages}>
           {children}
@@ -851,10 +860,11 @@ const ServerComponent = ({ count }: ServerComponentProps) => {
 type ServerComponentProps = {
   count: number;
   t: (key: string) => string;
+  formatter: Intl.NumberFormat;
 };
 
-const ServerComponent = ({ t, count }: ServerComponentProps) => {
-  const formatted = new Intl.NumberFormat(i18n.language).format(count);
+const ServerComponent = ({ t, count, formatter }: ServerComponentProps) => {
+  const formatted = formatter.format(count);
 
   return (
     <div>
@@ -868,7 +878,7 @@ const ServerComponent = ({ t, count }: ServerComponentProps) => {
 > サーバーコンポーネントは非同期にできないため、翻訳関数とフォーマッター関数をプロパティとして渡す必要があります。
 >
 > - `const t = await getTranslations("about.counter");`
-> - `const format = await getFormatter();`
+> - `const formatter = await getFormatter().then((formatter) => formatter.number());`
 
   </TabItem>
   <TabItem label="intlayer" value="intlayer">

package/blog/ko/next-i18next_vs_next-intl_vs_intlayer.md

@@ -19,6 +19,8 @@ slugs:
 
 # next-i18next VS next-intl VS intlayer | Next.js 국제화 (i18n)
 
+![next-i18next VS next-intl VS intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.png?raw=true)
+
 Next.js를 위한 세 가지 i18n 옵션인 next-i18next, next-intl, Intlayer의 유사점과 차이점을 살펴보겠습니다.
 
 이 문서는 완전한 튜토리얼이 아니라 선택에 도움을 주기 위한 비교입니다.
@@ -165,9 +167,9 @@ Next.js는 국제화된 라우팅(예: 로케일 세그먼트)을 기본적으
 
 다음은 vite + react 애플리케이션에서 `intlayer`를 사용한 번들 크기 최적화의 영향 예시입니다:
 
-| 최적화된 번들                                                                             | 최적화되지 않은 번들                                                                                             |
-| ----------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| ![최적화된 번들](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png) | ![최적화되지 않은 번들](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle_no_optimization.png) |
+| 최적화된 번들                                                                                      | 최적화되지 않은 번들                                                                                                      |
+| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| ![최적화된 번들](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true) | ![최적화되지 않은 번들](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle_no_optimization.png?raw=true) |
 
 ---
 
@@ -340,25 +342,25 @@ Next.js는 국제화된 라우팅(예: 로케일 세그먼트)을 기본적으
 
 ```bash
 .
-├── public
-│   └── locales
-│       ├── en
-│       │  ├── home.json
-│       │  └── navbar.json
-│       ├── fr
-│       │  ├── home.json
-│       │  └── navbar.json
-│       └── es
-│          ├── home.json
-│          └── navbar.json
-├── next-i18next.config.js
+├── i18n.config.ts
 └── src
-    ├── middleware.ts
+    ├── locales
+    │   ├── en
+    │   │  ├── common.json
+    │   │  └── about.json
+    │   └── fr
+    │      ├── common.json
+    │      └── about.json
     ├── app
-    │   └── home.tsx
+    │   ├── i18n
+    │   │   └── server.ts
+    │   └── [locale]
+    │       ├── layout.tsx
+    │       └── about.tsx
     └── components
-        └── Navbar
-            └── index.tsx
+        ├── I18nProvider.tsx
+        ├── ClientComponent.tsx
+        └── ServerComponent.tsx
 ```
 
   </TabItem>
@@ -366,6 +368,7 @@ Next.js는 국제화된 라우팅(예: 로케일 세그먼트)을 기본적으
 
 ```bash
 .
+├── i18n.ts
 ├── locales
 │   ├── en
 │   │  ├── home.json
@@ -376,11 +379,13 @@ Next.js는 국제화된 라우팅(예: 로케일 세그먼트)을 기본적으
 │   └── es
 │      ├── home.json
 │      └── navbar.json
-├── i18n.ts
 └── src
     ├── middleware.ts
     ├── app
-    │   └── home.tsx
+    │   ├── i18n
+    │   │   └── server.ts
+    │   └── [locale]
+    │       └── home.tsx
     └── components
         └── Navbar
             └── index.tsx
@@ -395,9 +400,11 @@ Next.js는 국제화된 라우팅(예: 로케일 세그먼트)을 기본적으
 └── src
     ├── middleware.ts
     ├── app
-    │   └── home
-    │       └── index.tsx
-    │       └── index.content.ts
+    │   └── [locale]
+    │       ├── layout.tsx
+    │       └── home
+    │           ├── index.tsx
+    │           └── index.content.ts
     └── components
         └── Navbar
             ├── index.tsx
@@ -525,8 +532,10 @@ export default async function LocaleLayout({
   const messages = await getMessages();
   const clientMessages = pick(messages, ["common", "about"]);
 
+  const rtlLocales = ["ar", "he", "fa", "ur"];
+
   return (
-    <html lang={locale}>
+    <html lang={locale} dir={rtlLocales.includes(locale) ? "rtl" : "ltr"}>
       <body>
         <NextIntlClientProvider locale={locale} messages={clientMessages}>
           {children}
@@ -843,10 +852,11 @@ const ServerComponent = ({ count }: ServerComponentProps) => {
 type ServerComponentProps = {
   count: number;
   t: (key: string) => string;
+  formatter: Intl.NumberFormat;
 };
 
-const ServerComponent = ({ t, count }: ServerComponentProps) => {
-  const formatted = new Intl.NumberFormat(i18n.language).format(count);
+const ServerComponent = ({ t, count, formatter }: ServerComponentProps) => {
+  const formatted = formatter.format(count);
 
   return (
     <div>
@@ -860,7 +870,7 @@ const ServerComponent = ({ t, count }: ServerComponentProps) => {
 > 서버 컴포넌트는 비동기(async)일 수 없으므로, 번역 함수와 포맷터 함수를 props로 전달해야 합니다.
 >
 > - `const t = await getTranslations("about.counter");`
-> - `const format = await getFormatter();`
+> - `const formatter = await getFormatter().then((formatter) => formatter.number());`
 
   </TabItem>
   <TabItem label="intlayer" value="intlayer">

package/blog/pt/next-i18next_vs_next-intl_vs_intlayer.md

@@ -19,6 +19,8 @@ slugs:
 
 # next-i18next VS next-intl VS intlayer | Internacionalização (i18n) no Next.js
 
+![next-i18next VS next-intl VS intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.png?raw=true)
+
 Vamos analisar as semelhanças e diferenças entre três opções de i18n para Next.js: next-i18next, next-intl e Intlayer.
 
 Este não é um tutorial completo. É uma comparação para ajudar você a escolher.
@@ -165,9 +167,9 @@ No caso do `next-intl` e do `next-i18next`, a biblioteca exige o carregamento do
 
 Aqui está um exemplo do impacto da otimização do tamanho do bundle usando `intlayer` em uma aplicação vite + react:
 
-| Bundle otimizado                                                                             | Bundle não otimizado                                                                                             |
-| -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| ![pacote otimizado](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png) | ![pacote não otimizado](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle_no_optimization.png) |
+| Bundle otimizado                                                                                      | Bundle não otimizado                                                                                                      |
+| ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| ![pacote otimizado](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true) | ![pacote não otimizado](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle_no_optimization.png?raw=true) |
 
 ---
 
@@ -340,25 +342,25 @@ A estrutura do aplicativo é importante para garantir uma boa manutenção da su
 
 ```bash
 .
-├── public
-│   └── locales
-│       ├── en
-│       │  ├── home.json
-│       │  └── navbar.json
-│       ├── fr
-│       │  ├── home.json
-│       │  └── navbar.json
-│       └── es
-│          ├── home.json
-│          └── navbar.json
-├── next-i18next.config.js
+├── i18n.config.ts
 └── src
-    ├── middleware.ts
+    ├── locales
+    │   ├── en
+    │   │  ├── common.json
+    │   │  └── about.json
+    │   └── fr
+    │      ├── common.json
+    │      └── about.json
     ├── app
-    │   └── home.tsx
+    │   ├── i18n
+    │   │   └── server.ts
+    │   └── [locale]
+    │       ├── layout.tsx
+    │       └── about.tsx
     └── components
-        └── Navbar
-            └── index.tsx
+        ├── I18nProvider.tsx
+        ├── ClientComponent.tsx
+        └── ServerComponent.tsx
 ```
 
   </TabItem>
@@ -366,6 +368,7 @@ A estrutura do aplicativo é importante para garantir uma boa manutenção da su
 
 ```bash
 .
+├── i18n.ts
 ├── locales
 │   ├── en
 │   │  ├── home.json
@@ -376,11 +379,13 @@ A estrutura do aplicativo é importante para garantir uma boa manutenção da su
 │   └── es
 │      ├── home.json
 │      └── navbar.json
-├── i18n.ts
 └── src
     ├── middleware.ts
     ├── app
-    │   └── home.tsx
+    │   ├── i18n
+    │   │   └── server.ts
+    │   └── [locale]
+    │       └── home.tsx
     └── components
         └── Navbar
             └── index.tsx
@@ -395,9 +400,11 @@ A estrutura do aplicativo é importante para garantir uma boa manutenção da su
 └── src
     ├── middleware.ts
     ├── app
-    │   └── home
-    │       └── index.tsx
-    │       └── index.content.ts
+    │   └── [locale]
+    │       ├── layout.tsx
+    │       └── home
+    │           ├── index.tsx
+    │           └── index.content.ts
     └── components
         └── Navbar
             ├── index.tsx
@@ -525,8 +532,10 @@ export default async function LocaleLayout({
   const messages = await getMessages();
   const clientMessages = pick(messages, ["common", "about"]);
 
+  const rtlLocales = ["ar", "he", "fa", "ur"];
+
   return (
-    <html lang={locale}>
+    <html lang={locale} dir={rtlLocales.includes(locale) ? "rtl" : "ltr"}>
       <body>
         <NextIntlClientProvider locale={locale} messages={clientMessages}>
           {children}
@@ -843,10 +852,11 @@ const ServerComponent = ({ count }: ServerComponentProps) => {
 type ServerComponentProps = {
   count: number;
   t: (key: string) => string;
+  formatter: Intl.NumberFormat;
 };
 
-const ServerComponent = ({ t, count }: ServerComponentProps) => {
-  const formatted = new Intl.NumberFormat(i18n.language).format(count);
+const ServerComponent = ({ t, count, formatter }: ServerComponentProps) => {
+  const formatted = formatter.format(count);
 
   return (
     <div>
@@ -860,7 +870,7 @@ const ServerComponent = ({ t, count }: ServerComponentProps) => {
 > Como o componente do servidor não pode ser assíncrono, você precisa passar as traduções e a função formatadora como props.
 >
 > - `const t = await getTranslations("about.counter");`
-> - `const format = await getFormatter();`
+> - `const formatter = await getFormatter().then((formatter) => formatter.number());`
 
   </TabItem>
   <TabItem label="intlayer" value="intlayer">

package/blog/ru/next-i18next_vs_next-intl_vs_intlayer.md

@@ -173,9 +173,9 @@ Next.js предоставляет встроенную поддержку ин
 
 Вот пример влияния оптимизации размера бандла с использованием `intlayer` в приложении на vite + react:
 
-| Оптимизированный бандл                                                                             | Неоптимизированный бандл                                                                                             |
-| -------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
-| ![оптимизированный бандл](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png) | ![неоптимизированный бандл](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle_no_optimization.png) |
+| Оптимизированный бандл                                                                                      | Неоптимизированный бандл                                                                                                      |
+| ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| ![оптимизированный бандл](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true) | ![неоптимизированный бандл](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle_no_optimization.png?raw=true) |
 
 ---
 
@@ -348,25 +348,25 @@ Next.js предоставляет встроенную поддержку ин
 
 ```bash
 .
-├── public
-│   └── locales
-│       ├── en
-│       │  ├── home.json
-│       │  └── navbar.json
-│       ├── fr
-│       │  ├── home.json
-│       │  └── navbar.json
-│       └── es
-│          ├── home.json
-│          └── navbar.json
-├── next-i18next.config.js
+├── i18n.config.ts
 └── src
-    ├── middleware.ts
+    ├── locales
+    │   ├── en
+    │   │  ├── common.json
+    │   │  └── about.json
+    │   └── fr
+    │      ├── common.json
+    │      └── about.json
     ├── app
-    │   └── home.tsx
+    │   ├── i18n
+    │   │   └── server.ts
+    │   └── [locale]
+    │       ├── layout.tsx
+    │       └── about.tsx
     └── components
-        └── Navbar
-            └── index.tsx
+        ├── I18nProvider.tsx
+        ├── ClientComponent.tsx
+        └── ServerComponent.tsx
 ```
 
   </TabItem>
@@ -374,6 +374,7 @@ Next.js предоставляет встроенную поддержку ин
 
 ```bash
 .
+├── i18n.ts
 ├── locales
 │   ├── en
 │   │  ├── home.json
@@ -384,11 +385,13 @@ Next.js предоставляет встроенную поддержку ин
 │   └── es
 │      ├── home.json
 │      └── navbar.json
-├── i18n.ts
 └── src
     ├── middleware.ts
     ├── app
-    │   └── home.tsx
+    │   ├── i18n
+    │   │   └── server.ts
+    │   └── [locale]
+    │       └── home.tsx
     └── components
         └── Navbar
             └── index.tsx
@@ -403,9 +406,11 @@ Next.js предоставляет встроенную поддержку ин
 └── src
     ├── middleware.ts
     ├── app
-    │   └── home
-    │       └── index.tsx
-    │       └── index.content.ts
+    │   └── [locale]
+    │       ├── layout.tsx
+    │       └── home
+    │           ├── index.tsx
+    │           └── index.content.ts
     └── components
         └── Navbar
             ├── index.tsx
@@ -533,8 +538,10 @@ export default async function LocaleLayout({
   const messages = await getMessages();
   const clientMessages = pick(messages, ["common", "about"]);
 
+  const rtlLocales = ["ar", "he", "fa", "ur"];
+
   return (
-    <html lang={locale}>
+    <html lang={locale} dir={rtlLocales.includes(locale) ? "rtl" : "ltr"}>
       <body>
         <NextIntlClientProvider locale={locale} messages={clientMessages}>
           {children}
@@ -851,10 +858,11 @@ const ServerComponent = ({ count }: ServerComponentProps) => {
 type ServerComponentProps = {
   count: number;
   t: (key: string) => string;
+  formatter: Intl.NumberFormat;
 };
 
-const ServerComponent = ({ t, count }: ServerComponentProps) => {
-  const formatted = new Intl.NumberFormat(i18n.language).format(count);
+const ServerComponent = ({ t, count, formatter }: ServerComponentProps) => {
+  const formatted = formatter.format(count);
 
   return (
     <div>
@@ -868,7 +876,7 @@ const ServerComponent = ({ t, count }: ServerComponentProps) => {
 > Поскольку серверный компонент не может быть асинхронным, необходимо передавать переводы и функцию форматирования через пропсы.
 >
 > - `const t = await getTranslations("about.counter");`
-> - `const format = await getFormatter();`
+> - `const formatter = await getFormatter().then((formatter) => formatter.number());`
 
   </TabItem>
   <TabItem label="intlayer" value="intlayer">