Serverless-next.js: 404 Error Page not working

[sidartha]

Describe the bug
When using [email protected], navigating to an invalid URL does not show the 404 error page. Instead, you see 200 | An unexpected error has occurred.

To Reproduce
Steps to reproduce the behavior:

1. Clone this repository: https://github.com/sidarthar/serverless-nextjs-404-error
2. Run npx serverless to deploy
3. After deployed, visit the appUrl/pageThatDoesNotExist
4. See error

Expected behavior
Should see a 404 | Page Not Found error.

Screenshots

Desktop (please complete the following information):

• OS: N/A
• Version [email protected], serverless-next.[email protected]

Additional context
When using [email protected], the 404 page works as expected.

[danielcondemarin]

Thanks for reporting! I suspect this started happening since the introduction of https://nextjs.org/docs/advanced-features/custom-error-page#404-page. If that's the case, this would need to be supported in serverless-next.js, probably changing this.

If someone can confirm and is happy to PR I'll happily accept contrib. 👍

[bhall2001]

This may be related...
https://github.com/zeit/next.js/issues/12199

[sidartha]

I believe that the issue is because of #11561

On line 283 of next-serverless-loader.ts,

${page === '/_error' ? `res.statusCode = 404` : ''} was deleted and replaced with

${ page === '/_error' ? ` if (!res.statusCode) { res.statusCode = 404 } ` : '' }

If I understand correctly, res.statusCode = 200 is set before rendering the error page, so it doesn't reach the line to set res.statusCode = 404.

[danielcondemarin]

I believe that the issue is because of #11561

On line 283 of next-serverless-loader.ts,

${page === '/_error' ? `res.statusCode = 404` : ''} was deleted and replaced with

${ page === '/_error' ? ` if (!res.statusCode) { res.statusCode = 404 } ` : '' }

If I understand correctly, res.statusCode = 200 is set before rendering the error page, so it doesn't reach the line to set res.statusCode = 404.

Good catch.
Maybe setting status and statusDescription as undefined here is the fix. Then it would be up to next to always set a statusCode which I think should be fine, but would need some testing to ensure it doesn't break some use case.

[marcin-piela]

Is there any workaround (to implement in app) without waiting for new package version?

[lone-cloud]

So I quite literally did what @danielcondemarin suggested in his previous comment and the 404 status is now being returned correctly. I have not noticed any regressions with the change. However, it is being rendered in the _error template instead of the 404 one. I assume this has never worked for this project before and will require a custom implementation.

Commit here: https://github.com/lone-cloud/serverless-next.js/commit/834886a41324500a5c29831d3614366b08725c5f

You can test it by cloning the set_status_undefined/378 branch, run npm install && npm run packages-install on it and change your component in serverless.yml to point to its local path like component: '../serverless-next.js/packages/serverless-component'.