<Link/> sometime stop working with app router in production

[hiiamwin]

I am till learning nextjs.
I was hoping to get a bit of insight into a bug I'm experiencing with my nextjs application. Every once and a while all the links on my page seem to stop working.

If I hover over the links I can see the expected page in the bottom left of my browser but clicking doesn't navigate to the page and the url doesn't change too. After a refresh or wait a short period of time , the links usually start working again but it definitely a huge hit to usability for the average user.

Has anyone experienced a similar issue/ have any insight as to what might be causing this to occur?

Any help is greatly appreciated :)

[vignesh-gupta]

Hey @hiiamwin, Could please attach some video or a reproducing steps with the piece of code that would be helpful. Apart from that, if you are using next/link then potential reason could be that your navigated page is having a expensive (time taking) process like DB or API fetching.

To identify this-

1. Try adding a loading.tsx page along side your page.tsx
2. If not the page then try covering the component with Suspence Component to load it faster.

Here is a good news for you - Yesterday Next 14 has been launched with a game changing feature Partial Prerendering (Preview) that should help in this.

Hope it help. Happy Coding!

[hiiamwin]

thanks sir

[vignesh-gupta]

Hey @hiiamwin if the answer works for you, Please mark as answered so that if someone else tries to find similar they can refer to this.

[ako-v]

I am using Next v14.2.5, I had the same issue, that once in a while all the links would stop working! using prefetch false did not work, but this solution worked for me. Thanks.

[aziyatali]

It's due to the caching. You can check the this for details.

Or you can watch this video to understand it better

There are several work-arounds, so you can try them by searching for your needs.

What we have done was trying not to use Link as it is caching the request.
One way could be switching to a tag of html.
Others you can use router but it still sucks sometimes. So you better refresh it(router.refresh()) before pushing as refresh seem to refetch the data again by disabling caching.

[hiiamwin]

i try to set prefetch to false and it work

[prasad-pul]

This really helped (after almost 15 hours of head scratching / debugging!!).

I wish Nextjs team provide more clarity / documentation around this. Why did this work??

For anyone interested here is the workflow / navigation steps that I had which broke before setting the prefetch = {false}

1. Navigate to the home page
2. There a bunch of sub-links (through the Nextjs Link component)
3. Clicking on one of the link takes me to the unauthenticated version of that (sub) route
4. After I authenticate the above (authenticated version) route is rendered
5. Now if I navigate to a different link on the home page
6. And click the link from Step 3 , **NOTHING** happens for 30 seconds
7. After 30 seconds, clicking the link from Step 3 works fine

The issue noticed Step 6 was resolved by setting the prefetch = {false} on the links rendered on homepage. I don't know why??

[C-W-D-Harshit]

i have a very complex sidebar and the components change on particular routes, soo you know how complex it it and routing through link tag worked fine in dev mode {using Next: 14.1.3 app} but it dosent work in prod, idk why but setting the prefetch={false} just made it work somehow

[hilkiano]

This setting worked for me. prefetch={false} really fix my issue in production mode. FYI I am using Link component from next-intl v3.

[adrianszablowski]

In my case nothing helped, after clicking <Link href='/' prefetch={false} /> the same thing happens.... The URL does not change and I have a white page (photo below). The URL stays as it was on the previous page.

[JClackett]

Also running into this, except when I click the link, sometimes it just hangs, and now I get a load of rage clicks from users - super strange

[bugproof]

I have the same issue...

Here's my scenario:

<Link href="/dashboard">Dashboard</Link>

inside server component.

Dashboard calls server action, that server action calls fetch to fetch a list from my backend.

Sometimes after page refresh it randomly stops working, hangs... I'm investigating this issue... Perhaps server actions are bugged for initial data fetches?

