Хук useRewriteURL

Хук useRewriteURL для Next.js, це клієнтський хук, який автоматично керує локалізованими переписуваннями URL. Він гарантує, що URL у браузері завжди відображає «гарний» локалізований шлях, визначений у вашому intlayer.config.ts, навіть якщо користувач вручну вводить канонічний шлях з префіксом локалі.

Цей хук працює непомітно, використовуючи window.history.replaceState, уникаючи зайвих навігацій через Next.js router або перезавантажень сторінки.

Використання

Просто викличте хук у Client Component, який є частиною вашого layout.

"use client";

import { useRewriteURL } from "next-intlayer";

const MyClientComponent = () => {
  // Автоматично виправляє /fr/privacy-notice на /fr/politique-de-confidentialite в адресному рядку
  useRewriteURL();

  return null;
};

Як це працює

1. Моніторинг шляху: Хук відстежує зміни locale користувача.
2. Виявлення перепису: Він порівнює поточний window.location.pathname з правилами перепису у вашій конфігурації.
3. Виправлення URL: Якщо для поточного шляху знайдено читабельніший локалізований псевдонім, хук викликає window.history.replaceState, щоб оновити адресний рядок, залишаючи користувача на тій же внутрішній сторінці.

Чому використовувати це в Next.js?

Поки intlayerMiddleware обробляє перенаправлення й перезаписи на стороні сервера та початкові редиректи, хук useRewriteURL забезпечує, щоб URL у браузері залишався узгодженим із вашою бажаною SEO-структурою навіть після клієнтських переходів.

• Чисті URL: Забезпечує використання локалізованих сегментів, наприклад /fr/essais замість /fr/tests.
• Продуктивність: Оновлює адресний рядок без запуску повного циклу роутера або повторного отримання даних.
• Відповідність SEO: Запобігає проблемам з дубльованим контентом, гарантуючи, що користувачам і пошуковим ботам доступна лише одна версія URL.