Middleware + notFound is not working

[Louai99k]

Verify canary release

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

Provide environment information

Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Pro
Binaries:
Node: 14.19.1
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 12.2.0
eslint-config-next: N/A
react: 18.2.0
react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When using middleware and navigate to a page using next/link that return in it's getStaticProps a { notFound:true } the middleware returns the page itself instead of 404.

Expected Behavior

When the page returns { notFound: true } the middleware should return 404 page.

Link to reproduction

https://github.com/Louai99k/next-not-found-bug

To Reproduce

Just install the repo above and run it on your machine. You'll notice in the main page 2 links one normal anchor tag and a next/link. if the middleware exist the link comp from next won't work while the a tag will be working but after removing the middleware both of the links will work just fine.

Not: the api end point returns 404 response and that's my condition in the project to return 404 page.

[AkitoItashi]

Is there any solution or workaround yet?
Cause we are now having big problems with our web projects, which result in empty pages instead of showing the 404 page :c

We use NextJS in connection with TinaCMS. We download the content from a database and the page json is compiled into a page with next build && next export.
The thing is, when I have a dead link on the page now, I get an empty page without any error or something else.
I tried to build a workaround there, to manipulate the content of the page, but the problem is, that no next-function (getStaticProps) is called for the empty page....so i can't get my customized 404 page, cause that is also stored in the database ^^'

What I also noticed is, that when I compile my projects with node 16, everything seems to work.
But our web server, which is the main compiler uses node 14....maybe it has something to do with that?
I think I ask my colleague, if we have the possibility to update that....then I will tell you, if it works now or not :3

[Erickinhou]

Same problem here. When I put the middleware.js file, 404 not work properly and try to enter on the page. If I put just an clean middleware file, Link component doesn't work properly.

[AkitoItashi]

Well I now had the time to upgrade to Node 16, but it didn't work either.
Still getting an empty page ^^'

It looks like when i export or build the project, the problem seems to come up ^^'
When i use the local dev server everything works ^^'

[Louai99k]

I guess they did great job by ruining the old system by replacing legacy _middleware.js with this crab.

[AkitoItashi]

Yeah.....well actually it helps downgrading to 12.1.6 ^^'
But that shouldnt be the end solution ^^'

[fkapsahili]

Had the same issue with getServerSideProps. Seems to be fixed in the most recent release 12.3.1.

[Louai99k]

I'll give it a try if it's resolved I'll close this issue.

[iscekic]

Any update on this issue?

[ijjk]

Closing as this does appear to be working as expected in the latest version of Next.js

[iscekic]

@ijjk The issue is present in the latest version, please reopen it.

My use-case specifically is getStaticProps which returns { notFound: true, revalidate: 1 }, with middleware.ts returning NextResponse.next() - works fine in dev mode, but fails when built for prod.

One more detail - works fine when navigating directly to 404 link, but is broken when using client-side navigation via Link.

[oleggrishechkin]

I can confirm that this issue is still exists on the latest next (v13.1.1). I use getStaticProps + getStaticPaths with fallback: blocking and middleware. 404 pages works incorrectlry with client-side navigation. I have [slug].js pages.

If I open exisiting page like /post-1 and then open 404 page like /post-not-found I see /post-1 content (what???).

If I open 404 page directlry (I see 404 error page) and then open another 404 page like /post-another-not-found I see correct 404 error page.

If I open some other page (not [siug].js and then open 404 page I see empty page without any content.

If I run next dev locally everything work as expected.

[iscekic]

@ijjk Any update here? It still appears to be broken.

[oleggrishechkin]

#43953 - same

[cha2hyun]

Any updates?
+1 : Same issue

[emmgfx]

@ijjk this keeps happening on 13.1.6, should be reopened.

[benjamin-p-newton]

Can confirm that this is also occurring for me on 13.1.6.

[emmgfx]

I'm not able to check this with 13.2.1 (I've removed middlewares because of this issue) but reading the changelog looks like there are some work about this issue. Anyone can check this?

[oleggrishechkin]

I'm not able to check this with 13.2.1 (I've removed middlewares because of this issue) but reading the changelog looks like there are some work about this issue. Anyone can check this?

Hi, @emmgfx ,
I checked.
Issue is still exists on 13.2.1

[joggienl]

