Локализованные перезаписи NextJs с параметрами запроса перезагружают браузер и выкидывают ошибку при загрузке скрипта

Question

Я столкнулся с проблемой при использовании перезаписи и параметров запроса. Я опишу это ниже. Если я потерял вас в какой-то момент во время объяснения, не стесняйтесь попросить разъяснений.

---

Ожидаемый результат

Я пытаюсь локализовать следующую / ссылку и передать параметр запроса для заполнения динамической части URL-адреса.

---

Установка

Моя установка разделена на несколько файлов, pathnames.jsкоторый содержит все пути и переводы. (Не будет отображать весь файл только необходимые части)

      // The predefined consts for the pathnames
export const pathnames = {
  STOREFINDER: 'stores',
  STOREFINDER_DETAIL: '/stores/[id]',
};

// The localized part of the pathnames
export const localizedPathnames = {
  // This works
  [pathnames.STOREFINDER]: {
    nl: '/winkels',
    fr: '/magasins',
  },
  // This works half (further explanation below)
  [pathnames.STOREFINDER_DETAIL]: {
    nl: '/winkels/[id]',
    fr: '/magasins/[id]',
  },
};

А потом next.config.jsгде я определяю перезаписи. (Не будет отображать весь файл только необходимые части)

      async rewrites() {
  return [{
      source: '/winkels',
      destination: '/stores',
   },
   {
      source: '/magasins',
      destination: '/stores',
   },
   {
      source: '/winkels/:id',
      destination: '/stores/:id',
   },
   {
      source: '/magasins/:id',
      destination: '/stores/:id',
   },  
]}

Вот как я делаю локализованную ссылку

      
<Link
    href={getLocalizedRoute(pathnames.STOREFINDER_DETAIL, locale, {
        query: { id: name },
    })}
    passHref
>
    <Button className="store-info-card-cta" color="secondary">
        {formatMessage({ id: 'store_finder_search_result_details' })}
    </Button>
</Link>

Пример возврата getLocalizedRoute функция

      {
  "pathname": "/nl/winkels/[id]",
  "query": {
    "id": "lommel"
  }
}

---

Текущий результат

Хорошо, это установка.

1. Теперь всякий раз, когда вы нажимаете на ссылку, сначала выдается ошибка, которую вы можете увидеть на скриншоте ниже.

2. Затем он начнет «перезагружать» браузер и без проблем продолжит маршрутизацию по правильному пути.

3. В производственной среде это работает без ошибок, но вы все равно видите перезагрузку браузера, что не идеально.

4. Единственное, что работает, - это маршрутизация без перезаписи и локализации и просто маршрутизация на i.e.: /shops/lommel. Что опять же не идеально, поскольку клиент полагается на локализованные URL-адреса.

      <Link
    href={{
        pathname: `/${locale}/stores/[id]`,
        query: { id: name },
    }}
    passHref
>
    <Button className="store-info-card-cta" color="secondary">
        {formatMessage({ id: 'store_finder_search_result_details' })}
    </Button>
</Link>