@intlayer/docs 7.0.7 → 7.0.8-canary.0

package/frequent_questions/id/customized_locale_list.md

@@ -0,0 +1,64 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Bagaimana cara menyesuaikan daftar locale?
+description: Pelajari cara menyesuaikan daftar locale.
+keywords:
+  - locales
+  - daftar
+  - intlayer
+  - konfigurasi
+  - availableLocales
+  - defaultLocale
+  - useLocale
+  - hook
+  - locale
+  - daftar
+slugs:
+  - frequent-questions
+  - customized-locale-list
+---
+
+# Apakah mungkin untuk memblokir tipe bahasa, seperti Bahasa Inggris? Saya menambahkan bahasa Inggris dalam kamus saya tetapi saya belum ingin bahasa Inggris tersedia di situs web
+
+Ya, Anda dapat memblokir tipe bahasa, seperti Bahasa Inggris, dengan menggunakan opsi `availableLocales` dalam konfigurasi Intlayer.
+
+```ts
+import { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  locales: [Locales.FRENCH, Locales.SPANISH, Locales.ENGLISH],
+  availableLocales: [Locales.FRENCH, Locales.SPANISH],
+  defaultLocale: Locales.FRENCH,
+};
+```
+
+atau
+
+```ts
+import { IntlayerConfig } from "intlayer";
+
+const locales = [Locales.FRENCH, Locales.SPANISH, Locales.ENGLISH];
+
+const config: IntlayerConfig = {
+  locales,
+  availableLocales: locales.filter((locale) => locale !== Locales.ENGLISH),
+  defaultLocale: Locales.FRENCH,
+};
+```
+
+Konfigurasi ini akan mengubah tipe fungsi `t()` Anda sehingga hanya mencakup locale yang tersedia.
+
+Available locales bersifat opsional, jika Anda tidak menyediakannya, semua locale akan tersedia.
+
+Berhati-hatilah, semua locale yang termasuk dalam opsi `availableLocales` harus juga termasuk dalam opsi `locales`.
+
+Perlu dicatat bahwa jika Anda menggunakan hook `useLocale`, opsi `availableLocales` akan digunakan untuk mengatur akses ke daftar locale.
+
+```ts
+import { useLocale } from "intlayer";
+
+const { availableLocales } = useLocale();
+
+console.log(availableLocales); // [Locales.FRENCH, Locales.SPANISH]
+```

package/frequent_questions/id/domain_routing.md

