@intlayer/docs 9.4.4 → 9.5.1

package/blog/uk/vue-i18n_vs_intlayer.md

@@ -35,15 +35,11 @@ author: aymericzip
 
 > **коротко**: Обидва можуть локалізувати Vue-додатки. Якщо вам потрібен **контент у межах компонента**, **строга типізація TypeScript**, **перевірки відсутніх ключів на етапі збірки**, **словники, оптимізовані для tree-shaking**, та вбудовані **помічники для роутера/SEO**, а також **Візуальний редактор та AI-переклади**, **Intlayer**, більш повне та сучасне рішення.
 
----
-
 ## Загальне позиціонування
 
 - **vue-i18n** - де-факто бібліотека i18n для Vue. Гнучке форматування повідомлень (ICU-стиль), SFC `<i18n>` блоки для локальних повідомлень і велика екосистема. Безпека та підтримка у великих проєктах переважно залежать від вас.
 - **Intlayer** - Модель контенту, орієнтована на компоненти, для Vue/Vite/Nuxt з **строгими TS типами**, **перевірками під час збірки**, **tree-shaking**, **помічниками для маршрутизатора та SEO**, опціональним **Visual Editor/CMS** і **AI‑підтримкою перекладів**.
 
----
-
 ## Порівняння можливостей бок-о-бок (орієнтовано на Vue)
 
 | Функція                                       | **Intlayer**                                                                               | **vue-i18n**                                                                                             |
@@ -67,8 +63,6 @@ author: aymericzip
 | **Підтримуваність у великих проєктах**        | ✅ Заохочує модульну структуру, сумісну з design system                                    | ✅ Можливо, але потребує суворої дисципліни щодо файлів/просторів імен                                   |
 | **Екосистема / спільнота**                    | ⚠️ Менша, але швидко зростає                                                               | ✅ Велика та зріла в екосистемі Vue                                                                      |
 
----
-
 ## Поглиблене порівняння
 
 ### 1) Архітектура та масштабованість
@@ -78,8 +72,6 @@ author: aymericzip
 
 **Чому це важливо:** У великих Vue-додатках або дизайн-системах **модульний контент** масштабується краще за монолітні каталоги.
 
----
-
 ### 2) TypeScript та безпека
 
 - **vue-i18n**: Хороша підтримка TS; **строге типізування ключів** зазвичай потребує кастомних схем/генериків та ретельних конвенцій.
@@ -87,8 +79,6 @@ author: aymericzip
 
 **Чому це важливо:** Сильна типізація виявляє проблеми ще до виконання (runtime).
 
----
-
 ### 3) Обробка відсутніх перекладів
 
 - **vue-i18n**: **Runtime** попередження/резервні варіанти (наприклад, резервна локаль або ключ).
@@ -96,8 +86,6 @@ author: aymericzip
 
 **Чому це важливо:** Контроль під час збірки забезпечує чистий і узгоджений UI у production.
 
----
-
 ### 4) Маршрутизація та стратегія URL (Vue Router/Nuxt)
 
 - **Обидва** можуть працювати з локалізованими маршрутами.
@@ -105,8 +93,6 @@ author: aymericzip
 
 **Чому це важливо:** Менше додаткової glue-логіки та **чистіше SEO** між локалями.
 
----
-
 ### 5) Продуктивність та поведінка завантаження
 
 - **vue-i18n**: Підтримує асинхронні повідомлення локалей; уникнення надмірного бандлінгу, на вашому боці (ретельно розділяйте каталоги).
@@ -114,8 +100,6 @@ author: aymericzip
 
 **Чому це важливо:** Менші бандли та швидший старт для багатомовних Vue-додатків.
 
----
-
 ### 6) Досвід розробника та інструменти
 
 - **vue-i18n**: Містить зрілу документацію та спільноту; зазвичай ви покладатиметесь на **зовнішні платформи локалізації** для редакційних робочих процесів.
@@ -123,8 +107,6 @@ author: aymericzip
 
 **Чому це важливо:** Нижчі операційні витрати та коротший цикл між розробкою та контентом.
 
----
-
 ### 7) SEO, SSR & SSG
 
 - **Обидва** працюють з Vue SSR та Nuxt.
@@ -132,8 +114,6 @@ author: aymericzip
 
 **Чому це важливо:** Міжнародне SEO без необхідності писати індивідуальний зв'язувальний код.
 
----
-
 ## Чому Intlayer? (Проблема та підхід)
 
 Більшість i18n стеків (включно з **vue-i18n**) починаються з **централізованих каталогів**:
@@ -224,8 +204,6 @@ const { greeting } = useIntlayer("component-example");
 - **Запобігає «мертвим» ключам** (невикористовувані компоненти не імпортують контент).
 - **Оптимізує завантаження** (лениво завантажувані компоненти підвантажують свій контент разом).
 
----
-
 ## Додаткові можливості Intlayer (для Vue)
 
 - **Підтримка різних фреймворків**: Працює з Vue, Nuxt, Vite, React, Express та іншими.
