@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/id/intlayer_with_tanstack+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-05-06
-title: i18n Tanstack Start - Cara Menerjemahkan Aplikasi Tanstack Start Menggunakan Solid.js di Tahun 2026
-description: Pelajari cara menambahkan internasionalisasi (i18n) ke aplikasi Tanstack Start Anda menggunakan Intlayer dan Solid.js. Ikuti panduan komprehensif ini untuk membuat aplikasi multibahasa dengan perutean yang sadar akan lokal.
+updatedAt: 2026-05-31
+title: "TanStack Start + Solid i18n - Panduan lengkap menerjemahkan aplikasi Anda"
+description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi TanStack Start + Solid multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:
   - Internasionalisasi
   - Dokumentasi
@@ -37,17 +37,54 @@ history:
 
 Panduan ini mendemonstrasikan cara mengintegrasikan **Intlayer** untuk internasionalisasi yang mulus dalam proyek Tanstack Start dengan Solid.js, perutean yang sadar akan lokal (locale-aware), dukungan TypeScript, dan praktik pengembangan modern.
 
-## Apa itu Intlayer?
+## Mengapa Intlayer dibandingkan alternatif?
 
-**Intlayer** adalah perpustakaan internasionalisasi (i18n) inovatif dan sumber terbuka yang dirancang untuk menyederhanakan dukungan multibahasa dalam aplikasi web modern.
+Dibandingkan dengan solusi utama seperti `react-i18next` atau `i18next`, Intlayer adalah solusi yang hadir dengan pengoptimalan terintegrasi seperti:
 
-Dengan Intlayer, Anda dapat:
+<AccordionGroup>
 