@@ -0,0 +1,113 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Cara mengonfigurasi routing berbasis domain?
+description: Pelajari cara mengonfigurasi routing berbasis domain.
+keywords:
+  - domain
+  - routing
+  - intlayer
+  - konfigurasi
+  - middleware
+  - react-router
+  - vue-router
+  - next.js
+  - vite
+  - framework
+slugs:
+  - frequent-questions
+  - domain-routing
+---
+
+# Bagaimana cara mengonfigurasi **routing berbasis domain** dengan Intlayer daripada menggunakan path `/[locale]/`?
+
+## Jawaban singkat
+
+Routing berbasis domain lebih sederhana daripada routing berbasis path (`example.com/[locale]/`) karena Anda dapat melewati semua konfigurasi middleware dan routing. Cukup deploy aplikasi Anda ke setiap domain bahasa dan atur satu variabel lingkungan per domain.
+
+## Langkah demi langkah
+
+1. **Deploy sekali untuk setiap domain** (`example.com`, `exemple.fr`, `ejemplo.es`, …).
+2. Untuk setiap deployment, atur `LOCALE` (dan variabel lingkungan Intlayer yang biasa) ke locale yang harus dilayani oleh domain tersebut.
+3. Referensikan variabel tersebut sebagai `defaultLocale` di `intlayer.config.[ts|js]` Anda.
+
+```ts
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: process.env.LOCALE, // 👈 domain menentukan locale
+  },
+  // ... sisa konfigurasi Anda
+};
+
+export default config;
+```
+
+Itu saja—cara kerjanya sama untuk **Next.js**, **Vite + React**, **Vite + Vue**, dll.
+
+## Bagaimana jika setiap domain mengarah ke deployment **yang sama**?
+
+Jika semua domain mengarah ke bundle aplikasi yang sama, Anda perlu mendeteksi host saat runtime dan mengoper locale secara manual melalui provider.
+
+### Untuk Next.js
+
+```tsx
+// src/IntlayerProvider.tsx
+import {
+  IntlayerClientProvider,
+  type IntlayerClientProviderProps,
+} from "next-intlayer";
+import { IntlayerServerProvider } from "next-intlayer/server";
+import type { FC } from "react";
+
+export const IntlayerProvider: FC<IntlayerClientProviderProps> = ({
+  children,
+  locale,
+}) => {
+  const resolvedLocale = locale ?? getLocaleFromHostname(); // 👈 dapatkan locale dari hostname jika locale tidak diberikan
+  return (
+    <IntlayerServerProvider locale={resolvedLocale}>
+      <IntlayerClientProvider locale={resolvedLocale}>
+        {children}
+      </IntlayerClientProvider>
+    </IntlayerServerProvider>
+  );
+};
+```
+
+### Untuk Vue
+
+```ts
+import { createApp } from "vue";
+import { installIntlayer } from "vue-intlayer";
+import App from "./App.vue";
+import { router } from "./routes";
+
+const app = createApp(App);
+app.use(router);
+installIntlayer(app, getLocaleFromHostname()); // 👈 pasang Intlayer dengan locale dari hostname
+app.mount("#app");
+```
+
+Ganti `getLocaleFromHostname()` dengan logika pencarian Anda sendiri.
+
+## Perbarui pengalih locale Anda
+
+Saat menggunakan routing berbasis domain, mengganti bahasa berarti menavigasi ke domain lain:
+
+```ts
+const { locale } = useLocale();
+
+function changeLanguage(target: Locale) {
+  window.location.href = domainForLocale[target]; // 👈 navigasi ke domain sesuai locale target
+}
+```
+
+## Manfaat routing berbasis domain
+
+1. **Konfigurasi lebih sederhana**: Tidak perlu mengonfigurasi `intlayerMiddleware`, `generateStaticParams`, `react-router`, atau `vue-router`
+2. **SEO yang lebih baik**: Setiap bahasa memiliki domainnya sendiri
+3. **URL yang lebih bersih**: Tidak ada prefix locale di jalur
+4. **Pemeliharaan yang lebih mudah**: Setiap deployment bahasa bersifat independen

package/frequent_questions/id/esbuild_error.md

@@ -0,0 +1,29 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Kesalahan ESBuild
+description: Pelajari cara memperbaiki kesalahan ESBuild.
+keywords:
+  - esbuild
+  - error
+  - intlayer
+  - plugin
+  - framework
+  - next.js
+  - vite
+  - react-native
+  - lynx
+slugs:
+  - frequent-questions
+  - esbuild-error
+---
+
+# Kesalahan ESBuild
+
+Jika Anda mengalami kesalahan ESBuild selama proses build, kemungkinan plugin Intlayer belum dikonfigurasi dengan benar.
+
+ESBuild bertanggung jawab untuk membaca file deklarasi konten (`.content.{ts,js,mjs,cjs,json}`) dan menghasilkan kamus yang sesuai di folder `.intlayer/dictionary`. Selain itu juga membaca file konfigurasi (`intlayer.config.ts`).
+
+Intlayer menyediakan plugin untuk integrasi dengan bundler Anda. Plugin ini dirancang untuk mengalias komponen yang hanya dimaksudkan untuk dijalankan di sisi server.
+
+Jika Anda menggunakan framework seperti Next.js (Webpack / Turbopack), Vite, atau React Native, Lynx, dll. Intlayer menyediakan plugin yang dapat Anda gunakan untuk mengintegrasikan Intlayer ke dalam aplikasi Anda. Jadi, lihat dokumentasi spesifik dari framework Anda untuk mempelajari cara mengintegrasikan plugin tersebut.

package/frequent_questions/id/get_locale_cookie.md

