NextJS переписывает параметры строки запроса с подстановочными знаками

Question

У меня небольшая проблема: я пытаюсь настроить перезапись в NextJS, которая автоматически отправит строку запроса в пункт назначения. Однако я могу найти только примеры с именованными параметрами. В этом случае может быть любое количество параметров, поэтому мне нужен способ создания подстановочного знака (я предполагаю, что это будет возможно?)

Я хочу сделать следующее:

      /results?param1=a&param2=b... => https://www.somedomain.com/results?param1=a&param2=b...
or
/results?house=red&car=blue&money=none => https://www.somedomain.com/results??house=red&car=blue&money=none

      rewrites() {
    return [ 
      {
        source:'/results?:params*',
        destination:'https://www.somedomain.com/results?:params*'
      },

Конечно, это не работает, поэтому я заглянул в has но я не могу разобраться, как заставить его работать без параметров имен

             {
          source: '/some-page',
          destination: '/somewhere-else',
          has: [{ type: 'query', key: 'overrideMe' }],
        },

Answer 1

По умолчанию перезапись будет проходить через любые параметры запроса, которые может иметь исходный URL.

В вашем случае вы можете просто использовать следующее правило перезаписи. Все параметры запроса будут перенаправлены через целевой URL.

      rewrites() {
  return [ 
    { 
      source: '/results', 
      destination: 'https://www.somedomain.com/results' 
    }
  ]
}

Answer 2

Чтобы добиться такого поведения, вам нужно зафиксировать значение параметра запроса следующим образом:

      rewrites() {
  return [
    {
      source: "/some-page",
      has: [{ type: "query", key: "override_me", value: "(?<override>.*)" }],
      destination: "/somewhere-else?override_me=:override",
    },
  ];
}

Answer 3

Вы можете использовать стандартную страницу, как показано ниже. Что я сделал, так это когда маршрутизатор инициализирован в useEffectловушка, он получает запрос (объект), а затем использует функцию, чтобы превратить его обратно в закодированную строку URL, затем использовал routerперенаправить на другую страницу

      // /pages/some-page.jsx
import { useRouter } from 'next/router'
import { useEffect } from 'react'

const objectToQueryString = (initialObj) => {
    const reducer = (obj, parentPrefix = null) => (prev, key) => {
        const val = obj[key];
        key = encodeURIComponent(key);
        const prefix = parentPrefix ? `${parentPrefix}[${key}]` : key;

        if (val == null || typeof val === 'function') {
            prev.push(`${prefix}=`);
            return prev;
        }

        if (['number', 'boolean', 'string'].includes(typeof val)) {
            prev.push(`${prefix}=${encodeURIComponent(val)}`);
            return prev;
        }

        prev.push(Object.keys(val).reduce(reducer(val, prefix), []).join('&'));
        return prev;
    };

    return Object.keys(initialObj).reduce(reducer(initialObj), []).join('&');
};

const Results = () => {
    const router = useRouter()

    useEffect(() => {
        const query = router.query
        router.replace(`https://www.somedomain.com/results?${objectToQueryString(query)}`)
    }, [router])

    return <></>

}
export default Results

я использовал objectToQueryStringна основе кодирования строки запроса объекта Javascript