My application allows users to do searches and get suggestions as they type in the search box. For each time that the user enters a character, I use 'fetch' to fetch the suggestions from an API. The thing is that if the user does the search fast, he can get the result before the suggestions are fetched. In this case, I want to cancel the fetch request.

I used to have the same application in React and I could easily cancel the request using AbortController, but that isn't working in Next js.

I did some research and I think the problem is happening because Next doesn't have access to AbortController when it tries to generate the pages.

I also had this problem when I tried to use 'window.innerWidth' because it seems Next doesn't have access to 'window' either.

The solution I found was to use 'useEffect'. It worked perfectly when I used it with 'window'.

const [size, setSize] = useState(0)

useEffect(() => {
   setSize(window.innerWidth)
}, [])

But it isn't working when I use AbortController. First I did it like this:

let suggestionsController;
useEffect(() => {
   suggestionsController  = new AbortController();
},[])

But when I tried to use 'suggestionsController', it would always be undefined.

So I tried to do the same thing using 'useRef'.

const suggestionsControllerRef = useRef(null)
useEffect(() => {
   suggestionsControllerRef.current = new AbortController();
},[])

This is how I'm fetching the suggestions:

async function fetchSuggestions (input){
   try {
      const response = await fetch(`url/${input}`, {signal: suggestionsControllerRef.current.signal})
      const result = await response.json()
      setSuggestionsList(result)
   } catch (e) {
      console.log(e)
   }
}

And this is how I'm aborting the request:

function handleSearch(word) {
    suggestionsControllerRef.current.abort()
    router.push(`/dictionary/${word}`)
    setShowSuggestions(false)
}

Everything works perfectly for the first time. But if the user tries to do another search, 'fetchSuggestions' function stops working and I get this error in the console 'DOMException: Failed to execute 'fetch' on 'Window': The user aborted a request'.

Does anyone know what is the correct way to use AbortController in Next js?