@@ -0,0 +1,142 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Cara mengambil locale dari cookies / headers?
+description: Pelajari cara mengambil locale dari cookies / headers.
+keywords:
+  - cookie
+  - headers
+  - intlayer
+  - locale
+  - hook
+  - useLocale
+  - useLocaleCookie
+  - next.js
+  - react-intlayer
+  - vue-intlayer
+slugs:
+  - frequent-questions
+  - get-locale-cookie
+---
+
+# Cara mengambil locale dari cookies / headers
+
+## Menggunakan Hooks (Direkomendasikan)
+
+Untuk sebagian besar kasus penggunaan, disarankan untuk mengambil locale saat ini menggunakan hook `useLocale` karena ini otomatis ter-resolve. Ini bekerja serupa dengan composable `useLocale` di Vue.js.
+
+```ts
+import { useLocale } from "next-intlayer";
+// or import { useLocale } from "react-intlayer";
+// or import { useLocale } from "vue-intlayer";
+
+// Penggunaan di sisi klien
+const { locale } = useLocale();
+```
+
+Untuk komponen server, Anda dapat mengimpornya dari:
+
+```tsx
+import { useLocale } from "next-intlayer/server";
+
+const Test = () => {
+  const { locale } = useLocale();
+  return <>{locale}</>;
+};
+
+const Page = async ({ params }) => {
+  const { locale } = await params;
+
+  return (
+    <IntlayerServerProvider locale={locale}>
+      <Test />
+    </IntlayerServerProvider>
+  );
+};
+```
+
+Ada juga hook `useLocaleCookie` yang hanya mengambil nilai cookie.
+
+## Konfigurasi Cookie Manual
+
+Anda dapat mendeklarasikan nama cookie kustom sebagai
+
+```ts
+import { type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  middleware: {
+    cookieName: "myCustomLocaleCookie", // default adalah 'intlayer-locale'
+  },
+};
+
+export default config;
+```
+
+kemudian mengambilnya sebagai
+
+### Sisi Klien
+
+```ts
+// Menggunakan nama cookie default
+const locale = document.cookie
+  .split("; ")
+  .find((row) => row.startsWith("intlayer-locale="))
+  ?.split("=")[1];
+
+// Menggunakan nama cookie kustom
+const locale = document.cookie
+  .split("; ")
+  .find((row) => row.startsWith("myCustomLocaleCookie="))
+  ?.split("=")[1];
+```
+
+### Sisi Server (Next.js)
+
+```ts
+import { cookies } from "next/headers";
+
+// Menggunakan nama cookie default
+const locale = cookies().get("intlayer-locale")?.value;
+
+// Menggunakan nama cookie kustom
+const locale = cookies().get("myCustomLocaleCookie")?.value;
+```
+
+### Jika locale belum disetel
+
+Locale disetel sebagai cookie hanya setelah pengguna secara eksplisit memilih locale. Secara default, untuk pengunjung baru, locale diinterpretasikan dari field headers.
+
+Anda dapat mendeteksi locale yang disukai pengguna dari headers permintaan. Berikut adalah contoh cara menanganinya:
+
+```ts
+/**
+ * Mendeteksi locale dari headers permintaan
+ *
+ * Header accept-language adalah yang paling penting untuk deteksi locale.
+ * Header ini berisi daftar kode bahasa dengan nilai kualitas (q-values) yang menunjukkan
+ * bahasa yang disukai pengguna berdasarkan urutan preferensi.
+ *
+ * Contoh: "en-US,en;q=0.9,fr;q=0.8,es;q=0.7"
+ * - en-US adalah bahasa utama (q=1.0 diasumsikan)
+ * - en adalah pilihan kedua (q=0.9)
+ * - fr adalah pilihan ketiga (q=0.8)
+ * - es adalah pilihan keempat (q=0.7)
+ */
+import { localeDetector } from "@intlayer/core";
+
+/**
+ * Contoh header negosiator yang biasanya dikirim oleh browser
+ * Header ini membantu menentukan bahasa yang disukai pengguna
+ */
+const exampleNegotiatorHeaders: Record<string, string> = {
+  "accept-language": "en-US,en;q=0.9,fr;q=0.8,es;q=0.7",
+  "accept":
+    "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",
+  "user-agent":
+    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36",
+};
+
+// Contoh penggunaan:
+const detectedLocale = localeDetector(exampleNegotiatorHeaders);
+```