@@ -243,31 +221,23 @@ const { greeting } = useIntlayer("component-example");
 - **MCP server & VSCode extension**: Автоматизуйте i18n робочі процеси та авторинг всередині вашого IDE.
 - **Interoperability**: Забезпечує інтеграцію з **vue-i18n**, **react-i18next** та **react-intl** за потреби.
 
----
-
 ## Коли вибирати який варіант?
 
 - **Оберіть vue-i18n**, якщо ви хочете **стандартний підхід у Vue**, вам зручно самостійно керувати каталогами/просторами імен, і ваш додаток **малого або середнього розміру** (або ви вже покладаєтесь на Nuxt i18n).
 - **Оберіть Intlayer**, якщо ви цінуєте **контент, прив'язаний до компонентів**, **строгий TypeScript**, **гарантії на етапі збірки**, **tree-shaking** та **batteries-included** інструменти для роутингу/SEO/редагування, особливо для **великих модульних кодових баз Vue/Nuxt**, дизайн-систем тощо.
 
----
-
 ## Сумісність з vue-i18n
 
 `intlayer` також може допомогти керувати вашими неймспейсами `vue-i18n`.
 
 Використовуючи `intlayer`, ви можете задавати контент у форматі вашої улюбленої i18n-бібліотеки, і intlayer згенерує ваші неймспейси в обраному місці (наприклад: `/messages/{{locale}}/{{namespace}}.json`).
 
