Invariant: attempted to hard navigate to the same URL

[mohux]

Verify canary release

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

Provide environment information

node > 14

NextJS 13.1.1

Which area(s) of Next.js are affected? (leave empty if unsure)

Middleware / Edge (API routes, runtime)

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/floral-glitter-3mp1x0?file=%2Fnext.config.js&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A11%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A11%7D%5D

CodeSandbox example here

just try to visit any 404 URL like /en/reset-password

and invariant will trigger

Describe the Bug

Am trying to use a middleware to redirect users using localization middleware

Everything works fine until I implement a 404.tsx page
which results in showing

Invariant: attempted to hard navigate to the same URL

for the 404 pages ( only when using 404.tsx )

Expected Behavior

To show 404 without any error similar

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[alexander-lebed]

Have you tried NextResponse.next()?

if (
    req.nextUrl.pathname.startsWith("/_next") ||
    req.nextUrl.pathname.includes("/api/") ||
    PUBLIC_FILE.test(req.nextUrl.pathname)
  ) {
    return NextResponse.next(); //
  }

[mohux]

Have you tried NextResponse.next()?

if (
    req.nextUrl.pathname.startsWith("/_next") ||
    req.nextUrl.pathname.includes("/api/") ||
    PUBLIC_FILE.test(req.nextUrl.pathname)
  ) {
    return NextResponse.next(); //
  }

Thank you for your reply

Yes I have tried to return NextResponse and still not work

Infact I tried empty middleare which only returns response.next

[thiagozf]

Duplicate of #44293

[raimohanska]

I have run to the same issue and created a Repository for describing and demonstrating the problem:

https://github.com/raimohanska/nextjs-custom-error-page

[Jay-flow]

I have the same issue, Any update?

[kroussea]

Same issue is happening here as well. When I either remove my middleware completly or replace my custom 404 page (404.js) by the generic _error.js page, the error doesn't happen anymore.

This is happenning on a production build as well. Is there any workaround in the meantime to bypass this?

[mohux]

My work around was sily but its not the optimal solution for web crawlers since it doesnt return 404 status

Which is having catch all route

[...404].tsx

That returnd 404 component
Until this issue is fixed obivously and just show 404 component

[tony-cocco]

Chiming in here as I am also seeing an issue with middleware in combination with a custom 404 page.

I downgraded to 13.0.6 (previously was on 13.1.6) as per #44293 (comment)

[doveg]

Environment:

next@13.0.6
chrome@111

I got the error message above when used the Link like:
<Link href="/tags/[tag]" as={/tags/${tag}}>{tag}</Link>

And the error disappeared when I revised it to:
<Link href={/tags/${tag}}>{tag}</Link>

[kroussea]

Issue seems to be resolved from this release. We've upgraded our app to 13.2.0 and now our custom 404 page works fine with the middleware 👍