package/frequent_questions/id/intlayer_command_undefined.md

@@ -0,0 +1,155 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Perintah Intlayer tidak terdefinisi
+description: Pelajari cara memperbaiki error perintah intlayer tidak terdefinisi.
+keywords:
+  - intlayer
+  - perintah
+  - tidak terdefinisi
+  - error
+  - vscode
+  - ekstensi
+  - plugin
+  - framework
+  - next.js
+  - vite
+slugs:
+  - frequent-questions
+  - intlayer-command-undefined
+---
+
+# Perintah Intlayer tidak terdefinisi
+
+## Ikhtisar
+
+CLI Intlayer menyediakan cara yang nyaman untuk mengontrol konten intlayer Anda, termasuk membangun kamus, mendorong terjemahan, dan lainnya. Namun, ini tidak esensial agar proyek Anda dapat berjalan. Jika Anda menggunakan plugin bundler (seperti `withIntlayer()` untuk Next.js atau `intlayer()` untuk Vite), Intlayer akan secara otomatis membangun kamus selama proses build aplikasi atau saat server pengembangan dimulai. Dalam mode pengembangan, ia juga akan memantau perubahan dan membangun ulang file deklarasi konten secara otomatis.
+
+Anda dapat mengakses perintah intlayer dengan berbagai cara:
+
+- Menggunakan perintah CLI `intlayer` secara langsung
+- Menggunakan [ekstensi VSCode](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/vs_code_extension.md)
+- Menggunakan SDK `@intlayer/cli`
+
+## Masalah
+
+Saat mencoba menggunakan perintah `intlayer`, Anda mungkin menemui kesalahan ini:
+
+```bash
+'intlayer' tidak dikenali sebagai perintah internal atau eksternal,
+program yang dapat dijalankan atau file batch.
+```
+
+## Solusi
+
+Coba solusi berikut secara berurutan:
+
+1. **Verifikasi bahwa perintah sudah terpasang**
+
+```bash
+npx intlayer -h
+```
+
+Output yang diharapkan:
+
+```bash
+Usage: intlayer [options] [command]
+
+Intlayer CLI
+
+Options:
+    -V, --version            menampilkan nomor versi
+    -h, --help               menampilkan bantuan untuk perintah
+
+Commands:
+    dictionary|dictionaries  Operasi kamus
+    configuration|config     Operasi konfigurasi
+    help [command]           menampilkan bantuan untuk perintah
+```
+
+2. **Pasang paket intlayer-cli secara global**
+
+```bash
+npm install intlayer-cli -g -g
+```
+
+> Seharusnya tidak perlu jika Anda sudah menginstal paket `intlayer`
+
+3. **Pasang paket secara global**
+
+```bash
+npm install intlayer -g
+```
+
+4. **Restart terminal Anda**  
+   Kadang-kadang perlu me-restart terminal agar perintah baru dikenali.
+
+5. **Bersihkan dan pasang ulang**  
+   Jika solusi di atas tidak berhasil:
+
+```bash
+rm -rf node_modules package-lock.json
+npm install
+```
+
+6. **Verifikasi file instalasi**  
+   Jika masalah masih berlanjut, periksa apakah file-file ini ada:
+   - `node_modules/intlayer/dist/cjs/cli.cjs`
+   - `node_modules/intlayer/package.json` (harus memiliki field `bin` yang merujuk ke `./dist/cjs/cli.cjs`)
+
+7. **Periksa variabel lingkungan PATH**  
+   Pastikan direktori bin global npm ada di PATH Anda:
+
+```bash
+# Untuk sistem berbasis Unix (macOS/Linux)
+echo $PATH
+# Seharusnya termasuk sesuatu seperti /usr/local/bin atau ~/.npm-global/bin
+
+# Untuk Windows
+echo %PATH%
+# Seharusnya termasuk direktori bin global npm
+```
+
+8. **Gunakan npx dengan path lengkap**  
+   Jika perintah masih tidak ditemukan, coba gunakan npx dengan path lengkap:
+
+```bash
+npx ./node_modules/intlayer/ dictionaries build
+```
+
+9. **Periksa instalasi yang bertentangan**
+
+```bash
+# Daftar semua paket yang terpasang secara global
+npm list -g --depth=0
+
+# Hapus instalasi global yang bertentangan
+npm uninstall -g intlayer
+npm uninstall -g intlayer-cli
+# Kemudian pasang ulang
+npm install -g intlayer
+```
+
+10. **Verifikasi versi Node.js dan npm**  
+    Pastikan Anda menggunakan versi yang kompatibel:
+
+```bash
+node --version
+npm --version
+```
+
+    Jika Anda menggunakan versi yang sudah usang, pertimbangkan untuk memperbarui Node.js dan npm.
+
+11. **Periksa masalah izin**  
+    Jika Anda mendapatkan kesalahan izin:
+
+    ```bash
+    # Untuk sistem berbasis Unix
+    sudo npm install -g intlayer
+
+    # Atau ubah direktori default npm
+    mkdir ~/.npm-global
+    npm config set prefix '~/.npm-global'
+    # Tambahkan ke ~/.profile atau ~/.bashrc Anda:
+    export PATH=~/.npm-global/bin:$PATH
+    ```