----
-
 ## Зірки GitHub
 
 GitHub-зірки, це вагомий індикатор популярності проєкту, довіри спільноти та його довгострокової релевантності. Хоча вони не є прямим показником технічної якості, вони відображають, скільки розробників вважають проєкт корисним, слідкують за його розвитком і, ймовірно, впровадять його. При оцінці вартості проєкту зірки допомагають порівняти динаміку прийняття між альтернативами та дають уявлення про зростання екосистеми.
 
 [![Графік історії зірок](https://api.star-history.com/svg?repos=intlify/vue-i18n&repos=aymericzip/intlayer&type=Date)](https://www.star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
 
----
-
 ## Висновок
 
 І **vue-i18n**, і **Intlayer** добре локалізують Vue-застосунки. Різниця в тому, **скільки вам доведеться реалізувати самостійно**, щоб досягти надійної, масштабованої конфігурації:

package/blog/uk/what_is_internationalization.md

@@ -102,8 +102,6 @@ author: aymericzip
 - **Культурні чутливості**  
   Іконки, кольори та символи можуть мати різне значення в різних культурах. Важливо адаптувати візуальний і текстовий контент з урахуванням локальних культурних нюансів.
 
----
-
 ## Найкращі практики для впровадження i18n
 
 - **Плануйте заздалегідь**  
@@ -118,8 +116,6 @@ author: aymericzip
 - **Повторне використання перекладів**  
   Організуйте файли перекладів так, щоб їх можна було повторно використовувати в різних вебсайтах або застосунках. Наприклад, якщо у вас є багатомовний футер або хедер, створіть окремі файли перекладу, щоб спільні елементи можна було легко застосовувати в усіх проєктах.
 
----
-
 ## Словник локалі проти екстерналізації контенту в CMS
 
 Під час створення вебсайту **система керування контентом (CMS), така як WordPress, Wix або Drupal, зазвичай забезпечує кращу підтримуваність**. Це особливо актуально для блогів або лендінгів, завдяки їхній інтегрованій підтримці i18n.
@@ -137,8 +133,6 @@ author: aymericzip
 
 Важливо вибрати правильний інструмент відповідно до ваших потреб і планувати стратегію інтернаціоналізації з самого початку. **Intlayer пропонує переконливе рішення, поєднуючи декларацію локалізованого контенту з тісно інтегрованим headless CMS, що забезпечує найкраще з обох підходів.**
 
----
-
 ### Перелік i18n бібліотек та інструментів за технологією
 
 Якщо ви шукаєте перелік i18n бібліотек та інструментів для конкретних технологій, перегляньте наведені ресурси:
@@ -157,8 +151,6 @@ author: aymericzip
 - Svelte: [Див. перелік бібліотек та інструментів i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/uk/list_i18n_technologies/frameworks/svelte.md)
 - React Native : [Див. перелік бібліотек та інструментів i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/uk/list_i18n_technologies/frameworks/react-native.md)
 
----
-
 ## Висновок
 
 Інтернаціоналізація (i18n), це більше, ніж просто технічне завдання; це **стратегічна інвестиція**, яка дозволяє вашому програмному забезпеченню буквально говорити мовою ваших користувачів. Абстрагуючи локально-залежні елементи, враховуючи мовні та культурні відмінності та плануючи майбутнє розширення, ви надаєте своєму продукту змогу процвітати на глобальному ринку.

package/blog/vi/hreflang_guide_multilingual_seo.md

@@ -25,8 +25,6 @@ Bạn đã dịch ứng dụng của mình. Bạn đã triển khai `/en`, `/fr`
 
 Dịch là nửa dễ. Nửa khó là báo cho các search engine biết rằng những trang này là **cùng một trang ở ngôn ngữ khác**, không phải ba tài liệu cạnh tranh với nhau. Đó là cái `hreflang` làm, và đó là nơi hầu hết các site đa ngôn ngữ lặng lẽ mất lưu lượng của họ.
 
----
-
 ## hreflang thực sự là gì
 
 Một annotation trên một trang nói: _URL này có các phiên bản tương đương ở đó, cho những ngôn ngữ đó._
@@ -42,8 +40,6 @@ Nó mang lại cho bạn hai điều: phiên bản phù hợp được hiển th
 
 Điều quan trọng là phải rõ ràng về những gì nó không phải. Nó **không phải là một chuyển hướng** — nó là một gợi ý, và Google có thể ghi đè nó. Nó **không phải là một tăng thứ hạng** — nó thay đổi _phiên bản nào_ được xếp hạng, không phải _liệu_ bạn có được xếp hạng hay không. Và Bing hoàn toàn bỏ qua nó, thay vào đó dựa vào `content-language` và geo-targeting.
 
----
-
 ## Nơi khai báo nó
 
 Ba vị trí, tất cả đều hợp lệ. Chọn một và ở lại đó — cụm tương tự được khai báo ở hai nơi là cách làm cho các tập hợp trôi nổi.
@@ -54,8 +50,6 @@ Ba vị trí, tất cả đều hợp lệ. Chọn một và ở lại đó —
 
 **HTTP `Link` header** là lựa chọn duy nhất cho các tệp không phải HTML như PDF.
 
----
-
 ## Các quy tắc
 
 ### Tự tham chiếu và tính thuận nghịch
@@ -107,8 +101,6 @@ Một khái niệm mà thường xuyên bị quên và hiểu sai nhất là `x-
 
 Hai điều cần phân biệt rõ: `x-default` là một mục bổ sung trong tập hợp, không phải là sự thay thế cho mục tự tham chiếu, và giống như mọi mục khác, nó phải xuất hiện giống hệt nhau trên mọi trang trong cụm.
 
----
-
 ## Bẫy canonical
 
 Mỗi trang được bản địa hóa phải là **canonical của chính nó**:
@@ -131,8 +123,6 @@ cho biết trang tiếng Pháp là một bản sao không nên được lập ch
 
 **Canonical là tự tham chiếu cho từng locale. `hreflang` mô tả cluster.**
 
----
-
 ## Chọn cấu trúc URL
 
 `hreflang` chú thích các URL, vì vậy cấu trúc đến trước.
@@ -149,14 +139,11 @@ Cấu trúc duy nhất cần tránh: phục vụ các ngôn ngữ khác nhau t
 
 > Intlayer bao gồm cả ba thông qua `routing.mode` và `routing.domains`. Xem [tùy chỉnh domains](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/custom_domains.md) và [tài liệu cấu hình](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/configuration.md).
 
----
-
 ## Triển khai
 
 Viết thủ công những tag này không tồn tại khi tiếp xúc với locale thứ hai. Thay vào đó, hãy lấy chúng từ danh sách locale của bạn.
 
 <Steps>
-
 <Step number={1} title="Phát hành cluster trên mỗi trang">
 
 Cùng một bộ ở mọi nơi, canonical cho mỗi locale, các URL tuyệt đối, `x-default` được bao gồm.
@@ -245,7 +232,6 @@ export const Route = createFileRoute("/{-$locale}/about")({
 </Tabs>
 
 </Step>
-
 <Step number={2} title="Hoặc di chuyển tất cả vào sitemap">
 
 Ở quy mô lớn, hãy loại bỏ hoàn toàn các annotation khỏi các trang của bạn. `generateSitemap` phát ra các alternate `xhtml:link` cho mỗi entry, đọc locales và routing mode từ config của bạn:
@@ -268,7 +254,6 @@ Hai tùy chọn đáng chú ý:
 - `entryPerLocale` (default `false`) — theo mặc định một mục `<url>` mang tất cả các alternates. Cả hai hình thức đều hợp lệ, nhưng chỉ một URL được liệt kê dưới dạng `<loc>` mới được tính là _submitted_ trong Search Console; các locale chỉ có alternate vẫn có thể khám phá được nhưng không được ghi vào sitemap. Bật tùy chọn này sẽ cho mỗi URL đã định địa phương một mục riêng với toàn bộ tập hợp alternate được lặp lại. Nó nhân các mục theo số lượng locale, vì vậy hãy chú ý đến giới hạn 50 000 URL / 50 MB và chia thành một sitemap index nếu vượt quá.
 
 </Step>
-
 <Step number={3} title="Xác minh những gì crawler nhận được">
 
 `hreflang` thất bại im lặng, vì vậy hãy kiểm tra nó thay vì giả định.
@@ -281,8 +266,6 @@ Hai tùy chọn đáng chú ý:
 
 </Steps>
 
----
-
 ## Danh sách kiểm tra
 
 - [ ] Mỗi locale có URL riêng, có thể crawl được
@@ -296,8 +279,6 @@ Hai tùy chọn đáng chú ý:
 - [ ] Được khai báo trong chính xác một nơi
 - [ ] Không có redirect giữa các locale
 
----
-
 ## Kết luận
 
 `hreflang` là đơn giản và không tha thứ. Một thẻ trả về bị thiếu, một URL tương đối, một canonical xuyên locale, và cụm từ sẽ bị loại bỏ mà không có lỗi ở bất kỳ đâu. Mỗi một trong những lỗi đó đều xuất phát từ việc viết các thẻ bằng tay.

package/blog/vi/i18n_meaning.md

@@ -92,8 +92,6 @@ Bây giờ chúng ta đã xác định được **ý nghĩa thực sự của i1
 - **Trừu tượng hóa tất cả văn bản hiển thị cho người dùng:** Đảm bảo không có văn bản viết cứng nào tồn tại trong các thành phần giao diện người dùng của bạn.
 - **Sử dụng hệ thống quản lý dịch thuật mạnh mẽ:** Các công cụ như **Intlayer** thu hẹp khoảng cách giữa nhà phát triển và trình biên dịch. Intlayer hoạt động như một CMS không đầu (headless CMS) được tích hợp chặt chẽ với cơ sở mã của bạn, cho phép những người quản lý nội dung cập nhật bản dịch một cách trực quan mà không yêu cầu nhà phát triển kích hoạt một bản dựng mới.
 
----
-
 ### Xem danh sách thư viện và công cụ i18n theo công nghệ
 
 Nếu bạn đang tìm kiếm danh sách các thư viện và công cụ i18n theo công nghệ, hãy xem các tài nguyên sau:
@@ -112,8 +110,6 @@ Nếu bạn đang tìm kiếm danh sách các thư viện và công cụ i18n th
 - Svelte: [Xem danh sách thư viện và công cụ i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/list_i18n_technologies/frameworks/svelte.md)
 - React Native: [Xem danh sách thư viện và công cụ i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/list_i18n_technologies/frameworks/react-native.md)
 
----
-
 ## Kết luận
 
 **Ý nghĩa i18n** là một khái niệm nền tảng cho bất kỳ doanh nghiệp kỹ thuật số hiện đại nào nhằm mục tiêu tác động toàn cầu. Không chỉ đơn thuần là một từ viết tắt kỹ thuật kỳ quặc cho "quốc tế hóa", i18n đại diện cho kiến trúc kỹ thuật cần thiết để điều chỉnh phần mềm của bạn một cách liền mạch cho phù hợp với các ngôn ngữ, văn hóa và tiêu chuẩn khu vực đa dạng.

package/blog/vi/i18n_using_next-i18next.md

@@ -71,8 +71,6 @@ Trước khi đi vào triển khai, đây là một số thực hành bạn nên
 
 > Xem tài liệu của chúng tôi liệt kê mọi thứ bạn cần biết về quốc tế hóa và SEO: [Quốc tế hóa (i18n) với next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/internationalization_and_SEO.md).
 
----
-
 ## Hướng Dẫn Từng Bước Để Thiết Lập i18next Trong Ứng Dụng Next.js
 
 <iframe
@@ -119,7 +117,6 @@ Cấu trúc dự án mà chúng ta sẽ tạo:
 ```
 
 <Steps>
-
 <Step number={1} title="Cài Đặt Các Phụ Thuộc">
 
 Cài đặt các gói cần thiết bằng npm:
@@ -141,7 +138,6 @@ yarn add i18next react-i18next i18next-resources-to-backend
 - **i18next-resources-to-backend**: Plugin cho phép tải động các file bản dịch, giúp bạn chỉ tải những namespace cần thiết.
 
 </Step>
-
 <Step number={2} title="Cấu Hình Dự Án Của Bạn">
 
 Tạo một file cấu hình để định nghĩa các locale được hỗ trợ, locale mặc định, và các hàm trợ giúp cho việc địa phương hóa URL. File này đóng vai trò là nguồn dữ liệu duy nhất cho thiết lập i18n của bạn và đảm bảo an toàn kiểu trong toàn bộ ứng dụng.
@@ -196,7 +192,6 @@ export function getCookie(locale: Locale) {
 ```
 
 </Step>
-
 <Step number={3} title="Tập trung các namespace dịch thuật">
 
 Tạo một nguồn dữ liệu duy nhất cho mọi namespace mà ứng dụng của bạn cung cấp. Tái sử dụng danh sách này giúp đồng bộ mã phía server, client và công cụ, đồng thời mở khóa kiểu dữ liệu mạnh cho các hàm hỗ trợ dịch thuật.
@@ -208,7 +203,6 @@ export type Namespace = (typeof namespaces)[number];
 ```
 
 </Step>
-
 <Step number={4} title="Định kiểu mạnh cho các khóa dịch với TypeScript">
 
 Mở rộng `i18next` để trỏ tới các file ngôn ngữ chuẩn của bạn (thường là tiếng Anh). TypeScript sẽ suy luận các khóa hợp lệ theo từng namespace, do đó các lời gọi tới `t()` được kiểm tra toàn diện.
@@ -248,7 +242,6 @@ export type AboutTranslator = TFunction<"about">;
 ```
 
 </Step>
-
 <Step number={5} title="Thiết lập khởi tạo i18n phía server">
 
 Tạo một hàm khởi tạo phía máy chủ để tải các bản dịch cho các thành phần server. Hàm này tạo một instance i18next riêng biệt cho việc render phía server, đảm bảo rằng các bản dịch được tải trước khi render.
@@ -305,7 +298,6 @@ export async function initI18next(
 ```
 
 </Step>
-
 <Step number={6} title="Tạo Provider i18n phía Client">
 
 Tạo một component provider phía client bao bọc ứng dụng của bạn với context i18next. Provider này nhận các bản dịch đã được tải sẵn từ server để ngăn chặn hiện tượng flash nội dung chưa dịch (FOUC) và tránh việc tải lặp lại.
@@ -390,7 +382,6 @@ export default function I18nProvider({
 ```
 
 </Step>
-
 <Step number={7} title="Định nghĩa các tuyến đường động theo locale">
 
 Thiết lập routing động cho các locale bằng cách tạo thư mục `[locale]` trong thư mục app của bạn. Điều này cho phép Next.js xử lý routing dựa trên locale, trong đó mỗi locale trở thành một phân đoạn URL (ví dụ: `/en/about`, `/fr/about`).
@@ -444,7 +435,6 @@ export default function LocaleLayout({
 ```
 
 </Step>
-
 <Step number={8} title="Tạo các tệp dịch của bạn">
 
 Tạo các tệp JSON cho mỗi locale và namespace. Cấu trúc này cho phép bạn tổ chức các bản dịch một cách hợp lý và chỉ tải những gì bạn cần cho mỗi trang.
@@ -539,7 +529,6 @@ Tổ chức các bản dịch theo namespace (ví dụ: `common.json`, `about.js
 </Tabs>
 
 </Step>
-
 <Step number={9} title="Sử dụng Bản dịch trong Trang của Bạn">
 
 Tạo một component trang khởi tạo i18next trên server và truyền các bản dịch cho cả component server và client. Điều này đảm bảo các bản dịch được tải trước khi render và ngăn chặn hiện tượng nhấp nháy nội dung.
@@ -601,7 +590,6 @@ export default async function AboutPage({
 ```
 
 </Step>
-
 <Step number={10} title="Sử dụng Dịch trong Các Component Client">
 
 Các component client có thể sử dụng hook `useTranslation` để truy cập bản dịch. Hook này cung cấp hàm dịch và instance i18n, cho phép bạn dịch nội dung và truy cập thông tin locale.
@@ -654,7 +642,6 @@ export default ClientComponent;
 ```
 
 </Step>
-
 <Step number={11} title="Sử dụng bản dịch trong các Server Components">
 
 Các server component không thể sử dụng React hooks, vì vậy chúng nhận các bản dịch thông qua props từ các component cha của chúng. Cách tiếp cận này giữ cho server component đồng bộ và cho phép chúng được lồng bên trong các client component.
@@ -702,7 +689,6 @@ export default ServerComponent;
 ```
 
 </Step>
-
 <Step number={12} title="Thay đổi ngôn ngữ nội dung của bạn" isOptional={true}>
 
 Để thay đổi ngôn ngữ nội dung trong Next.js, cách được khuyến nghị là sử dụng URL có tiền tố locale và các liên kết Next.js. Ví dụ dưới đây đọc locale hiện tại từ route, loại bỏ nó khỏi pathname, và hiển thị một liên kết cho mỗi locale có sẵn.
@@ -776,7 +762,6 @@ export default function LocaleSwitcher() {
 ```
 
 </Step>
-
 <Step number={13} title="Xây dựng một component Link có hỗ trợ đa ngôn ngữ" isOptional={true}>
 
 Tái sử dụng các URL đã được địa phương hóa trong toàn bộ ứng dụng giúp điều hướng nhất quán và thân thiện với SEO. Bao bọc `next/link` trong một helper nhỏ để thêm tiền tố locale đang hoạt động vào các route nội bộ trong khi giữ nguyên các URL bên ngoài.
@@ -829,7 +814,6 @@ export default function LocalizedLink({
 > Mẹo: Vì `LocalizedLink` là một thành phần thay thế trực tiếp, hãy di chuyển dần dần bằng cách thay đổi các import và để thành phần xử lý các URL theo locale cụ thể.
 
 </Step>
-
 <Step number={14} title="Truy cập locale đang hoạt động bên trong Server Actions" isOptional={true}>
 
 Server Actions thường cần locale hiện tại để gửi email, ghi log hoặc tích hợp với bên thứ ba. Kết hợp cookie locale được proxy của bạn thiết lập với header `Accept-Language` làm phương án dự phòng.
@@ -869,7 +853,6 @@ export async function stuffFromServer(formData: FormData) {
 > Vì helper dựa vào cookies và headers của Next.js, nó hoạt động trong Route Handlers, Server Actions và các ngữ cảnh chỉ dành cho server khác.
 
 </Step>
-
 <Step number={15} title="Quốc tế hóa Metadata của bạn" isOptional={true}>
 
 Dịch nội dung là quan trọng, nhưng mục tiêu chính của quốc tế hóa là làm cho trang web của bạn trở nên dễ tiếp cận hơn với thế giới. I18n là một đòn bẩy tuyệt vời để cải thiện khả năng hiển thị trang web của bạn thông qua SEO đúng cách.
@@ -938,7 +921,6 @@ export default async function AboutPage() {
 ```
 
 </Step>
-
 <Step number={16} title="Quốc tế hóa Sitemap của bạn" isOptional={true}>
 
 Tạo một sitemap bao gồm tất cả các phiên bản locale của các trang của bạn. Điều này giúp các công cụ tìm kiếm khám phá và lập chỉ mục tất cả các phiên bản ngôn ngữ của nội dung của bạn.
@@ -996,7 +978,6 @@ export default function sitemap(): MetadataRoute.Sitemap {
 ```
 
 </Step>
-
 <Step number={17} title="Quốc tế hóa tệp robots.txt của bạn" isOptional={true}>
 
 Tạo một tệp robots.txt xử lý đúng tất cả các phiên bản ngôn ngữ của các tuyến đường được bảo vệ của bạn. Điều này đảm bảo rằng các công cụ tìm kiếm không lập chỉ mục các trang quản trị hoặc bảng điều khiển bằng bất kỳ ngôn ngữ nào.
@@ -1029,7 +1010,6 @@ export default function robots(): MetadataRoute.Robots {
 ```
 
 </Step>
-
 <Step number={18} title="Thiết lập Middleware cho Định tuyến Ngôn ngữ" isOptional={true}>
 
 Tạo một proxy để tự động phát hiện ngôn ngữ ưu tiên của người dùng và chuyển hướng họ đến URL có tiền tố ngôn ngữ phù hợp. Điều này cải thiện trải nghiệm người dùng bằng cách hiển thị nội dung theo ngôn ngữ họ ưu thích.
@@ -1120,7 +1100,6 @@ export const config = {
 ```
 
 </Step>
-
 <Step number={19} title="Tự động hóa bản dịch của bạn bằng Intlayer" isOptional={true}>
 
 Intlayer là một thư viện **miễn phí** và **mã nguồn mở** được thiết kế để hỗ trợ quá trình bản địa hóa trong ứng dụng của bạn. Trong khi i18next xử lý việc tải và quản lý bản dịch, Intlayer giúp tự động hóa quy trình làm việc bản dịch.

package/blog/vi/i18n_using_next-intl.md

@@ -62,8 +62,6 @@ Trước khi chúng ta đi vào phần triển khai, đây là một số thực
 
 > Xem tài liệu của chúng tôi liệt kê tất cả những gì bạn cần biết về quốc tế hóa và SEO: [Internationalization (i18n) with next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/internationalization_and_SEO.md).
 
----
-
 ## Hướng Dẫn Từng Bước Để Thiết Lập next-intl Trong Ứng Dụng Next.js
 
 <iframe
@@ -109,7 +107,6 @@ Dưới đây là cấu trúc dự án mà chúng ta sẽ tạo:
 ```
 
 <Steps>
-
 <Step number={1} title="Cài đặt các phụ thuộc">
 
 Cài đặt các gói cần thiết sử dụng npm:
@@ -129,7 +126,6 @@ yarn add next-intl
 - **next-intl**: Thư viện quốc tế hóa cốt lõi cho Next.js App Router cung cấp các hook, hàm server và provider client để quản lý bản dịch.
 
 </Step>
-
 <Step number={2} title="Cấu hình dự án của bạn">
 
 Tạo một tệp cấu hình định nghĩa các ngôn ngữ được hỗ trợ và thiết lập cấu hình yêu cầu của next-intl. Tệp này đóng vai trò là nguồn duy nhất cho thiết lập i18n của bạn và đảm bảo an toàn kiểu trong toàn bộ ứng dụng của bạn.
@@ -216,7 +212,6 @@ export const proxy = createMiddleware(routingOptions);
 ```
 
 </Step>
-
 <Step number={3} title="Định nghĩa các route địa phương động">
 
 Thiết lập định tuyến động cho các locale bằng cách tạo thư mục `[locale]` trong thư mục app của bạn. Điều này cho phép Next.js xử lý định tuyến dựa trên locale, trong đó mỗi locale trở thành một phân đoạn URL (ví dụ: `/en/about`, `/fr/about`).
@@ -306,7 +301,6 @@ export default async function AboutPage({
 ```
 
 </Step>
-
 <Step number={4} title="Tạo Các Tệp Dịch Thuật Của Bạn">
 
 Tạo các tệp JSON cho từng locale và namespace. Cấu trúc này cho phép bạn tổ chức các bản dịch một cách hợp lý và chỉ tải những gì bạn cần cho mỗi trang.
@@ -368,7 +362,6 @@ Việc tổ chức bản dịch theo namespace (ví dụ: `common.json`, `about.
 </Tabs>
 
 </Step>
-
 <Step number={5} title="Sử Dụng Bản Dịch Trong Các Trang Của Bạn">
 
 Tạo một component trang tải bản dịch trên server và truyền chúng cho cả component server và client. Điều này đảm bảo bản dịch được tải trước khi render và ngăn chặn hiện tượng nhấp nháy nội dung.
@@ -421,7 +414,6 @@ export default async function AboutPage({
 ```
 
 </Step>
-
 <Step number={6} title="Sử dụng bản dịch trong các component phía client">
 
 Các component phía client có thể sử dụng các hook `useTranslations` và `useFormatter` để truy cập các bản dịch và các hàm định dạng. Các hook này đọc dữ liệu từ ngữ cảnh `NextIntlClientProvider`.
@@ -459,7 +451,6 @@ const ClientComponent = () => {
 ```
 
 </Step>
-
 <Step number={7} title="Sử dụng Bản dịch trong các Server Components">
 
 Các server component không thể sử dụng React hooks, vì vậy chúng nhận các bản dịch và hàm định dạng thông qua props từ các component cha. Cách tiếp cận này giữ cho các server component đồng bộ và cho phép chúng được lồng bên trong các client component.
@@ -493,7 +484,6 @@ const ServerComponent = ({
 > Trong trang/layout của bạn, sử dụng `getTranslations` và `getFormatter` từ `next-intl/server` để tính trước các bản dịch và định dạng, sau đó truyền chúng dưới dạng props cho các component server.
 
 </Step>
-
 <Step number={8} title="Thay đổi ngôn ngữ nội dung của bạn" isOptional={true}>
 
 Để thay đổi ngôn ngữ nội dung với next-intl, hãy render các liên kết nhận biết locale trỏ đến cùng một pathname trong khi chuyển đổi locale. Provider sẽ tự động viết lại URL, vì vậy bạn chỉ cần nhắm mục tiêu đến route hiện tại.
@@ -567,7 +557,6 @@ export default function LocaleSwitcher() {
 ```
 
 </Step>
-
 <Step number={9} title="Sử dụng component Link đã được bản địa hóa" isOptional={true}>
 
 `next-intl` cung cấp một gói con `next-intl/navigation` chứa một component link đã được bản địa hóa, tự động áp dụng locale đang hoạt động. Chúng tôi đã trích xuất sẵn cho bạn trong file `@/i18n`, vì vậy bạn có thể sử dụng như sau:
@@ -579,7 +568,6 @@ return <Link href="/about">t("about.title")</Link>;
 ```
 
 </Step>
-
 <Step number={10} title="Truy cập locale đang hoạt động bên trong Server Actions" isOptional={true}>
 
 Server Actions có thể đọc locale hiện tại bằng cách sử dụng `next-intl/server`. Điều này hữu ích cho việc gửi email bản địa hóa hoặc lưu trữ tùy chọn ngôn ngữ cùng với dữ liệu được gửi lên.
@@ -604,7 +592,6 @@ export async function handleContactForm(formData: FormData) {
 > `getLocale` đọc locale được thiết lập bởi proxy `next-intl`, vì vậy nó hoạt động ở bất kỳ đâu trên server: Route Handlers, Server Actions và edge functions.
 
 </Step>
-
 <Step number={11} title="Quốc tế hóa Metadata của bạn" isOptional={true}>
 
 Việc dịch nội dung là quan trọng, nhưng mục tiêu chính của quốc tế hóa là làm cho trang web của bạn trở nên dễ thấy hơn với thế giới. I18n là một đòn bẩy tuyệt vời để cải thiện khả năng hiển thị trang web của bạn thông qua SEO đúng cách.
@@ -645,7 +632,6 @@ export async function generateMetadata({
 ```
 
 </Step>
-
 <Step number={12} title="Quốc tế hóa Sitemap của bạn" isOptional={true}>
 
 Tạo một sitemap bao gồm tất cả các phiên bản ngôn ngữ (locale) của các trang của bạn. Điều này giúp các công cụ tìm kiếm khám phá và lập chỉ mục tất cả các phiên bản ngôn ngữ của nội dung của bạn.
@@ -701,7 +687,6 @@ export default function sitemap(): MetadataRoute.Sitemap {
 ```
 
 </Step>
-
 <Step number={13} title="Quốc tế hóa tệp robots.txt của bạn" isOptional={true}>
 
 Tạo một tệp robots.txt xử lý đúng tất cả các phiên bản ngôn ngữ của các tuyến đường được bảo vệ của bạn. Điều này đảm bảo rằng các công cụ tìm kiếm không lập chỉ mục các trang quản trị hoặc bảng điều khiển bằng bất kỳ ngôn ngữ nào.
@@ -736,7 +721,6 @@ export default function robots(): MetadataRoute.Robots {
 ```
 
 </Step>
-
 <Step number={14} title="Thiết lập Proxy cho Định tuyến Locale" isOptional={true}>
 
 Tạo một proxy để tự động phát hiện locale ưu tiên của người dùng và chuyển hướng họ đến URL có tiền tố locale phù hợp. next-intl cung cấp một hàm proxy tiện lợi xử lý việc này một cách tự động.
@@ -758,7 +742,6 @@ export const config = {
 ```
 
 </Step>
-
 <Step number={15} title="Thiết lập kiểu TypeScript cho Locale" isOptional={true}>
 
 Thiết lập TypeScript sẽ giúp bạn có tính năng tự động hoàn thành và an toàn kiểu cho các khóa của bạn.
@@ -786,7 +769,6 @@ declare module "next-intl" {
 Đoạn mã này sẽ sử dụng Module Augmentation để thêm locales và messages vào kiểu AppConfig của next-intl.
 
 </Step>
-
 <Step number={16} title="Tự động hóa bản dịch của bạn bằng Intlayer" isOptional={true}>
 
 Intlayer là một thư viện **miễn phí** và **mã nguồn mở** được thiết kế để hỗ trợ quá trình bản địa hóa trong ứng dụng của bạn. Trong khi next-intl xử lý việc tải và quản lý bản dịch, Intlayer giúp tự động hóa quy trình làm việc bản dịch.

package/blog/vi/index.md

@@ -20,8 +20,6 @@ author: aymericzip
 
 Chào mừng bạn đến với blog của chúng tôi, nơi dành riêng cho tất cả các vấn đề về **quốc tế hóa** cho các ứng dụng JavaScript! Tại đây, chúng tôi khám phá các thực tiễn tốt nhất, chiến lược và công cụ giúp các nhà phát triển mở rộng sản phẩm kỹ thuật số của họ trên toàn cầu.
 
----
-
 ## Tại sao Quốc tế hóa (i18n) lại Quan trọng
 
 Trong thế giới kết nối ngày nay, người dùng mong đợi trải nghiệm liền mạch và được địa phương hóa. Quốc tế hóa (i18n) đảm bảo rằng ứng dụng web của bạn có thể thích ứng với các ngôn ngữ và sắc thái văn hóa khác nhau. Bằng cách áp dụng các thực tiễn i18n ngay từ đầu, bạn sẽ mở khóa nhiều lợi ích, chẳng hạn như:
@@ -31,8 +29,6 @@ Trong thế giới kết nối ngày nay, người dùng mong đợi trải nghi
 3. **Cải thiện khả năng tiếp cận:** i18n được cấu trúc tốt thường phù hợp với các tiêu chuẩn về khả năng tiếp cận, làm cho ứng dụng của bạn trở nên bao quát hơn.
 4. **Tăng hiệu quả SEO:** Nội dung được địa phương hóa có thể nâng cao khả năng hiển thị của bạn trong kết quả tìm kiếm theo vùng.
 
----
-
 ## Giải pháp Quốc tế hóa Mã nguồn mở
 
 Việc xây dựng một ứng dụng quốc tế hóa không nhất thiết phải phức tạp. Cộng đồng mã nguồn mở cung cấp nhiều công cụ và thư viện mạnh mẽ, được hỗ trợ tốt giúp việc địa phương hóa trở nên đơn giản hơn. Các giải pháp phổ biến như **react-intl**, **i18next**, và **FormatJS** cung cấp API linh hoạt và dễ dàng tích hợp với các framework JavaScript hiện đại như React, Vue và Angular.
@@ -43,8 +39,6 @@ Việc xây dựng một ứng dụng quốc tế hóa không nhất thiết ph
 - **Tiết kiệm chi phí:** Không có phí bản quyền, giúp việc thử nghiệm hoặc mở rộng ứng dụng trở nên đơn giản hơn.
 - **Hỗ trợ cộng đồng:** Cộng đồng lớn thường đồng nghĩa với nhiều hướng dẫn, tài liệu và plugin có sẵn.
 
----
-
 ## Thông báo và những điều sắp tới
 
 Chúng tôi rất vui mừng thông báo về các hướng dẫn sắp tới, các thực hành tốt nhất và **các nghiên cứu điển hình** về cách tối ưu hóa ứng dụng JavaScript của bạn cho đối tượng toàn cầu. Dưới đây là một cái nhìn sơ lược:
@@ -55,8 +49,6 @@ Chúng tôi rất vui mừng thông báo về các hướng dẫn sắp tới, c
 
 Hãy theo dõi các cập nhật này và nhiều hơn nữa!
 
----
-
 ## Đóng góp cho Blog của Chúng Tôi!
 
 Chúng tôi tin tưởng vào việc chia sẻ kiến thức do cộng đồng dẫn dắt. Nếu bạn có một ý tưởng tuyệt vời cho bài viết blog liên quan đến quốc tế hóa, **SEO**, hoặc bất kỳ chủ đề liên quan nào khác, chúng tôi rất mong được nghe từ bạn. Bạn có thể gửi Pull Request bằng cách thêm bài viết blog đề xuất của mình vào kho GitHub của chúng tôi:
@@ -65,6 +57,4 @@ Chúng tôi tin tưởng vào việc chia sẻ kiến thức do cộng đồng d
 
 Những đóng góp của bạn giúp chúng tôi làm phong phú nền tảng này và trao quyền cho các nhà phát triển trên toàn thế giới.
 
----
-
 **Cảm ơn bạn đã đọc và chào mừng bạn đến với cộng đồng i18n của chúng tôi!** Hãy đón chờ thêm nhiều thông tin chi tiết, mẹo và các thực hành tốt nhất về cách đưa ứng dụng JavaScript của bạn đến thành công quốc tế.