In checking some other behaviour (#46613) I also stumbled upon this.

I've got an example with current 13.2.3 version.

On dev I notice that the first click it seems to ignore the notFound completely. If you refresh the page or go directly to it, it will show the 404 page.

But more strange (and concerning to me) is that on production, going to the link will just render {}.

Repo: https://github.com/joggienl/nextjs-middleware-and-redirects
Running "production" demo: https://nextjs-middleware-and-redirects.vercel.app

Direct link to the page with getStaticProps and a notFound set for the specific id: https://nextjs-middleware-and-redirects.vercel.app/post/2

[ijjk]

Hi, this has been updated in v13.2.4-canary.3 of Next.js, please update and give it a try!

[joggienl]

Cool!

I've updated the example I added to this thread.
My example is not ignoring the notFound anymore.

I do get a strange response on Vercel though: https://nextjs-middleware-and-redirects.vercel.app/de/post/2

I am not sure if it is related, I also do not have a clear reproduction path. Any thoughs @ijjk ?

edit: "no clear reproduction", it only happens on Vercel when navigating directly to that page (or a refresh). Navigation via on page links works as expected. Also I could not "break" it locally both dev and build-start.

[samcx]

@joggienl Thanks for sharing, was able to reproduce that myself too—we'll take a look!

[joggienl]

Hey @samcx , just tested 13.2.4-canary.4. It seems to be fixed, thanks!

[hafizasadabbas]

I still facing the issue with v13.2.4-canary.3 And my issue is only resolved by deleting middleware.js from the root level.

Also on vercel there is duplicate _next/data in the request URL (In the Network tab).

@ijjk @samcx @joggienl

[samcx]

@hafizasadabbas There was an additional fix on one canary version above the one you tested. Can you test the latest canary and see if the issue persists?

[hafizasadabbas]

@samcx Still not working with 13.2.4-canary.4.
This is my middleware file

import { NextResponse } from "next/server";

export function middleware() {
return NextResponse.next();
}

No issue on dev but on vercel preview URL.

Also, the issue only appears when I land on a dynamic URL through the Next link, and when I reload the page appears.
Statically generated pages working fine.

I have noticed 1 more thing in the network tab the request URL looks like
https://abc-xyz.vercel.app/xyz/_next/data/NxzzOiyVVB5tOx/en/xyz/xyz/_next/data/NxzzOiyVVB5tOx/en/post.json?slug=post

When I delete middleware.js the request URL becomes
https://abc-xyz.vercel.app/xyz/_next/data/NxzzOiyVVB5tOx/en/post.json.json?slug=post

[ijjk]

@hafizasadabbas can you provide the actual deployment? Looks like the one you shared is deleted. Also we have tests covering this specific handling with notFound: true which are passing currently.

[hafizasadabbas]

Also, I set notFound: true in getStaticProps else case.

[samcx]

@hafizasadabbas Is it possible to create a public, minimal reproduction repository that showcases this page+issue so we can take a closer look?

[oleggrishechkin]

I can confirm that this issue is still exists on the latest next (v13.1.1). I use getStaticProps + getStaticPaths with fallback: blocking and middleware. 404 pages works incorrectlry with client-side navigation. I have [slug].js pages.

If I open exisiting page like /post-1 and then open 404 page like /post-not-found I see /post-1 content (what???).

If I open 404 page directlry (I see 404 error page) and then open another 404 page like /post-another-not-found I see correct 404 error page.

If I open some other page (not [siug].js and then open 404 page I see empty page without any content.

If I run next dev locally everything work as expected.

I can confirm that issue described by me above was fixed in 13.2.4. Thanks

[GolfredoPerezFernandez]

hello i having this issue when try to use dynamic import i try v13.2.4 and latest and does not work/* eslint @typescript-eslint/no-var-requires: "off" /
/ eslint-disable complexity /
/ eslint @typescript-eslint/no-explicit-any: "off" /
/ eslint-disable arrow-spacing /
/ eslint-disable no-await-in-loop /
/ eslint-disable arrow-parens /
/ eslint-disable arrow-spacing /
/ eslint-disable prefer-const /
/ eslint-disable no-undef /
/ eslint-disable prefer-arrow-callback /
/ eslint-disable array-callback-return */

/* eslint @typescript-eslint/no-unused-vars: "off" */

/* eslint-disable etc/no-commented-out-code /
/ eslint-disable no-loop-func /
/ eslint-disable no-inline-comments /
/ eslint-disable no-inline-comments /
/ eslint @typescript-eslint/no-shadow: "off" /
/ eslint @typescript-eslint/no-empty-function: "off" */

import type {
SwapWidget as SwapWidgetType,
PangolinProvider as PangolinProviderType,
} from '@pangolindex/components';

import dynamic from 'next/dynamic';
import { makeStyles } from '@material-ui/core/styles';

import { useAccount } from 'wagmi'
import { Typography } from '@web3uikit/core';
import { useEffect } from 'react';
import React from 'react';

const PangolinProvider = dynamic(
() => import('@pangolindex/components').then((module) => module.PangolinProvider) as any,
{ ssr: false },
) as typeof PangolinProviderType;

const SwapWidget = dynamic(() => import('@pangolindex/components').then((module) => module.SwapWidget) as any, {
ssr: false,
}) as typeof SwapWidgetType;

export default function Swap() {
const [ethAddress,setEthAddress]= React.useState("0")

const useStyles = makeStyles((theme :any)=> ({
root: {
width: '100%',
height: '100%',
position: 'relative',
'& video': {
objectFit: 'cover',
},
},
overlay: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
},
title: {
paddingBottom: theme.spacing(4),
},
}));

useEffect(()=>{
if(address){
setEthAddress(address)
}
},[])

const { address } = useAccount()

const classes = useStyles();
return (
<div
style={{
backgroundImage: url(${"https://cdn.discordapp.com/attachments/907590324627595284/1076218522100826182/blockchain_2.png"}),
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
width: '100vw',
minHeight: '100vh',
margin:-8,
alignItems:"center"

  }}
> <div
style={{
  paddingTop:100,
  display: 'flex',
  flexDirection: 'column',
  alignItems:"center",
  width:"100%",
}}

<Typography fontFamily={"poppins"} color="white" variant="h1" component="h1" className={classes.title}>
Token Swap

<div
style={{
paddingTop:20,
paddingBottom:100,
display: 'flex',
width:"40%",
alignSelf:"center",
flexDirection: 'row',
justifyContent:"center",
alignItems:"center",
}}

<PangolinProvider account={ethAddress} chainId={19} library={""}>
  <SwapWidget isLimitOrderVisible={false} />
</PangolinProvider> 

)
}

[satpalsr]

I am on next@13.3.0 and still facing the issue.

[dbaganov]

I am on next@13.3.1 and have the same issue: middleware + getServerSideProps + Vercel => 404. But it works in the dev local.

[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.