v12.2 up to v12.3.2-canary.22 handleHardNavigation Invariant: attempted to hard navigate to the same URL

[willemliufdmg]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Deployed to Vercel

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 16.13.1
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 12.3.2-canary.22
      eslint-config-next: 12.3.1
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

Not relevant

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

It seems that since Next.js v12.2 the internal router does an extra fetch for the current page.js. This didn't happen in the older versions of Nextjs (see screenshots below). If the current URL is a dynamic route and is rewritten (our case in Middleware) the extra page.js fetch will result in a 404. This causes an attempt to reload the current page which then runs into the handleHardNavigation error Invariant: attempted to hard navigate to the same URL.

Current production Next.js v12.1:

Develop Next.js v12.2:

Expected Behavior

Should just load the page without errors.

Link to reproduction

https://router-3zllgxvkw-fdmediagroep.vercel.app/nieuws

To Reproduce

Minimal reproduction repo: https://github.com/FDMediagroep/router-bug

Next Middleware rewrite rules:

    ...
    {
      source: /^\/nieuws$/,
      destination: '/nieuws/overview/1',
    },
    {
      source: /^\/nieuws\?page=(?<pageNr>\d+)/gi,
      destination: '/nieuws/overview/$<pageNr>',
    },
    ...

Navigating to /nieuws will result in the error as described in the bug description for Next.js since v12.2. But not on the older version v12.1.

[willemliufdmg]

Minimal code example to demo the bug.

GitHub: https://github.com/FDMediagroep/router-bug
Created with: npm init create-app router-bug -- --ts

Demo app deployed on Vercel:
https://router-3zllgxvkw-fdmediagroep.vercel.app/

Fixed since next@12.3.2-canary.25:
https://router-bug.vercel.app/

Navigate to https://router-3zllgxvkw-fdmediagroep.vercel.app/nieuws to see the error in the browser debug console.

[deltasierra96]

Did you have any luck fixing this issue? Currently facing the same thing when handling locales in the middleware. If I remove the middleware file, the 404 returns error free.

[willemliufdmg]

I've even tried with middleware config to exclude all URLs starting with _next

/**
 * Configure which routes should pass through the Middleware.
 * Exclude all `_next` urls.
 */
export const config = {
  matcher: ['/', '/:notunderscore((?!_next).+)'],
};

I see that the config has effect but the error remains.

[Marcelx8]

So far this has worked for me:

if (request.nextUrl.pathname.startsWith('/_next')) {
	return NextResponse.next();
}

[willemliufdmg]

So far this has worked for me:

if (request.nextUrl.pathname.startsWith('/_next')) {
	return NextResponse.next();
}

I've seen your suggestion. However it's not entirely the same problem as I'm experiencing. My problem explicitly occurs when rewriting certain URL's e.g:

/nieuws -> /nieuws/overview/1

/nieuws?page=2 -> /nieuws/overview/2

Upon navigating to /nieuws Next.js will try to fetch nieuws.json which doesn't exist and results in an error like so:

Once deployed to Vercel the errors are only logged to the browser console (but I don't know if anything is functionally broken). During local development this error results in a popup which is annoying as it happens with every hot-module reload/page load.

During local development the error message is a bit more clear:

[snax4a]

In my case I am experiencing this error when I am on 404 page (non existing route) and on that page i try to navigate to the same non existing route using next link.
I am not rewriting any URL and not using middleware

The issue persists on both 12.2.0 and 12.2.1-canary.2

next info:

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:22 PDT 2022; root:xnu-8020.121.3~4/RELEASE_X86_64
    Binaries:
      Node: 16.15.1
      npm: 8.11.0
      Yarn: 1.22.17
      pnpm: 7.1.9
    Relevant packages:
      next: 12.2.1-canary.2
      eslint-config-next: 12.2.0
      react: 18.2.0
      react-dom: 18.2.0

[meotimdihia]

@balazsorban44 Please help check this problem.

[floflock]

I am facing the same issue, only deployed on vercel.

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:37 PDT 2022; root:xnu-8020.121.3~4/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.6.0
      npm: 8.13.2
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 12.2.2
      eslint-config-next: 12.2.2
      react: 18.2.0
      react-dom: 18.2.0

I have a middleware up and running, but I am not sure if this is the initiator.

import { NextRequest, NextResponse } from 'next/server'

const PUBLIC_FILE = /\.(.*)$/

export default function middleware(request: NextRequest) {
  const shouldHandleLocale =
    !PUBLIC_FILE.test(request.nextUrl.pathname) &&
    !request.nextUrl.pathname.includes('/api/') &&
    !request.nextUrl.pathname.includes('/_next/') &&
    request.nextUrl.locale === 'default'

  if (shouldHandleLocale) {
    const url = request.nextUrl.clone()
    url.pathname = `/de-AT${request.nextUrl.pathname}`
    return NextResponse.redirect(url)
  }

  return NextResponse.next()
}

The compiled output shows the file in place: /_next/data/5CfMudfvmgVsF9aMEgIXj/de-AT/p/BE25-roll.json

[bramvdpluijm]

Currently experiencing this issue as well when not using any _middleware.

[vajdagabor]

I am experiencing this issue with empty middleware too, on Next.js v12.2.2, when deployed on Vercel.

Pages on dynamic routes are hard loaded, non-dynamic ones are fine. After navigating to a dynamic path, then back to a non-dynamic path, SWR content is hard fetched, not using the cache.

My middleware.ts file is in the root. Removing the middleware solves the issue, and even an empty middleware makes the problem appear:

export default async function middleware() {}

There are two error messages in the browser's console:

Error: Failed to lookup route: /_next/data/WmofwclRGrKIzLl3u1raO/exercise/beginner-program.json

and:

Unhandled Promise Rejection: Error: Invariant: attempted to hard navigate to the same URL /exercise/beginner-program

Local builds work fine.

[davydog187]

This issue is absolutely destroying my error reporting. Has anyone been able to find a way to suppress the warnings until we find a bugfix?

[willemliufdmg]

This issue is absolutely destroying my error reporting. Has anyone been able to find a way to suppress the warnings until we find a bugfix?

I haven't seen this error message with v12.2.3 anymore. So maybe you can try that version.

[davydog187]

I am still seeing this issue on v12.2.3

$ npm list
├── @heroicons/react@1.0.6
├── @portabletext/react@1.0.6
├── @sanity/client@3.3.2
├── @sanity/image-url@1.0.1
├── @sanity/webhook@1.0.2
├── @sentry/nextjs@7.8.0
├── @tailwindcss/typography@0.5.2
├── autoprefixer@10.4.7
├── classnames@2.3.1
├── eslint-config-next@12.2.3
├── eslint@8.20.0
├── next-sanity@0.6.0
├── next@12.2.3
├── postcss@8.4.14
├── prettier-plugin-tailwindcss@0.1.11
├── prettier@2.7.1
├── react-dom@18.2.0
├── react@18.2.0
└── tailwindcss@3.1.4

You can see the issue in action here

Node: 16.x
Platform: Vercel

I have a single middleware that looks like this

// <project root>/middleware.js

import { NextResponse } from "next/server";

export function middleware(request) {
  // Added from suggestion above
  // UPDATE: I removed this if and it also is still broken
  if (request.nextUrl.pathname.startsWith("/_next")) {
    return NextResponse.next();
  }

  if (request.nextUrl.pathname.startsWith("/tags")) {
    return NextResponse.redirect(new URL("/news", request.url));
  }

  if (request.nextUrl.pathname.startsWith("/category")) {
    return NextResponse.redirect(new URL("/news", request.url));
  }

  if (request.nextUrl.pathname.startsWith("/author/")) {
    return NextResponse.redirect(new URL("/about", request.url));
  }
}

[floflock]

Cannot confirm @willemliufdmg. I've updated my packages and deployed it:
https://kaminholz-vercel-opffmn53w-floflock.vercel.app/de-AT/p/BE25-net

The message is still there.

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:37 PDT 2022; root:xnu-8020.121.3~4/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.6.0
      npm: 8.13.2
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 12.2.3
      eslint-config-next: 12.2.3
      react: 18.2.0
      react-dom: 18.2.0

[willemliufdmg]

Cannot confirm @willemliufdmg. I've updated my packages and deployed it: https://kaminholz-vercel-opffmn53w-floflock.vercel.app/de-AT/p/BE25-net

The message is still there.

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:37 PDT 2022; root:xnu-8020.121.3~4/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.6.0
      npm: 8.13.2
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 12.2.3
      eslint-config-next: 12.2.3
      react: 18.2.0
      react-dom: 18.2.0

I've updated the original post to reflect the most current environment information. In the router-bug demo I've updated next to use 12.2.4-canary.4 and can confirm that the error message still shows.

[hi-paul]

In my case, I also use dynamic route and just adding an empty middleware causes infinite reload with the above error.

However if i change in korean, it works with the error but it's a bit slow.

If I remove the empty middleware file, it's fast and everything works fine.

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:37 PDT 2022; root:xnu-8020.121.3~4/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.13.0
      npm: 8.1.0
      Yarn: 1.22.10
      pnpm: N/A
    Relevant packages:
      next: 12.2.3
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

[hi-paul]

My issue has been resolved since updating to 12.2.4

[nikolajvonholck]

Same: My issue has also been resolved since updating to 12.2.4.

[ijjk]

Hi, taking another look at the initial reproduction it looks like this isn't working correctly as the rewrite is dependent on the search value which is causing a rewrite to occur for a direct visit but not on a client transition since the _next/data request includes all search values.

The rewrites done in middleware need to match between direct visit and client transition otherwise the query hydration can fail to resolve correctly.

After fixing the rewrite logic in the reproduction it appears to be working correctly in v12.2.4 so I'm gonna close this for now as others are mentioning above it is resolved for them in this version as well.

If you're still having troubles with this after fixing the above code issue in the middleware please provide additional information and we can investigate further!

[thijsadrmat]

I was experiencing this error as well, so for those struggling with this a well. In my case I had a fallback rewrite (for incremental adaption) for all paths in the next.config.js, I would expect this rewrite not to be triggered after rewriting to a next route from the middleware. After removing this fallback in the config, my rewrites from the middleware work as expected. I was able to debug the function that created this error, and it said it would rewrite externally (externalDest: true). To fix it I'll be moving all rewrites from config to the middleware. Hopefully that solves the issue for good.

[jonspark]

We're having this same error, starting when we updated to v12.2.5 and persisting in v12.3.0. We have all our rewrites all in middleware and there aren't any fallbacks in config. We haven't been able to replicate the problem ourselves (locally or on Vercel), but our error logging is being flooded.

The problem only goes away if we revert to v12.1.6.

[willemliufdmg]

I've updated the demo to use the latest canary 12.3.1-canary.1. And the error message still persists.

[roxworks]

For anyone coming back to this who happens to be combining multiple different nextjs projects...

Make sure your projects all have a basePath parameter set in their individual next.config.js files

The rule is you can do multiple repos and rewrites, but they can't have the same paths, including /

so, TL;DR if you have two projects, #1 is "home" and #2 is "blog"

Make sure the blog next.config.js has this:

basePath: "/blog"

and then in your rewrites, change to

{ source: '/blog/:path*', destination: "https://YOUR_BLOG_URL/blog/:path*", }

Not sure that this is exactly the issue others are having, but got here from Googling the same error message and this was my issue

[meotimdihia]

In my case, I don't host my website in Vercel.
it happens when the error Error: Failed to load static props appeared.

[ghost]

in my case i am deploying in azure with docker and i have the same error

[tiago-sanches-bairesdev]

My team and I are experiencing this error yet. We are using the v12.3.0. We hardly can reproduce it for sure, I just could a couple of times and it was reloading the page non-stop. As some comments above, our Sentry log is has a bunch of this error report.

Following the documentation I could notice that we have some redirects on our next.config.file, and we wrote this redirect call precisely as in the docs but tbh we didn't believe this is the cause of this error, because we try to match the redirects URL in next.confi.js function call and the Sentry errors URL and no one of them matches at all.

So we believe that it could be something in middleware. Our middleware is in the root as the next upgrade guide to v.12.2 asked for this change. We do a couple of URL comparisons on middleware to redirect to another URL, I'm currently suspecting about it.

Besides that, I noticed in Sentry that the mostly errors is like /_next/data/generated_string/[slug].json?slug=slug&another_bunch_of_params=xxxxx [404], and followed by an Error: Failed to load script and at the end, we got the exception Error: Invariant: attempted to hard navigate to the same URL.

It's really frustrating to not be able to reproduce it to have sure of how we can handle and try to solve this error. So any help and suggestion that could help us are welcomed.

[willemliufdmg]

My team and I are experiencing this error yet. We are using the v12.3.0. We hardly can reproduce it for sure, I just could a couple of times and it was reloading the page non-stop. As some comments above, our Sentry log is has a bunch of this error report.

Following the documentation I could notice that we have some redirects on our next.config.file, and we wrote this redirect call precisely as in the docs but tbh we didn't believe this is the cause of this error, because we try to match the redirects URL in next.confi.js function call and the Sentry errors URL and no one of them matches at all.

So we believe that it could be something in middleware. Our middleware is in the root as the next upgrade guide to v.12.2 asked for this change. We do a couple of URL comparisons on middleware to redirect to another URL, I'm currently suspecting about it.

Besides that, I noticed in Sentry that the mostly errors is like /_next/data/generated_string/[slug].json?slug=slug&another_bunch_of_params=xxxxx [404], and followed by an Error: Failed to load script and at the end, we got the exception Error: Invariant: attempted to hard navigate to the same URL.

It's really frustrating to not be able to reproduce it to have sure of how we can handle and try to solve this error. So any help and suggestion that could help us are welcomed.

You can reproduce the problem with the Demo I linked to in the original post. The Demo has been updated to use next@12.3.2-canary.22.

[willemliufdmg]

This issue has been closed but the problem has not been resolved.

[ijjk]

@willemliufdmg as mentioned in #38171 (comment) the bug is in the middleware handling itself and not Next.js as it's handling the /_next/data request (client-data) different than the direct visit.

These requests must match or it causes a divergence on the client. Potentially we could add an error for this although it's tricky to detect.

[bryanrsmith]

@ijjk It would be great if Vercel could provide more official documentation, recommendations, or mitigation for this issue. I've put a lot of time into trying to resolve this error with no success. I don't believe my middleware is doing anything that's not demonstrated in official examples, but the error persists. I feel blocked from updating nextjs because of this.

[AryanJ-NYC]

I see this error pop up in my Sentry and I have zero middlewares.

[willemliufdmg]

@willemliufdmg as mentioned in #38171 (comment) the bug is in the middleware handling itself and not Next.js as it's handling the /_next/data request (client-data) different than the direct visit.

These requests must match or it causes a divergence on the client. Potentially we could add an error for this although it's tricky to detect.

This error also shows during local development. I can only assume that it has nothing to do with Vercel at that time but I could be wrong.

[imhuynq]

In my project (no middleware and rewrites), this error happened when user navigate to same current URL (e.g: in homepage, user click logo header) after a new deployment

[ijjk]

Hi, we have recently updated how this specific case is handled and the initial reproduction should no longer be causing issues in v12.3.2-canary.25 of Next.js, please update and give it a try!

[willemliufdmg]

Hi, we have recently updated how this specific case is handled and the initial reproduction should no longer be causing issues in v12.3.2-canary.25 of Next.js, please update and give it a try!

I can confirm that this case has now been fixed in next@12.3.2-canary.25.

Thank you all@next.js for solving this bug!

[halukaydogan]

just DOUBLE check the href at Link <Link href="????????" as="/apps"> you click and at next.config.js rewrites destination are same... if they are not same it makes that error...

[shadowgroundz]

Same issue on Next 13.0

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:14:30 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T8103
Binaries:
  Node: 16.18.1
  npm: 8.19.2
  Yarn: 1.22.19
  pnpm: 7.14.2
Relevant packages:
  next: 13.0.2
  eslint-config-next: 13.0.2
  react: 18.2.0
  react-dom: 18.2.0

[dimitrisdi]

Just updated to Next 13.0 and i am still facing the same issue. Sentry is getting destroyed by this error.

[maria404]

Updated to 12.3.2 and still have this issue.

[luukdv]

@shadowgroundz @dimitrisdi @maria404 I don't think the Next team will act on a closed issue, so might be better to open a new one.

[ijjk]

Hi, if you are still seeing this error it appears to be unrelated to the initial issue described here as that is now resolved, please open a fresh issue with reproduction.

[shadowgroundz]

@shadowgroundz @dimitrisdi @maria404 I don't think the Next team will act on a closed issue, so might be better to open a new one.

Must I open a new ticket for same issue while that still exist on newer version?

[soren121]

@shadowgroundz What they mean is, if you're still getting the error, then it must have a different root cause than the issue in this ticket. For that, you should open a new ticket so the team can examine your issue.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.