package/frequent_questions/id/locale_incorect_in_url.md

@@ -0,0 +1,73 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Locale yang Salah Diambil dari URL
+description: Pelajari cara memperbaiki locale yang salah diambil dari URL.
+keywords:
+  - locale
+  - url
+  - intlayer
+  - next.js
+  - vite
+  - framework
+  - middleware
+  - configuration
+  - prefixDefault
+  - noPrefix
+slugs:
+  - frequent-questions
+  - locale-incorect-in-url
+---
+
+# Locale yang Salah Diambil dari URL
+
+## Deskripsi Masalah
+
+Saat mencoba mengakses parameter locale dari URL, Anda mungkin mengalami masalah di mana nilai locale yang didapatkan salah:
+
+```js
+const { locale } = await params;
+console.log(locale); // mengembalikan "about" alih-alih locale yang diharapkan
+```
+
+## Solusi
+
+### 1. Verifikasi Struktur File
+
+Pastikan path router aplikasi Next.js Anda mengikuti struktur ini:
+
+```bash
+src/app/[locale]/about/page.tsx
+```
+
+### 2. Periksa Konfigurasi Middleware
+
+Masalah ini sering terjadi ketika middleware tidak ada atau tidak dijalankan. File middleware harus berada di:
+
+```bash
+src/middleware.ts
+```
+
+Middleware ini bertanggung jawab untuk menulis ulang rute ketika `prefixDefault` disetel ke `false`. Misalnya, ia menulis ulang `/en/about` menjadi `/about`.
+
+### 3. Pola URL Berdasarkan Konfigurasi
+
+#### Konfigurasi Default (`prefixDefault: false`, `noPrefix: false`)
+
+- Bahasa Inggris: `/about`
+- Bahasa Prancis: `/fr/about`
+- Bahasa Spanyol: `/es/about`
+
+#### Dengan `prefixDefault: true`
+
+- Bahasa Inggris: `/en/about`
+- Bahasa Prancis: `/fr/about`
+- Bahasa Spanyol: `/es/about`
+
+#### Dengan `noPrefix: true`
+
+- Bahasa Inggris: `/about`
+- Bahasa Prancis: `/about`
+- Bahasa Spanyol: `/about`
+
+Untuk detail lebih lanjut tentang opsi konfigurasi ini, lihat [Dokumentasi Konfigurasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/configuration.md).

package/frequent_questions/id/static_rendering.md

