404 page not working for nested routes

Describe the bug

I have a Next.js app with a custom pages/404.tsx file. When accessing a route on the root of the domain that I expect to return a 404, this page renders fine (a.k.a domain.com/broken-url). However, when trying to access nested routes under this that should return the 404 page, the default Next.js 404 template is shown instead (a.k.a domain.com/broken/this)

Expected behavior

When testing this using npm run build and npm run start the expected behaviour of rendering the custom 404 page works.

Steps to reproduce

1. Create custom /pages/404.tsx
2. Deploy using this component.
3. Access domain.com/broken-url you will see the custom 404 page
4. Access domain.com/broken/thisl you will NOT see the custom 404 page

Versions

• OS/Environment: Mac OS Big Sur
• @sls-next/serverless-component version: 1.18.0
• Next.js version: 10.0.9

Checklist

• You have reviewed the README and FAQs, which answers several common questions.
• Please first try using the most recent latest or alpha @sls-next/serverless-component release version, which may have already fixed your issue or implemented the feature you are trying to use. Note that the old serverless-next.js component and the serverless-next.js plugin are deprecated and no longer maintained.

[mdsavian]

I’m facing the same issue. I have a custom 404 page, and I’m not redirected to this page. I’m using @sls-next/serverless-component: 1.19.0-alpha.43 next: 10.1.2

[dphang]

Sounds good, then I think we can close this issue if the latest issues are with Next.js itself