Кирилл

Остановился на варианте, где создаю инстанс XMLHttpRequest в том месте где собираюсь использовать функцию и передаю его параметром. Так у меня есть доступ к instance.abort() где угодно.

В итоге делал по этой статье https://coderethinked.com/how-to-cancel-a-request-..., только создавал метод отмены внутри цикла создания запросов и добавлял эти методы в объект формата { fileID: cancelMethod }, чтобы откуда угодно потом можно было их использовать.

получилось решить. Сначала поправил путь, 404 пропала, но вывод в консоли html остался. В документации next js нашел пример использования rest router api, там после объекта с данными была такая запись:

export default function handler(req, res) {
  res.status(200).json(product)
}

Сам запрос:

export async function getServerSideProps() {
  const res = await fetch(`http://localhost:3000/api/product`)
  const data = await res.json()
  return {
    props: {product} 
  }
}

И все заработало.

Всем спасибо. Очередной пример, что нужно читать документацию, а не доставать глупыми вопросами умных людей.

Использовал зарезервированный плагином класс .js-masonry, из-за этого и была некорректная работа.

Оказывается browsersync не обновляет страницу, если там не указаны теги html и body. А я в about.pug как раз не указал. Всем спасибо за помощь.

Проблему нашел, просто был один и тот же код в 2 местах, и когда я переопределял медиазапросом в 1 месте, стили перебивались другим.