@intlayer/docs 8.11.3 → 8.12.0-canary.0

package/blog/uk/i18n_using_next-i18next.md

@@ -81,6 +81,7 @@ history:
   title="Демонстрація CodeSandbox, як інтернаціоналізувати ваш застосунок за допомогою Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
+/>
 
 > Дивіться [Шаблон застосунку](https://github.com/aymericzip/next-i18next-template) на GitHub.
 
@@ -117,7 +118,9 @@ history:
         └── ServerComponent.tsx
 ```
 
-### Крок 1: Встановіть залежності
+<Steps>
+
+<Step number={1} title="Встановіть залежності">
 
 Встановіть необхідні пакети за допомогою npm:
 
@@ -137,7 +140,9 @@ yarn add i18next react-i18next i18next-resources-to-backend
 - **react-i18next**: React-байндинги для i18next, що надають хуки, такі як `useTranslation`, для клієнтських компонентів.
 - **i18next-resources-to-backend**: Плагін, який дозволяє динамічно завантажувати файли перекладів, даючи змогу підвантажувати лише ті простори імен (namespaces), які потрібні.
 
-### Крок 2: Налаштуйте свій проєкт
+</Step>
+
+<Step number={2} title="Налаштуйте свій проєкт">
 
 Створіть файл конфігурації, щоб визначити підтримувані локалі, локаль за замовчуванням та допоміжні функції для локалізації URL. Цей файл слугує єдиним джерелом істини для вашої i18n-настройки та забезпечує безпечність типів у всьому застосунку.
 
@@ -190,7 +195,9 @@ export function getCookie(locale: Locale) {
 }
 ```
 
-### Крок 3: Централізація просторів імен перекладів
+</Step>
+
+<Step number={3} title="Централізація просторів імен перекладів">
 
 Створіть єдине джерело істини для кожного простору імен (namespace), який надає ваша аплікація. Повторне використання цього списку дозволяє синхронізувати код на сервері, клієнті та в інструментах і відкриває можливість суворої типізації для допоміжних функцій перекладу.
 
@@ -200,7 +207,9 @@ export const namespaces = ["common", "about"] as const;
 export type Namespace = (typeof namespaces)[number];
 ```
 
-### Крок 4: Сувора типізація ключів перекладу за допомогою TypeScript
+</Step>
+
+<Step number={4} title="Сувора типізація ключів перекладу за допомогою TypeScript">
 
 Розширіть `i18next`, щоб вказати на ваші канонічні мовні файли (зазвичай англійські). TypeScript потім виведе дійсні ключі для кожного простору імен, тож виклики `t()` перевіряються повністю.
 
@@ -238,7 +247,9 @@ const { t } = useTranslation("about");
 export type AboutTranslator = TFunction<"about">;
 ```
 
-### Крок 5: Налаштування серверної ініціалізації i18n
+</Step>
+
+<Step number={5} title="Налаштування серверної ініціалізації i18n">
 
 Створіть функцію ініціалізації на сервері, яка завантажує переклади для серверних компонентів. Ця функція створює окремий екземпляр i18next для рендерингу на сервері, забезпечуючи завантаження перекладів перед рендерингом.
 
@@ -293,7 +304,9 @@ export async function initI18next(
 }
 ```
 
-### Крок 6: Створіть клієнтський провайдер i18n
+</Step>
+
+<Step number={6} title="Створіть клієнтський провайдер i18n">
 
 Створіть клієнтський компонент-провайдер, який обгортає ваш додаток контекстом i18next. Цей провайдер отримує попередньо завантажені переклади з сервера, щоб запобігти мерехтінню неперекладеного вмісту (FOUC) та уникнути дублювання запитів.
 
@@ -376,7 +389,9 @@ export default function I18nProvider({
 }
 ```
 
-### Крок 7: Визначення динамічних маршрутів локалей
+</Step>
+
+<Step number={7} title="Визначення динамічних маршрутів локалей">
 
 Налаштуйте динамічну маршрутизацію для локалей, створивши директорію `[locale]` у вашій папці app. Це дозволяє Next.js обробляти маршрути залежно від локалі, де кожна локаль стає сегментом URL (наприклад, `/en/about`, `/fr/about`).
 
@@ -428,7 +443,9 @@ export default function LocaleLayout({
 }
 ```
 
-### Крок 8: Створіть файли перекладів
+</Step>
+
+<Step number={8} title="Створіть файли перекладів">
 
 Створіть JSON-файли для кожного locale та namespace. Така структура дозволяє логічно організувати переклади та завантажувати лише те, що потрібно для кожної сторінки.
 
@@ -494,7 +511,9 @@ export default function LocaleLayout({
 }
 ```
 
-### Крок 9: Використовуйте переклади на своїх сторінках
+</Step>
+
+<Step number={9} title="Використовуйте переклади на своїх сторінках">
 
 Створіть компонент сторінки, який ініціалізує i18next на сервері та передає переклади як серверним, так і клієнтським компонентам. Це гарантує завантаження перекладів перед рендерінгом і запобігає мерехтінню контенту.
 
@@ -554,7 +573,9 @@ export default async function AboutPage({
 }
 ```
 
-### Крок 10: Використання перекладів у клієнтських компонентах
+</Step>
+
+<Step number={10} title="Використання перекладів у клієнтських компонентах">
 
 Клієнтські компоненти можуть використовувати хук `useTranslation` для доступу до перекладів. Цей хук надає доступ до функції перекладу та екземпляра i18n, що дозволяє перекладати вміст та отримувати інформацію про локаль.
 
@@ -605,7 +626,9 @@ const ClientComponent = () => {
 export default ClientComponent;
 ```
 
-### Крок 11: Використання перекладів у серверних компонентах
+</Step>
+
+<Step number={11} title="Використання перекладів у серверних компонентах">
 
 Серверні компоненти не можуть використовувати React hooks, тому вони отримують переклади через props від батьківських компонентів. Такий підхід робить серверні компоненти синхронними і дозволяє вкладати їх у клієнтські компоненти.
 
@@ -651,9 +674,9 @@ const ServerComponent = ({ t, locale, count }: ServerComponentProps) => {
 export default ServerComponent;
 ```
 
----
+</Step>
 
-### (Необов'язково) Крок 12: Змініть мову вашого контенту
+<Step number={12} title="Змініть мову вашого контенту" isOptional={true}>
 
 Щоб змінити мову вашого контенту в Next.js, рекомендовано використовувати URL-адреси з префіксом локалі та компоненти Link від Next.js. Приклад нижче зчитує поточну локаль з маршруту, видаляє її з pathname і рендерить по одному посиланню для кожної доступної локалі.
 
@@ -729,7 +752,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Необов'язково) Крок 13: Створіть локалізований компонент Link
+</Step>
+
+<Step number={13} title="Створіть локалізований компонент Link" isOptional={true}>
 
 Повторне використання локалізованих URL у вашому додатку зберігає навігацію послідовною та дружньою до SEO. Обгорніть `next/link` у невеликий хелпер, який додає префікс активної локалі до внутрішніх маршрутів, залишаючи зовнішні URL без змін.
 
@@ -780,7 +805,9 @@ export default function LocalizedLink({
 
 > Порада: Оскільки `LocalizedLink` є drop-in replacement, мігруйте поступово, замінюючи імпорти та дозволяючи компоненту обробляти URL-адреси, специфічні для локалі.
 
-### (Необов'язково) Крок 14: Доступ до активної локалі всередині Server Actions
+</Step>
+
+<Step number={14} title="Доступ до активної локалі всередині Server Actions" isOptional={true}>
 
 Server Actions часто потребують поточної локалі для email-розсилок, логування або інтеграцій зі сторонніми сервісами. Поєднайте cookie локалі, встановлене вашим проксі, із заголовком `Accept-Language` як fallback.
 
@@ -818,7 +845,9 @@ export async function stuffFromServer(formData: FormData) {
 
 > Оскільки цей хелпер спирається на cookies і headers Next.js, він працює в Route Handlers, Server Actions та інших серверних контекстах.
 
-### (Необов'язково) Крок 15: Інтернаціоналізуйте метадані
+</Step>
+
+<Step number={15} title="Інтернаціоналізуйте метадані" isOptional={true}>
 
 Переклад контенту важливий, але основна мета інтернаціоналізації, зробити ваш вебсайт більш помітним для світу. I18n, потужний інструмент для підвищення видимості сайту завдяки належному SEO.
 
@@ -885,7 +914,9 @@ export default async function AboutPage() {
 }
 ```
 
-### (Необов'язково) Крок 16: Інтернаціоналізуйте ваш Sitemap
+</Step>
+
+<Step number={16} title="Інтернаціоналізуйте ваш Sitemap" isOptional={true}>
 
 Згенеруйте карту сайту (sitemap), яка включає всі локалізовані версії ваших сторінок. Це допомагає пошуковим системам знаходити та індексувати всі мовні версії вашого контенту.
 
@@ -939,7 +970,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Необов'язково) Крок 17: Інтернаціоналізуйте ваш robots.txt
+</Step>
+
+<Step number={17} title="Інтернаціоналізуйте ваш robots.txt" isOptional={true}>
 
 Створіть файл robots.txt, який правильно обробляє всі мовні версії ваших захищених маршрутів. Це гарантує, що пошукові системи не індексують сторінки адміністратора або панелі керування жодною мовою.
 
@@ -970,7 +1003,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Необов'язково) Крок 18: Налаштуйте middleware для маршрутизації локалей
+</Step>
+
+<Step number={18} title="Налаштуйте middleware для маршрутизації локалей" isOptional={true}>
 
 Створіть проксі, який автоматично визначає переважну локаль користувача та перенаправляє його на відповідний URL з префіксом локалі. Це покращує досвід користувача, відображаючи контент обраною мовою.
 
@@ -1059,7 +1094,9 @@ export const config = {
 };
 ```
 
-### (Необов'язково) Крок 19: Автоматизуйте ваші переклади за допомогою Intlayer
+</Step>
+
+<Step number={19} title="Автоматизуйте ваші переклади за допомогою Intlayer" isOptional={true}>
 
 Intlayer, це **безкоштовна** та **з відкритим вихідним кодом** бібліотека, створена для допомоги у процесі локалізації вашого застосунку. Поки i18next відповідає за завантаження та управління перекладами, Intlayer допомагає автоматизувати робочий процес перекладів.
 
@@ -1084,3 +1121,7 @@ Intlayer дозволяє вам:
   Intlayer пропонує безкоштовний візуальний редактор для редагування вашого контенту. Дізнайтеся більше про [візуальне редагування ваших перекладів](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_visual_editor.md).
 
 І це ще не все. Щоб дізнатися про всі можливості, які надає Intlayer, будь ласка, перегляньте [документацію «Переваги Intlayer»](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>

package/blog/uk/i18n_using_next-intl.md

@@ -109,7 +109,9 @@ history:
         └── ServerComponent.tsx
 ```
 
-### Крок 1: Встановіть залежності
+<Steps>
+
+<Step number={1} title="Встановіть залежності">
 
 Встановіть необхідні пакети, використовуючи:
 
@@ -127,7 +129,9 @@ yarn add next-intl
 
 - **next-intl**: Основна бібліотека інтернаціоналізації для Next.js App Router, яка надає хуки, server-функції та клієнтські провайдери для керування перекладами.
 
-### Крок 2: Налаштуйте ваш проєкт
+</Step>
+
+<Step number={2} title="Налаштуйте ваш проєкт">
 
 Створіть файл конфігурації, який визначає підтримувані локалі та налаштовує конфігурацію запитів next-intl. Цей файл слугує єдиним джерелом правди для вашої налаштування i18n і забезпечує безпеку типів у всьому застосунку.
 
@@ -211,7 +215,9 @@ export const { Link, redirect, usePathname, useRouter, getPathname } =
 export const proxy = createMiddleware(routingOptions);
 ```
 
-### Крок 3: Визначте динамічні маршрути локалей
+</Step>
+
+<Step number={3} title="Визначте динамічні маршрути локалей">
 
 Налаштуйте динамічний роутинг для локалей, створивши директорію `[locale]` у вашій папці app. Це дозволяє Next.js обробляти маршрутизацію за локаллю, де кожна локаль стає сегментом URL (наприклад, `/en/about`, `/fr/about`).
 
@@ -299,7 +305,9 @@ export default async function AboutPage({
 }
 ```
 
-### Крок 4: Створіть файли перекладів
+</Step>
+
+<Step number={4} title="Створіть файли перекладів">
 
 Створіть JSON-файли для кожної локалі та простору імен. Така структура дозволяє логічно організувати переклади та завантажувати лише те, що потрібно для кожної сторінки.
 
@@ -341,7 +349,9 @@ export default async function AboutPage({
 }
 ```
 
-### Крок 5: Використання перекладів на ваших сторінках
+</Step>
+
+<Step number={5} title="Використання перекладів на ваших сторінках">
 
 Створіть компонент сторінки, який завантажує переклади на сервері та передає їх як серверним, так і клієнтським компонентам. Це гарантує, що переклади завантажені перед рендерингом і запобігає блиманню (content flashing).
 
@@ -392,7 +402,9 @@ export default async function AboutPage({
 }
 ```
 
-### Крок 6: Використання перекладів у клієнтських компонентах
+</Step>
+
+<Step number={6} title="Використання перекладів у клієнтських компонентах">
 
 Клієнтські компоненти можуть використовувати хуки `useTranslations` та `useFormatter` для доступу до перекладів і функцій форматування. Ці хуки читають дані з контексту `NextIntlClientProvider`.
 
@@ -428,7 +440,9 @@ const ClientComponent = () => {
 };
 ```
 
-### Крок 7: Використання перекладів у серверних компонентах
+</Step>
+
+<Step number={7} title="Використання перекладів у серверних компонентах">
 
 Серверні компоненти не можуть використовувати React‑хуки, тому вони отримують переклади та функції форматування як props від батьківських компонентів. Такий підхід зберігає серверні компоненти синхронними й дозволяє вкладати їх усередину клієнтських компонентів.
 
@@ -460,9 +474,9 @@ const ServerComponent = ({
 
 > У вашому page/layout використовуйте `getTranslations` та `getFormatter` з `next-intl/server`, щоб попередньо обчислити переклади та форматування, а потім передайте їх як props серверним компонентам.
 
----
+</Step>
 
-### (Необов'язково) Крок 8: Змініть мову вашого контенту
+<Step number={8} title="Змініть мову вашого контенту" isOptional={true}>
 
 Щоб змінити мову контенту за допомогою next-intl, рендерте посилання з урахуванням локалі (locale-aware links), які вказують на той самий pathname при перемиканні локалі. Провайдер автоматично переписує URL-адреси, тож вам потрібно лише націлитися на поточний маршрут.
 
@@ -534,7 +548,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Необов'язковий) Крок 9: Використовуйте локалізований компонент Link
+</Step>
+
+<Step number={9} title="Використовуйте локалізований компонент Link" isOptional={true}>
 
 `next-intl` надає сабпакет `next-intl/navigation`, який містить локалізований компонент Link, що автоматично застосовує активну локаль. Ми вже експортували його для вас у файлі `@/i18n`, тож ви можете використовувати його так:
 
@@ -544,7 +560,9 @@ import { Link } from "@/i18n";
 return <Link href="/about">t("about.title")</Link>;
 ```
 
-### (Необов'язковий) Крок 10: Отримання активної локалі всередині Server Actions
+</Step>
+
+<Step number={10} title="Отримання активної локалі всередині Server Actions" isOptional={true}>
 
 Server Actions можуть зчитувати поточну локаль за допомогою `next-intl/server`. Це корисно для надсилання локалізованих електронних листів або збереження мовних налаштувань разом із надісланими даними.
 
@@ -567,7 +585,9 @@ export async function handleContactForm(formData: FormData) {
 
 > `getLocale` читає локаль, встановлену проксі `next-intl`, тож функція працює у будь-якому місці на сервері: Route Handlers, Server Actions та edge functions.
 
-### (Необов'язково) Крок 11: Інтернаціоналізуйте свої метадані
+</Step>
+
+<Step number={11} title="Інтернаціоналізуйте свої метадані" isOptional={true}>
 
 Переклад контенту важливий, але головна мета інтернаціоналізації, зробити ваш вебсайт більш помітним у світі. I18n, неймовірний важіль для підвищення видимості вашого вебсайту за допомогою правильної SEO.
 
@@ -606,7 +626,9 @@ export async function generateMetadata({
 // ... Решта коду сторінки
 ```
 
-### (Необов'язково) Крок 12: Інтернаціоналізуйте свій sitemap
+</Step>
+
+<Step number={12} title="Інтернаціоналізуйте свій sitemap" isOptional={true}>
 
 Створіть sitemap, який включає всі мовні версії ваших сторінок. Це допомагає пошуковим системам виявляти та індексувати всі мовні версії вашого контенту.
 
@@ -654,7 +676,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Необов'язково) Крок 13: Інтернаціоналізуйте ваш robots.txt
+</Step>
+
+<Step number={13} title="Інтернаціоналізуйте ваш robots.txt" isOptional={true}>
 
 Створіть файл robots.txt, який правильно обробляє всі мовні версії ваших захищених маршрутів. Це гарантує, що пошукові системи не індексують сторінки admin або dashboard жодною мовою.
 
@@ -687,7 +711,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Необов'язково) Крок 14: Налаштування proxy для маршрутизації локалі
+</Step>
+
+<Step number={14} title="Налаштування proxy для маршрутизації локалі" isOptional={true}>
 
 Створіть proxy, щоб автоматично визначати бажану користувачем локаль та перенаправляти його на відповідний URL з префіксом локалі. next-intl надає зручну функцію proxy, яка обробляє це автоматично.
 
@@ -707,7 +733,9 @@ export const config = {
 };
 ```
 
-### (Необов'язково) Крок 15: Налаштуйте типи TypeScript для локалі
+</Step>
+
+<Step number={15} title="Налаштуйте типи TypeScript для локалі" isOptional={true}>
 
 Налаштування TypeScript допоможе отримати автозаповнення та типобезпеку для ваших ключів.
 
@@ -733,7 +761,9 @@ declare module "next-intl" {
 
 Цей код використовує Module Augmentation, щоб додати locales і messages до типу AppConfig з next-intl.
 
-### (Необов'язково) Крок 15: Автоматизуйте переклади за допомогою Intlayer
+</Step>
+
+<Step number={16} title="Автоматизуйте переклади за допомогою Intlayer" isOptional={true}>
 
 Intlayer, це **безкоштовна** та **відкрита** бібліотека, створена для полегшення процесу локалізації у вашому застосунку. У той час як next-intl відповідає за завантаження та управління перекладами, Intlayer допомагає автоматизувати робочий процес перекладів.
 
@@ -758,3 +788,7 @@ Intlayer дозволить вам:
   Intlayer пропонує безкоштовний візуальний редактор для редагування вашого контенту. Дізнайтеся більше про [візуальне редагування ваших перекладів](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_visual_editor.md).
 
 І це ще не все. Щоб ознайомитися з усіма можливостями, які надає Intlayer, зверніться до документації про [переваги Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>

package/blog/vi/i18n_using_next-i18next.md

@@ -80,6 +80,7 @@ Trước khi đi vào triển khai, đây là một số thực hành bạn nên
   title="Demo CodeSandbox - Cách Quốc tế hóa ứng dụng của bạn sử dụng Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
+/>
 
 > Xem [Mẫu Ứng Dụng](https://github.com/aymericzip/next-i18next-template) trên GitHub.
 
@@ -116,7 +117,9 @@ Cấu trúc dự án mà chúng ta sẽ tạo:
         └── ServerComponent.tsx
 ```
 
-### Bước 1: Cài Đặt Các Phụ Thuộc
+<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:
 
@@ -136,7 +139,9 @@ yarn add i18next react-i18next i18next-resources-to-backend
 - **react-i18next**: Liên kết React cho i18next cung cấp các hook như `useTranslation` cho các component phía client.
 - **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.
 
-### Bước 2: Cấu Hình Dự Án Của Bạn
+</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.
 
@@ -189,7 +194,9 @@ export function getCookie(locale: Locale) {
 }
 ```
 
-### Bước 3: Tập trung các namespace dịch thuật
+</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.
 
@@ -199,7 +206,9 @@ export const namespaces = ["common", "about"] as const;
 export type Namespace = (typeof namespaces)[number];
 ```
 
-### Bước 4: Định kiểu mạnh cho các khóa dịch với TypeScript
+</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.
 
@@ -237,7 +246,9 @@ const { t } = useTranslation("about");
 export type AboutTranslator = TFunction<"about">;
 ```
 
-### Bước 5: Thiết lập khởi tạo i18n phía server
+</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.
 
@@ -292,7 +303,9 @@ export async function initI18next(
 }
 ```
 
-### Bước 6: Tạo Provider i18n phía Client
+</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.
 
@@ -375,7 +388,9 @@ export default function I18nProvider({
 }
 ```
 
-### Bước 7: Định nghĩa các tuyến đường động theo locale
+</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`).
 
@@ -427,7 +442,9 @@ export default function LocaleLayout({
 }
 ```
 
-### Bước 8: Tạo các tệp dịch của bạn
+</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.
 
@@ -493,7 +510,9 @@ Tổ chức các bản dịch theo namespace (ví dụ: `common.json`, `about.js
 }
 ```
 
-### Bước 9: Sử dụng Bản dịch trong Trang của Bạn
+</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.
 
@@ -553,7 +572,9 @@ export default async function AboutPage({
 }
 ```
 
-### Bước 10: Sử dụng Dịch trong Các Component Client
+</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.
 
@@ -604,7 +625,9 @@ const ClientComponent = () => {
 export default ClientComponent;
 ```
 
-### Bước 11: Sử dụng bản dịch trong các Server Components
+</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.
 
@@ -650,9 +673,9 @@ const ServerComponent = ({ t, locale, count }: ServerComponentProps) => {
 export default ServerComponent;
 ```
 
----
+</Step>
 
-### (Tùy chọn) Bước 12: Thay đổi ngôn ngữ nội dung của bạn
+<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.
 
@@ -724,7 +747,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Tùy chọn) Bước 13: Xây dựng một component Link có hỗ trợ đa ngôn ngữ
+</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.
 
@@ -775,7 +800,9 @@ 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ể.
 
-### (Tùy chọn) Bước 14: Truy cập locale đang hoạt động bên trong Server Actions
+</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.
 
@@ -813,7 +840,9 @@ 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.
 
-### (Tùy chọn) Bước 15: Quốc tế hóa Metadata của bạn
+</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.
 
@@ -880,7 +909,9 @@ export default async function AboutPage() {
 }
 ```
 
-### (Tùy chọn) Bước 16: Quốc tế hóa Sitemap của bạn
+</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.
 
@@ -936,7 +967,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Tùy chọn) Bước 17: Quốc tế hóa tệp robots.txt của bạn
+</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.
 
@@ -967,7 +1000,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Tùy chọn) Bước 18: Thiết lập Middleware cho Định tuyến Ngôn ngữ
+</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.
 
@@ -1056,7 +1091,9 @@ export const config = {
 };
 ```
 
-### (Tùy chọn) Bước 19: Tự động hóa bản dịch của bạn bằng Intlayer
+</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.
 
@@ -1086,3 +1123,7 @@ Intlayer sẽ cho phép bạn:
   Intlayer cung cấp một trình chỉnh sửa trực quan miễn phí để chỉnh sửa nội dung của bạn bằng trình chỉnh sửa trực quan. Tìm hiểu thêm về [chỉnh sửa trực quan bản dịch của bạn](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_visual_editor.md).
 
 Và còn nhiều hơn nữa. Để khám phá tất cả các tính năng mà Intlayer cung cấp, vui lòng tham khảo [Lợi ích của tài liệu Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>