Как я могу отправлять данные между двумя страницами в Next.js?

Есть несколько способов сделать это. Можно было бы использовать параметры URL-адреса в <Link> со страницы filter.jsx на test.jsx, например

const filterValue = "some-value";
...
href = {`/whatever/url/test-is-at?filter=${filterValue}`}
...

Тогда вы можете получить это на странице test.jsx через

Следующие 14:

export default function Page() {
    const searchParams = useSearchParams();
    const filterValue = searchParams.filter;  // some-value
...

https://nextjs.org/docs/app/api-reference/functions/use-search-params

Следующие 13:

export default function Page({searchParams}) {
    const filterValue = searchParams.filter;  // some-value
...

https://nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional

Вероятно, значение вашего фильтра находится в состоянии, поэтому, когда ваш вызов API разрешается, вы устанавливаете состояние, и оно обновляет href в вашем Link, но вы, вероятно, уже это знали :)

Добиться этого можно двумя способами:

1. Параметры URL или строки запроса.
2. Маршруты API Next.js для получения данных на стороне сервера.

1. Параметры URL или строки запроса.

В Filter.jsx:

const router = useRouter();

const handleSubmit = async () => {
  const filteredData = await fetchFilteredData();
  router.push({
    pathname: '/test',
    query: { subject: filteredData.subject, grade: filteredData.grade }, // Example query parameters
  });
};

Тест.jsx:

import { useRouter } from 'next/router';

const Test = () => {
  const router = useRouter();
  const { subject, grade } = router.query;

  // Use subject and grade as needed
};

2. Маршруты API Next.js для получения данных на стороне сервера.

В filter.jsx:

const handleNavigate = () => {
  router.push(`/test?id=${filteredDataId}`);
};

Тест.jsx:

export async function getServerSideProps(context) {
  const { id } = context.query;
  const data = await fetchFilteredDataById(id);
  return { props: { data } };
}