Next.js Discord

Discord Forum

How to disable middleware for all prefetches?

Unanswered
Joho posted this in #help-forum
Open in Discord
Whats my problem?
I am using middleware to send information about a client request (a page visit) to an analytics tool (in this case Tinybird).
Whenever a user visits a page which includes the <Link> component to link to other pages of the same website those routes get *prefetched. *
On every prefetch the middleware is called. This is not what I want❗

User Story
As a NextJS developer utilizing middleware I would like to be able to differentiate app-prefetches from actual user-initiated requests so that I don't need to deal with unnecessary middleware calls.

The following properties seem deprecated:
- purpose: prefetch
- x-middleware-prefetch: 1
- x-nextjs-data: 1

=> What other options do I have❓

What have I tried?
I tried finding some specific user-agent or header properties in the req object to at least return the middleware early and not call any further service. However without success.

2 Replies

Create a new component that wraps <Link prefetch={ false } />
Brown bear
@Joho see my PR. There's a config option for that, but it was hidden/missing in the docs: https://github.com/vercel/next.js/pull/56799