-- **Mengelola terjemahan dengan mudah** menggunakan kamus deklaratif di tingkat komponen.
-- **Melokalisasi metadata, rute, dan konten secara dinamis**.
-- **Memastikan dukungan TypeScript** dengan tipe yang dihasilkan secara otomatis, meningkatkan pelengkapan otomatis (autocompletion) dan deteksi kesalahan.
-- **Memanfaatkan fitur-fitur canggih**, seperti deteksi dan pengalihan lokal secara dinamis.
-- **Mengaktifkan perutean yang sadar akan lokal** dengan sistem perutean berbasis file Milik Tanstack Start.
+<Accordion header="Cakupan TanStack Start penuh">
+
+Intlayer dioptimalkan untuk bekerja sempurna dengan TanStack Start dan Solid dengan menawarkan **perutean multibahasa**, **peta situs**, dan semua fitur yang diperlukan untuk penskalaan internasionalisasi (i18n).
+
+</Accordion>
+
+<Accordion header="Ukuran bundle">
+
+Daripada memuat file JSON berukuran besar ke halaman Anda, muat saja konten yang diperlukan. Intlayer membantu **mengurangi ukuran bundle dan halaman Anda hingga 50%**.
+
+</Accordion>
+
+<Accordion header="Kemampuan Pemeliharaan">
+
+Mencakup konten aplikasi Anda **memfasilitasi pemeliharaan** untuk aplikasi berskala besar. Anda dapat menduplikasi atau menghapus satu folder fitur tanpa beban mental untuk meninjau seluruh basis kode konten Anda. Selain itu, Intlayer **diketik sepenuhnya** untuk memastikan keakuratan konten Anda.
+
+</Accordion>
+
+<Accordion header="Agen AI">
+
+Menempatkan konten bersama **mengurangi konteks yang diperlukan** dengan Model Bahasa Besar (LLM). Intlayer juga dilengkapi dengan serangkaian alat, seperti **CLI** untuk menguji terjemahan yang hilang,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, dan **[agent skill](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, untuk menjadikan pengalaman pengembang (DX) lebih lancar bagi agen AI.
+
+</Accordion>
+
+<Accordion header="Otomatisasi">
+
+Gunakan otomatisasi untuk menerjemahkan dalam saluran CI/CD Anda menggunakan LLM pilihan Anda dengan biaya penyedia AI Anda. Intlayer juga menawarkan **compiler** untuk mengotomatiskan ekstraksi konten, serta [platform web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) untuk membantu **menerjemahkan di latar belakang**.
+
+</Accordion>
+
+<Accordion header="Pertunjukan">
+
+Menghubungkan file JSON berukuran besar ke komponen dapat menyebabkan masalah kinerja dan reaktivitas. Intlayer mengoptimalkan pemuatan konten Anda pada waktu pembuatan.
+
+</Accordion>
+
+<Accordion header="Menskalakan tanpa pengembang">
+
+Lebih dari sekedar solusi i18n, Intlayer menyediakan **[editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** yang dihosting sendiri dan **[CMS lengkap](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** untuk membantu Anda mengelola konten multibahasa secara **real-time**, membuat kolaborasi dengan penerjemah, copywriter, dan anggota tim lainnya menjadi lancar. Konten dapat disimpan secara lokal dan/atau jarak jauh.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -85,11 +122,15 @@ Dengan Intlayer, Anda dapat:
 
 Lihat [Templat Aplikasi](https://github.com/aymericzip/intlayer-tanstack-start-solid-template) di GitHub.
 
-### Langkah 1: Pembuatan Proyek
+<Steps>
+
+<Step number={1} title="Pembuatan Proyek">
 
 Pertama, buat proyek TanStack Start baru mengikuti panduan [Memulai Proyek Baru](https://tanstack.com/start/latest/docs/framework/solid/quick-start) di situs web TanStack Start.
 
-### Langkah 2: Instal Paket Intlayer
+</Step>
+
+<Step number={2} title="Instal Paket Intlayer">
 
 Instal paket-paket yang diperlukan menggunakan pengelola paket pilihan Anda:
 
@@ -127,7 +168,9 @@ bun x intlayer init
 - **vite-intlayer**
   Menyertakan plugin Vite untuk mengintegrasikan Intlayer dengan [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), serta middleware untuk mendeteksi lokal pilihan pengguna, mengelola cookie, dan menangani pengalihan URL.
 
-### Langkah 3: Konfigurasi Proyek Anda
+</Step>
+
+<Step number={3} title="Konfigurasi Proyek Anda">
 
 Buat file konfigurasi untuk mengatur bahasa aplikasi Anda:
 
@@ -148,7 +191,9 @@ export default config;
 
 > Melalui file konfigurasi ini, Anda dapat mengonfigurasi URL yang dilokalisasi, pengalihan middleware, nama cookie, lokasi dan ekstensi deklarasi konten Anda, menonaktifkan log Intlayer di konsol, dan banyak lagi. Untuk daftar lengkap parameter yang tersedia, lihat [dokumentasi konfigurasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/configuration.md).
 
-### Langkah 4: Integrasikan Intlayer dalam Konfigurasi Vite Anda
+</Step>
+
+<Step number={4} title="Integrasikan Intlayer dalam Konfigurasi Vite Anda">
 
 Tambahkan plugin intlayer dalam konfigurasi Anda:
 
@@ -176,7 +221,9 @@ export default defineConfig({
 
 > Plugin Vite `intlayer()` digunakan untuk mengintegrasikan Intlayer dengan Vite. Plugin ini memastikan pembuatan file deklarasi konten dan memantaunya dalam mode pengembangan. Plugin ini mendefinisikan variabel lingkungan Intlayer dalam aplikasi Vite. Selain itu, ia menyediakan alias untuk mengurangi beban performa.
 
-### Langkah 5: Buat Root Layout
+</Step>
+
+<Step number={5} title="Buat Root Layout">
 
 Konfigurasikan root layout Anda untuk mendukung internasionalisasi dengan menggunakan `useParams` untuk mendeteksi lokal saat ini dan mengatur atribut `lang` serta `dir` pada tag `html`.
 
@@ -217,7 +264,9 @@ const RootComponent: ParentComponent = (props) => {
 };
 ```
 
-### Langkah 6: Buat Locale Layout (Opsional)
+</Step>
+
+<Step number={6} title="Buat Locale Layout">
 
 Buat layout yang menangani prefiks lokal dan melakukan validasi. Layout ini akan memastikan hanya lokal yang valid yang diproses.
 
@@ -252,7 +301,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > Untuk mode `'prefix-all'`, Anda mungkin lebih suka mengganti slot tersebut menjadi `$locale`.
 > Untuk mode `'no-prefix'` atau `'search-params'`, Anda dapat menghapus slot tersebut sepenuhnya.
 
-### Langkah 7: Deklarasikan Konten Anda
+</Step>
+
+<Step number={7} title="Deklarasikan Konten Anda">
 
 Buat dan kelola deklarasi konten Anda untuk menyimpan terjemahan:
 
@@ -298,7 +349,9 @@ export default appContent;
 
 > Untuk detail lebih lanjut, lihat [dokumentasi deklarasi konten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/content_file.md).
 
-### Langkah 8: Gunakan Komponen dan Hook yang Sadar akan Lokal
+</Step>
+
+<Step number={8} title="Gunakan Komponen dan Hook yang Sadar akan Lokal">
 
 Buat komponen `LocalizedLink` untuk navigasi yang sadar akan lokal:
 
@@ -377,7 +430,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Langkah 9: Gunakan Intlayer di Halaman Anda
+</Step>
+
+<Step number={9} title="Gunakan Intlayer di Halaman Anda">
 
 Akses kamus konten Anda di seluruh aplikasi:
 
@@ -420,7 +475,9 @@ function RouteComponent() {
 >
 > Untuk mempelajari lebih lanjut tentang hook `useIntlayer`, lihat [dokumentasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/packages/solid-intlayer/useIntlayer.md).
 
-### Langkah 10: Buat Komponen Locale Switcher
+</Step>
+
+<Step number={10} title="Buat Komponen Locale Switcher">
 
 Buat komponen yang memungkinkan pengguna untuk mengubah bahasa:
 
@@ -464,7 +521,9 @@ export default LocaleSwitcher;
 >
 > Untuk mempelajari lebih lanjut tentang hook `useLocale`, lihat [dokumentasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/packages/solid-intlayer/useLocale.md).
 
-### Langkah 11: Pengelolaan Atribut HTML
+</Step>
+
+<Step number={11} title="Pengelolaan Atribut HTML">
 
 Seperti yang terlihat pada Langkah 5, Anda dapat mengelola atribut `lang` dan `dir` dari tag `html` dengan menggunakan `useParams` di root component Anda. Ini memastikan atribut yang benar disetel baik di server maupun klien.
 
@@ -483,7 +542,9 @@ const RootComponent: ParentComponent = (props) => {
 
 ---
 
-### Langkah 12: Tambahkan Middleware (Opsional)
+</Step>
+
+<Step number={12} title="Tambahkan Middleware">
 
 Anda juga dapat menggunakan `intlayerProxy` untuk menambahkan perutean sisi server ke aplikasi Anda. Plugin ini secara otomatis akan mendeteksi lokal saat ini berdasarkan URL dan mengatur cookie lokal yang sesuai. Jika tidak ada lokal yang ditentukan, plugin akan menentukan lokal yang paling tepat berdasarkan preferensi bahasa browser pengguna. Jika tidak ada lokal yang terdeteksi, ia akan mengalihkan ke lokal default.
 
@@ -514,7 +575,9 @@ export default defineConfig({
 
 ---
 
-### Langkah 13: Internasionalisasi Metadata Anda (Opsional)
+</Step>
+
+<Step number={13} title="Internasionalisasi Metadata Anda">
 
 Anda juga dapat menggunakan fungsi `getIntlayer` untuk mengakses kamus konten Anda dalam `head` loader untuk metadata yang sadar akan lokal:
 
@@ -561,7 +624,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Langkah 14: Ambil lokal di server action Anda (Opsional)
+</Step>
+
+<Step number={14} title="Ambil lokal di server action Anda">
 
 Anda mungkin ingin mengakses lokal saat ini dari dalam server action atau titik akhir API Anda.
 Anda dapat melakukan ini menggunakan helper `getLocale` dari `intlayer`.
@@ -598,7 +663,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Langkah 15: Mengelola halaman "not found" (Opsional)
+</Step>
+
+<Step number={15} title="Mengelola halaman &quot;not found&quot;">
 
 Saat pengguna mengunjungi halaman yang tidak ada, Anda dapat menampilkan halaman kustom "not found" dan prefiks lokal dapat memengaruhi cara halaman "not found" tersebut dipicu.
 
@@ -672,7 +739,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (Opsional) Langkah 16: Ekstrak konten dari komponen Anda
+</Step>
+
+<Step number={16} title="Ekstrak konten dari komponen Anda" isOptional={true}>
 
 Jika Anda memiliki basis kode yang sudah ada, mengubah ribuan file bisa memakan waktu lama.
 
@@ -785,7 +854,9 @@ bun run build # Atau bun run dev
 
 ---
 
-### Langkah 17: Konfigurasi TypeScript (Opsional)
+</Step>
+
+<Step number={17} title="Konfigurasi TypeScript">
 
 Intlayer menggunakan module augmentation untuk mendapatkan manfaat TypeScript dan membuat basis kode Anda lebih kuat.
 
@@ -803,6 +874,10 @@ Pastikan konfigurasi TypeScript Anda menyertakan tipe yang dihasilkan secara oto
 
 ---
 
+</Step>
+
+</Steps>
+
 ### Konfigurasi Git
 
 Disarankan untuk mengabaikan file yang dihasilkan oleh Intlayer. Ini memungkinkan Anda untuk menghindari melakukan komit file tersebut ke repositori Git Anda.

package/docs/id/intlayer_with_tanstack.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-05-06
-title: Tanstack Start i18n - Cara menerjemahkan aplikasi Tanstack Start di 2026
-description: Pelajari cara menambahkan internasionalisasi (i18n) ke aplikasi TanStack Start Anda menggunakan Intlayer. Ikuti panduan komprehensif ini untuk membuat aplikasi Anda multibahasa dengan routing yang mendukung locale.
+updatedAt: 2026-05-31
+title: "TanStack Start i18n - Panduan lengkap menerjemahkan aplikasi Anda"
+description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi TanStack Start multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:
   - Internasionalisasi
   - Dokumentasi
@@ -54,17 +54,54 @@ history:
 
 Panduan ini mendemonstrasikan cara mengintegrasikan **Intlayer** untuk internasionalisasi yang mulus dalam proyek TanStack Start dengan routing yang mendukung locale, dukungan TypeScript, dan praktik pengembangan modern.
 
-## Apa itu Intlayer?
+## Mengapa Intlayer dibandingkan alternatif?
 
-**Intlayer** adalah perpustakaan internasionalisasi (i18n) sumber terbuka yang inovatif yang dirancang untuk menyederhanakan dukungan multibahasa dalam aplikasi web modern.
+Dibandingkan dengan solusi utama seperti `react-i18next` atau `use-intl`, atau `paraglide`, Intlayer adalah solusi yang hadir dengan pengoptimalan terintegrasi seperti:
 
-Dengan Intlayer, Anda dapat:
+<AccordionGroup>
 
-- **Mengelola terjemahan dengan mudah** menggunakan kamus deklaratif di tingkat komponen.
-- **Melokalkan metadata, rute, dan konten secara dinamis**.
-- **Memastikan dukungan TypeScript** dengan tipe yang dihasilkan secara otomatis, meningkatkan pelengkapan otomatis dan deteksi kesalahan.
-- **Manfaatkan fitur-fitur canggih**, seperti deteksi dan pengalihan locale secara dinamis.
-- **Aktifkan routing yang mendukung locale** dengan sistem routing berbasis file TanStack Start.
+<Accordion header="Cakupan TanStack Start penuh">
+
+Intlayer sepenuhnya dioptimalkan untuk TanStack Start, menyediakan **perutean multibahasa**, **manajemen cookie**, **pembuatan peta situs**, **pemuatan konten dinamis**, dan semua fitur yang diperlukan untuk meningkatkan upaya internasionalisasi Anda (i18n).
+
+</Accordion>
+
+<Accordion header="Ukuran bundle">
+
+Daripada memuat file JSON berukuran besar ke halaman Anda, muat saja konten yang diperlukan. Intlayer membantu **mengurangi ukuran bundle dan halaman Anda hingga 50%**.
+
+</Accordion>
+
+<Accordion header="Kemampuan Pemeliharaan">
+
+Mencakup konten aplikasi Anda **memfasilitasi pemeliharaan** untuk aplikasi berskala besar. Anda dapat menduplikasi atau menghapus satu folder fitur tanpa beban mental untuk meninjau seluruh basis kode konten Anda. Selain itu, Intlayer **diketik sepenuhnya** untuk memastikan keakuratan konten Anda.
+
+</Accordion>
+
+<Accordion header="Agen AI">
+
+Menempatkan konten bersama **mengurangi konteks yang diperlukan** dengan Model Bahasa Besar (LLM). Intlayer juga dilengkapi dengan serangkaian alat, seperti **CLI** untuk menguji terjemahan yang hilang,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, dan **[agent skill](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, untuk menjadikan pengalaman pengembang (DX) lebih lancar bagi agen AI.
+
+</Accordion>
+
+<Accordion header="Otomatisasi">
+
+Gunakan otomatisasi untuk menerjemahkan dalam saluran CI/CD Anda menggunakan LLM pilihan Anda dengan biaya penyedia AI Anda. Intlayer juga menawarkan **compiler** untuk mengotomatiskan ekstraksi konten, serta [platform web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) untuk membantu **menerjemahkan di latar belakang**.
+
+</Accordion>
+
+<Accordion header="Pertunjukan">
+
+Menghubungkan file JSON berukuran besar ke komponen dapat menyebabkan masalah kinerja dan reaktivitas. Intlayer mengoptimalkan pemuatan konten Anda pada waktu pembuatan.
+
+</Accordion>
+
+<Accordion header="Menskalakan tanpa pengembang">
+
+Lebih dari sekedar solusi i18n, Intlayer menyediakan **[editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** yang dihosting sendiri dan **[CMS lengkap](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** untuk membantu Anda mengelola konten multibahasa secara **real-time**, membuat kolaborasi dengan penerjemah, copywriter, dan anggota tim lainnya menjadi lancar. Konten dapat disimpan secara lokal dan/atau jarak jauh.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -102,11 +139,15 @@ Dengan Intlayer, Anda dapat:
 
 Lihat [Template Aplikasi](https://github.com/aymericzip/intlayer-tanstack-start-template) di GitHub.
 
-### Langkah 1: Buat Proyek
+<Steps>
+
+<Step number={1} title="Buat Proyek">
 
 Mulailah dengan membuat proyek TanStack Start baru dengan mengikuti panduan [Memulai proyek baru](https://tanstack.com/start/latest/docs/framework/react/quick-start) di situs web TanStack Start.
 
-### Langkah 2: Pasang Paket Intlayer
+</Step>
+
+<Step number={2} title="Pasang Paket Intlayer">
 
 Pasang paket yang diperlukan menggunakan manajer paket pilihan Anda:
 
@@ -144,7 +185,9 @@ bun x intlayer init
 - **vite-intlayer**
   Termasuk plugin Vite untuk mengintegrasikan Intlayer dengan [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), serta middleware untuk mendeteksi locale yang disukai pengguna, mengelola cookie, dan menangani pengalihan URL.
 
-### Langkah 3: Konfigurasi proyek Anda
+</Step>
+
+<Step number={3} title="Konfigurasi proyek Anda">
 
 Buat file konfigurasi untuk mengonfigurasi bahasa aplikasi Anda:
 
@@ -165,7 +208,9 @@ export default config;
 
 > Melalui file konfigurasi ini, Anda dapat mengatur URL yang dilokalkan, pengalihan middleware, nama cookie, lokasi dan ekstensi deklarasi konten Anda, menonaktifkan log Intlayer di konsol, dan banyak lagi. Untuk daftar lengkap parameter yang tersedia, lihat [dokumentasi konfigurasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/configuration.md).
 
-### Langkah 4: Integrasikan Intlayer dalam Konfigurasi Vite Anda
+</Step>
+
+<Step number={4} title="Integrasikan Intlayer dalam Konfigurasi Vite Anda">
 
 Tambahkan plugin intlayer ke dalam konfigurasi Anda:
 
@@ -195,7 +240,9 @@ export default config;
 
 > Plugin Vite `intlayer()` digunakan untuk mengintegrasikan Intlayer dengan Vite. Ini memastikan pembuatan file deklarasi konten dan memantaunya dalam mode pengembangan. Plugin ini mendefinisikan variabel lingkungan Intlayer di dalam aplikasi Vite. Selain itu, ini menyediakan alias untuk mengoptimalkan kinerja.
 
-### Langkah 5: Buat Layout Root
+</Step>
+
+<Step number={5} title="Buat Layout Root">
 
 Konfigurasikan layout root Anda untuk mendukung internasionalisasi dengan menggunakan `useParams` untuk mendeteksi locale saat ini dan mengatur atribut `lang` dan `dir` pada tag `html`.
 
@@ -255,7 +302,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
-### Langkah 6: Buat Layout Locale
+</Step>
+
+<Step number={6} title="Buat Layout Locale">
 
 Buat layout yang menangani awalan locale dan melakukan validasi.
 
@@ -287,7 +336,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > Untuk mode `'prefix-all'`, Anda mungkin lebih suka mengganti slot menjadi `$locale` sebagai gantinya.
 > Untuk mode `'no-prefix'` atau `'search-params'`, Anda dapat menghapus slot sepenuhnya.
 
-### Langkah 7: Deklarasikan Konten Anda
+</Step>
+
+<Step number={7} title="Deklarasikan Konten Anda">
 
 Buat dan kelola deklarasi konten Anda untuk menyimpan terjemahan:
 
@@ -333,7 +384,9 @@ export default appContent;
 
 > Untuk detail lebih lanjut, lihat [dokumentasi deklarasi konten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/content_file.md).
 
-### Langkah 8: Buat Komponen dan Hook yang Menyadari Locale
+</Step>
+
+<Step number={8} title="Buat Komponen dan Hook yang Menyadari Locale">
 
 Buat komponen `LocalizedLink` untuk navigasi yang menyadari locale:
 
@@ -437,7 +490,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Langkah 9: Manfaatkan Intlayer di Halaman Anda
+</Step>
+
+<Step number={9} title="Manfaatkan Intlayer di Halaman Anda">
 
 Akses kamus konten Anda di seluruh aplikasi Anda:
 
@@ -485,7 +540,9 @@ function RouteComponent() {
 
 > Untuk mempelajari lebih lanjut tentang hook `useIntlayer`, lihat [dokumentasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/packages/react-intlayer/useIntlayer.md).
 
-### Langkah 10: Buat Komponen Locale Switcher
+</Step>
+
+<Step number={10} title="Buat Komponen Locale Switcher">
 
 Buat komponen untuk memungkinkan pengguna mengganti bahasa:
 
@@ -546,7 +603,9 @@ export const LocaleSwitcher: FC = () => {
 
 > Untuk mempelajari lebih lanjut tentang hook `useLocale`, lihat [dokumentasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/packages/react-intlayer/useLocale.md).
 
-### Langkah 11: Manajemen Atribut HTML
+</Step>
+
+<Step number={11} title="Manajemen Atribut HTML">
 
 Seperti yang terlihat pada Langkah 5, Anda dapat mengelola atribut `lang` dan `dir` dari tag `html` menggunakan `useParams` di komponen root Anda. Ini memastikan bahwa atribut yang benar diatur pada server dan klien.
 
@@ -565,7 +624,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 
 ---
 
-### Langkah 12: Tambahkan middleware (Opsional)
+</Step>
+
+<Step number={12} title="Tambahkan middleware">
 
 Anda juga dapat menggunakan `intlayerProxy` untuk menambahkan routing sisi server ke aplikasi Anda. Plugin ini akan secara otomatis mendeteksi locale saat ini berdasarkan URL dan mengatur cookie locale yang sesuai. Jika tidak ada locale yang ditentukan, plugin akan menentukan locale yang paling sesuai berdasarkan preferensi bahasa browser pengguna. Jika tidak ada locale yang terdeteksi, itu akan dialihkan ke locale default.
 
@@ -596,7 +657,9 @@ export default defineConfig({
 
 ---
 
-### Langkah 13: Internasionalisasi Metadata Anda (Opsional)
+</Step>
+
+<Step number={13} title="Internasionalisasi Metadata Anda">
 
 Anda juga dapat menggunakan hook `getIntlayer` untuk mengakses kamus konten Anda di seluruh aplikasi Anda:
 
@@ -643,7 +706,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Langkah 14: Ambil locale dalam server actions Anda (Opsional)
+</Step>
+
+<Step number={14} title="Ambil locale dalam server actions Anda">
 
 Anda mungkin ingin mengakses locale saat ini dari dalam server actions atau endpoint API Anda.
 Anda dapat melakukannya menggunakan pembantu `getLocale` dari `intlayer`.
@@ -680,7 +745,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Langkah 15: Kelola halaman tidak ditemukan (Opsional)
+</Step>
+
+<Step number={15} title="Kelola halaman tidak ditemukan">
 
 Ketika seorang pengguna mengunjungi halaman yang tidak ada, Anda dapat menampilkan halaman tidak ditemukan yang disesuaikan dan awalan locale dapat mempengaruhi cara halaman tidak ditemukan dipicu.
 
@@ -756,7 +823,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 
 ---
 
-### Langkah 16: Konfigurasi TypeScript (Opsional)
+</Step>
+
+<Step number={16} title="Konfigurasi TypeScript">
 
 Intlayer menggunakan augmentasi modul untuk mendapatkan manfaat TypeScript dan membuat basis kode Anda lebih kuat.
 
@@ -774,7 +843,9 @@ Pastikan konfigurasi TypeScript Anda menyertakan tipe yang dihasilkan secara oto
 
 ---
 
-### (Opsional) Langkah 1 : Ekstrak konten komponen Anda
+</Step>
+
+<Step number={1} title="Ekstrak konten komponen Anda" isOptional={true}>
 
 Jika Anda memiliki basis kode yang ada, mengubah ribuan file bisa memakan waktu lama.
 
@@ -872,6 +943,10 @@ bun run build # Or bun run dev
 
 ---
 
+</Step>
+
+</Steps>
+
 ### Konfigurasi Git
 
 Disarankan untuk mengabaikan file yang dihasilkan oleh Intlayer. Ini memungkinkan Anda menghindari melakukan commit ke repositori Git Anda.