Middleware not working in Vercel production deployment for Next.js project.

[Saszr]

Summary

The above gif is a comparison example of my deployment on Vercel ( Production ) and Netlify.

It can be seen that refreshing the page in the Vercel ( Production ) does not trigger middleware. ( Network uncheck Disable cache )

After a period of investigation, this only occurs in the Vercel ( Production ). My local envi, including the Vercel ( Preview ), middleware is all good.

These are deployment addresses:
Vercel ( Production ) : https://next-intl-middleware-example.vercel.app
Vercel ( Preview ) : https://next-intl-middleware-example-git-preview-saszr.vercel.app
Netlify ( Production ): https://superb-shortbread-8418b8.netlify.app

Additional information

No response

Example

https://github.com/Saszr/next-intl-middleware-example

[amyegan]

Hi @Saszr! It looks like you have routing hardcoded for localhost, so I wouldn't expect that to make a difference in production or preview environments. I get the same behavior at all three example links. I must be looking at the wrong thing. Can you explain a little more about what we should see when middleware is working as expected?

[Saszr]

Thank you for your reply and debugging. I think I should further elaborate on the issue I encountered. I used a third-party library called next-intl, which handles redirects and rewrites based on the detected user locale. Once a locale is detected, it will be saved in a cookie.

Let's take a look at the deployment situation of these three links. When we access the URLs on Vercel (Preview) and Netlify (Production), and check the cookies, we find that the middleware has executed relevant operations. At this point, if we clear the cookies and refresh the page, we will see that the middleware is executed again and cookies are written.
However, in Vercel (Production), clearing the cookies and refreshing the page will reveal that it has not done anything.

Note when debugging -> Network uncheck Disable cache

[amyegan]

I understand the problem now. This seems related to a caching problem in the Next 13 App Router. If it is related, then this workaround should get you unstuck until the app router and new caching features are out of beta - #1808 (comment)

[Saszr]

I updated the relevant code in the repo, including cache-handler.js / next.config.js / Environment Variables, and also updated the version of Next. Unfortunately, it did not work.