Next.js 14 Link Tag Doesn't Prefetch Data - Network Tab Shows Empty {}

Question

I'm currently working with Next.js 14 and encountered an issue where the Link tag does not seem to prefetch data. Specifically, in the network tab of the developer tools, the preview shows {} instead of the expected JSON response. I'm using getServerSideProps and Page routes

I am expecting that the Link tag will prefetch the data and display the JSON data in the network tab. However, with Next.js 14, it doesn't seem to work as expected. The network tab shows an empty preview {} instead of the JSON data.

Has anyone else encountered this issue? Is there a new configuration or a different approach required in Next.js 14 to ensure that the Link tag prefetches JSON data correctly when using getServerSideProps?

Any insights or solutions would be greatly appreciated.

Additional Information:

Next.js version: 14 Node.js version: v18.17.0

Muhammad Junaid Tariq · Accepted Answer · 2024-08-29 10:14:54Z

1

This solution might help you!

The x-middleware-prefetch header is used by Next.js when it prefetches data in the background, typically to optimize page transitions.

By removing the x-middleware-prefetch header, you force Next.js to treat the prefetch request as a normal request, which can resolve this issue

Create a new file in your project root (or wherever your middleware files are located) named middleware.js

// middleware.js
import { NextResponse } from 'next/server';

export async function middleware(request) {
  const requestHeaders = new Headers(request.headers);
  requestHeaders.delete('x-middleware-prefetch');

  return NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  });
}

This middleware will now run for every request in your Next.js application.

answered Aug 29, 2024 at 10:14

Muhammad Junaid Tariq

1193 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Waquar Mahboob · Accepted Answer · 2024-08-29 09:37:24Z

0

Remove x-middleware-prefetch from the Next JS header.

Add this to middleware.jsx file.

    export async function middleware(NextRequest) {
    const requestHeaders = new Headers(NextRequest.headers);
    requestHeaders.delete('x-middleware-prefetch');
    const response = NextResponse.next({
        request: {
            headers: requestHeaders,
        },
    });
    return response;}

answered Aug 29, 2024 at 9:37

Waquar Mahboob

211 silver badge2 bronze badges

Comments

Pedro Dias · Accepted Answer · 2024-08-12 15:21:58Z

-1

I'm having the same issue.

The strange part is that be removing the header x-middleware-prefetch it's able to get the json, but after clicking the Link component, the page does not load (stays blank).

answered Aug 12, 2024 at 15:21

Pedro Dias

293 bronze badges

Collectives™ on Stack Overflow

Next.js 14 Link Tag Doesn't Prefetch Data - Network Tab Shows Empty {}

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related