export default async function DashboardPage() {
    const myPages = await getMyPages(); // server action which calls my  API using fetch

    return <>....</>
    ```

[VichetN]

I have the same senario to @bugproof

Anyone resolve the problem?
I still face this issue in v14.1.10

added prefetch={false} doesn't solve anything

I am using with Authjs v5

[mp3por]

Same here

[Enkratia]

Be carefull with router.refresh(), cookies(), headers() and other things like this. It can force to redownload current page instead of visiting another page via <Link /> or router.push.

[MazenSenih]

I just had the same issue, I'm using Next.js version 14.1.3, all my Link components stopped navigating suddenly, after investigating the console, I found a useEffect dependency that caused infinite loop, fixing that fixed the Link issues, so I suggest you to look closely what other code you recently changed, or any console messages and fixing them.

[HakanSungur]

I have the same problem. It's a terrible situation for Next that this problem hasn't been solved yet. I have the same problem in the dev environment.

[Barre]

I encountered the same navigation issue, which proved to be quite challenging to debug.

In my case, the problem occurred specifically when:

1. Navigating from the problematic page to another page.
2. Using the browser's back button to return.

This sequence would cause the router to completely break, but only in Firefox and only with a production build - it worked as expected in WebKit/Blink-based browsers.

The root cause ended up being that I used an a element instead of a Link in one place.

[VichetN]

@hiiamwin Can you re-open this issue? It still not working in Next v14 and v15

[dreamy32]

Issue is back in newer versions. Fix this ASAP

Edit: Setting prefetch={false} doesn't fix the problem

[dongalor]

Same here. I've tried creating my own link component, that uses useRouter (from next/navigation) and it looks like it's working fine. Also I've created a demo with next 15 (in next 14.2.8 it doesn't) and it seems that it works out of the box (with Link component it fetches everything in server action good), but according to some comments here it's not 🤷‍♂️

const router = useRouter();
onClick -> router.push(href)

P.S. ChatGPT says:

This behavior occurs because the Link component from next/link and useRouter's push method interact with the client-side routing system, which doesn't trigger a full page reload. Consequently, some cookies (like HttpOnly or server-only cookies) that are only accessible on the server won't be re-processed on the client navigation.

[dongalor]

Using prefetch={false} seems to work well. I am testing it now, and it looks good. In the Next.js 15 demo, I had no problems. Unfortunately, I can't update my project to version 15 yet. I wish version 14 had a similar improvement for convenience.

[dreamy32]

What version of Next.js 15 are you on? I am on version 15.0.3 and prefetch={false} didn't change anything.

ps: I am redirecting to a legacy React app, without nextjs support

[dongalor]

"next": "15.0.3"

Also I don't really use prefetch there.

Redirecting to external app might be another case.

Here's my demo I've made for my purposes.

https://github.com/dongalor/next-15-redirect-server-action

[jj2020driver]

In our project we have such utility as Osano, security management tool which block malicious third-party scripts. When initialized, it prevents NextJs v15 with Pages router to function properly with symptoms as described in this thread. Hope this helps someone.

[dreamy32]

Issue has been resolved for my project with v15.1.0

[jijiseong]

Does that mean it was resolved in version 15.1.0?

[kris-terziev]

At least for me upgrading to 15.1.0 did not fix the issue

[dreamy32]

I believe it was a misunderstanding on my part about how Link component works. After rereading the doc, it worked fine as expected.

[svaraborut]

Still present in ^15.1.4.

During development, I have never noticed it, but in production, It seems stable at first but quickly navigating between links will reach a point where a load is skipped and then that link will remain broken for some time.

I'm unfamiliar with Next core, but if I would have to guess: It all seems like a prefetch loading race condition that crashes the <Link> to get then resolved by the next rendering cycle.

We have disabled prefetch for now.

[Barre]

I observed the same, but only on Firefox.

[alexanderbnelson]

Prefetch or no, my link components are regularly breaking in the same way. It's brutal actually. It happens in dev and prod for me. What a mess. running [email protected]

[KishoreVB70]

I have the issue where both Link component and router.push are not working

[bill-zhanxg]

Same issue on [email protected] with reactCompiler and ppr enabled. I think this discussion should be upgraded to Issues.
It seems like when the user navigates via nav bar links and then click a link from the children that changes ONLY the searchParams will disable all links (when click on does nothing other than my progress bar moving: next13-progressbar). Setting all the Links' prefetch (including navBar links) to false does solve the problem but I do not want to set all prefetch to false and it should be at least documented if not a bug.

Also if the user refresh the page without clicking any other link before the searchParam changing Link it will work, and then all Links will work even when navigated from the Nav Bar links. It's a pretty weird bug that will prob need some effort to find the problem. It might be a logic check error or JS event loop problem (unlikely)

[twillhorn]

turning on experimental.clientSegmentCache fixed the ppr issue for me

[gerismumo]

having the same issue with next js 14.2.4

[joelpierre]

Its crazy that this is an issue and claims to have been "answered" yet we are all experiencing the problem still in various ways. prefetch=false doesn't work all the time either but it is noticeably better on occasion.

Refreshing the page solves it, until it hits again. I can see in the network tab that when the link is clicked the page is fetched and data returned but the view just doesn't change.

[dreamy32]

Have you tried deleting the .next folder?

[joelpierre]

Its not a local dev issue. Its the production build. My dev env is fine.

[halilhanbadem]

yes this problem is definitely ongoing and I have no idea how to fix it

[joelpierre]

Solution I've found works. And it's a terrible one in my opinion. Is to set a key on a client component as close to your layout.tsx as possible. I use the pathname specifically but beware what this means from a rerender POV but I think the issue is nothing client side changes in order to trigger a rerender 🤔

[halilhanbadem]

I observed that this issue occurs in places where router.refresh() is used. Therefore, instead of using router.refresh(), I replaced it with the native window.location.reload(); call, and the issue was resolved.

What the user reported was that, on the login screen, even though the credentials were correct, the screen would remain unchanged, and this would happen occasionally. I investigated the issue and saw that the data was being loaded in the background, but the page wasn't refreshing. I then realized that I was using router.refresh() in my auth library. Although router.refresh() is intended to trigger an update after a server-side change, I believe there's a problem in this context.

As a result, the current implementation is working quite well. When I did some research on router.refresh(), I came across the following answer, and I think I made the right choice (though it's debatable): https://stackoverflow.com/a/77663070. It seems like the issue with router.refresh() is either related to the way I'm using it or it's a more general problem. Instead of diving deeper into the specifics of the problem, calling a native refresh is a simpler and effective workaround for now.

[ogheo]

I had same problem in nextjs 15 so for now disabled optimisticClientCache and set staleTimes to 0 like this:

  experimental: {
    optimisticClientCache: false,
    staleTimes: {
      dynamic: 0,
      static: 0,
    },
  },

[thenoobchad]

What file was this placed in?

[joelpierre]

nextjs config file I believe

[Stan-Stani]

Seeing this same problem. Is there a corresponding item in the issues? I'm on "next@npm:14.2.25 btw.

[Stan-Stani]

Our issue was that we set queryParams once our component initializes on a page, so if a user clicked a <Link /> after the router.replace() was called but before it actually updated the url, the users navigation would get effectively cancelled by the replace. This is because Next.Js's app router methods have asynchronous effects even though the methods themselves aren't marked async.

[bolechen]

Hello everyone,

I'd like to share our debugging experience regarding a persistent client-side navigation
issue, which might be related to the problems discussed here.

Problem:

In our Next.js 15.x application (specifically observed on 15.4.0-canary.110), client-side
navigation would break after performing a search on the /all page. Specifically, after
navigating from the homepage to /all (via <Link>) and then executing a search (which
triggers router.replace()), all subsequent client-side navigation links would become
unresponsive. This issue was reproducible only on desktop in production builds.

Initial Misleading Clues (and why they were ruled out):

We extensively debugged various aspects, including:

• Navbar component architecture (SSR/CSR split).
• SWR data fetching configurations (keepPreviousData, revalidateOnMount).
• CSS animations.
• Specific client-side interactive components (e.g., DropdownMenu, ThemeToggle, Drawer).
• All these were ruled out after meticulous, step-by-step elimination.

Actual Root Cause:

The root cause was identified as a conflict with Next.js's Partial Prerendering (PPR)
experimental feature. When PPR was enabled, navigating client-side to a dynamic route
(like /all, which uses searchParams and was later marked export const dynamic = 'force-dynamic') would seemingly corrupt the App Router's internal state. Subsequent
router.replace() calls would then fail silently.

Solution:

1. Disabled PPR: Set ppr: false in next.config.ts.
2. Marked Dynamic Route: Added export const dynamic = 'force-dynamic'; to src/app/( main)/all/page.tsx to correctly declare it as a dynamic route (this also resolved a
   DYNAMIC_SERVER_USAGE error).
3. (Optional but recommended) Downgraded Next.js from a Canary version (15.4.0-canary.110 ) to the latest stable release (15.3.5) to ensure overall stability.

After disabling PPR, the navigation issue was completely resolved. This suggests a deeper
interaction bug within the PPR implementation when combined with client-side navigation to
dynamic routes.

Hope this detailed experience helps others!

[bill-zhanxg]

This is very helpful. Thanks for the time spent debugging

[twillhorn]

Did you try turning on experimental.clientSegmentCache instead of disabling ppr? That worked for me.