Handling API rate limits with Next.js
The hidden experimental setting
Recently, the builds for my site started to fail with the following error message:
Error occurred prerendering page "/writing/dark-mode-toggling-on-macos". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Too Many Requests. Please upgrade or contact sales.
I contacted my CMS, Hygraph, to ask what this was about. They kindly informed me that they recently changed the number of uncached requests one can make to their content API. As a solution, they encouraged me to throttle the requests to keep within the limit.
While Hygraph customer service didn't have an answer on how to throttle requests with Next.js, I found a GitHub discussion comment that helped me to solve the issue. Turns out there's an undocumented, experimental setting in Next.js for disabling multithreading:
// Your Next.js config file (next.config.js)
...
experimental: {
workerThreads: false,
cpus: 1
},
...
This setting will force the build to be single-threaded, which limits the speed at which requests are made within the getStaticProps
. As a result, the build runs slower but completes without errors. Note that while this solution worked for my setup, for larger projects, it might be necessary to build a more robust solution to throttle your requests.
Get in touch
I'm not currently looking for freelancer work, but if you want to have a chat, feel free to contact me.