nextjs - 💡(How to fix) Fix Next 16.2.4: valid app routes return 404 in `next dev` when `src/proxy.ts` is present [1 comments, 2 participants]

The same machine also emits Watchpack Error (watcher): Error: EMFILE: too many open files, watch during next dev, but this route-level 404 repro is independent enough to reproduce in a fresh app with only the files above.

TL;DR

The issue can be resolved by adjusting the matcher configuration in the proxy.ts file to correctly handle route matching.

Guidance

• Review the matcher configuration in proxy.ts to ensure it is correctly set up to handle the desired routes.
• Verify that the proxy.ts file is not interfering with the default routing behavior of Next.js.
• Check the server logs to confirm that the proxy.ts file is being executed for the desired routes.
• Consider adjusting the matcher configuration to use a more specific pattern to avoid interfering with the default routing behavior.

Example

export const config = {
  matcher: [
    "/:path*(svg|png|jpg|jpeg|gif|webp)$", // exclude static assets
    "/_next/:path*", // exclude next.js internal routes
    "/:path*",
  ],
};

Note: This example is a possible solution, but the actual fix may depend on the specific requirements of the application.

Notes

The issue seems to be related to the proxy.ts file interfering with the default routing behavior of Next.js. The matcher configuration may need to be adjusted to correctly handle the desired routes. Additionally, the Watchpack Error mentioned in the additional context may be a separate issue that needs to be addressed.

Recommendation

Apply workaround: Adjust the matcher configuration in the proxy.ts file to correctly handle route matching, as shown in the example above. This should resolve the issue with valid app routes returning 404 in development.