@@ -0,0 +1,44 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Rendering Statis vs Dinamis dengan i18n di Next.js
+description: Pelajari cara menggunakan rendering statis vs dinamis dengan i18n di Next.js.
+keywords:
+  - statis
+  - dinamis
+  - rendering
+  - i18n
+  - next.js
+  - next-intl
+  - intlayer
+  - framework
+  - middleware
+  - konfigurasi
+slugs:
+  - frequent-questions
+  - static-rendering
+---
+
+# Rendering Statis vs Dinamis dengan i18n di Next.js
+
+## Masalah dengan **next-intl**
+
+- **Apa yang terjadi?**
+  Saat Anda menggunakan `useTranslations`, `getTranslations`, atau helper next-intl lainnya _di dalam Server Component_ pada aplikasi dengan routing i18n (`/en/…`, `/fr/…`), Next.js menandai seluruh rute sebagai **dinamis**. ([Next Intl][1])
+
+- **Mengapa?**
+  next-intl mengambil locale saat ini dari header yang hanya tersedia pada request (`x-next-intl-locale`) melalui `headers()`. Karena `headers()` adalah **dynamic API**, setiap komponen yang mengaksesnya kehilangan optimasi statis. ([Next Intl][1], [Next.js][2])
+
+- **Solusi resmi (boilerplate)**
+  1. Ekspor `generateStaticParams` dengan setiap locale yang didukung.
+  2. Panggil `setRequestLocale(locale)` di **setiap** layout/halaman _sebelum_ Anda memanggil `useTranslations`. ([Next Intl][1])
+     Ini menghilangkan ketergantungan pada header, tetapi Anda sekarang memiliki kode tambahan yang harus dipelihara dan API yang tidak stabil di produksi.
+
+## Bagaimana **intlayer** menghindari masalah ini
+
+**Pilihan desain**
+
+1. **Hanya parameter route** – Locale berasal dari segmen URL `[locale]` yang sudah diteruskan Next.js ke setiap halaman.
+2. **Bundle waktu kompilasi** – Terjemahan diimpor sebagai modul ES biasa, sehingga mereka di-tree-shaken dan disematkan pada saat build.
+3. **Tanpa API dinamis** – `useT()` membaca dari konteks React, bukan dari `headers()` atau `cookies()`.
+4. **Tanpa konfigurasi tambahan** – Setelah halaman Anda berada di bawah `app/[locale]/`, Next.js secara otomatis melakukan prerender satu file HTML per locale.

package/frequent_questions/id/translated_path_url.md

@@ -0,0 +1,55 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Bisakah saya menerjemahkan jalur url?
+description: Pelajari cara menerjemahkan jalur url.
+keywords:
+  - array
+  - konten
+  - deklarasi
+  - intlayer
+  - middleware
+  - proxy
+  - rewrite
+  - prefix
+  - locale
+  - url
+slugs:
+  - frequent-questions
+  - translated-path-url
+---
+
+# Apakah mungkin menerjemahkan url seperti berikut:
+
+```bash
+en -> /product (tanpa prefix) atau /en/product (dengan prefix)
+fr -> /fr/produit
+es -> /es/producto
+```
+
+Sayangnya Intlayer tidak mengizinkan menerjemahkan URL seperti yang ditentukan. Untuk mencapai ini, Anda harus menggunakan middleware atau proxy Anda sendiri untuk menulis ulang URL.
+
+Namun Anda dapat menggunakan fungsi `getMultilingualUrl` untuk menyisipkan prefix di url untuk locale tertentu.
+
+```ts
+import { getMultilingualUrl, Locales } from "intlayer";
+
+const url = getMultilingualUrl("/product");
+
+/**
+ * en -> /product (tanpa prefix) atau /en/product (dengan prefix)
+ * fr -> /fr/product
+ * es -> /es/product
+ */
+console.log(url);
+```
+
+Atau `getLocalizedUrl`
+
+```ts
+import { getLocalizedUrl, Locales } from "intlayer";
+
+const url = getLocalizedUrl("/product", Locales.FRENCH);
+
+console.log(url); // /fr/product
+```