The Problem: Understanding the Not-Found Page Issue in Next.js 13
The user reports an issue with their Next.js 13 project. They have the following project structure:
The 404.js file is intended to be the custom Not-Found page. However, when entering a wrong route, the custom page does not work, and instead, the default Next.js 404 page is displayed. The user seeks help to understand why this issue occurs and what they might be doing wrong.
Solution 1: Renaming the Not-Found Page File
According to the official Next.js documentation, starting from Next.js 13.3, you need to change the filename of the Not-Found page to not-found.js. By having an app/not-found.js file, Next.js will automatically handle visits to URLs without a matching route in your app.
Next.js Not-Found Documentation
This change was announced in the Next.js 13.3 release, bringing improvements to the project structure and routing behavior.
Solution 2: Error Handling with error.js
In Next.js 13.2, instead of using a file named 404.js, you should use a file named error.js for error handling purposes. This approach allows the catching of errors sent from an API request returning a 404 response.
The official Next.js documentation provides detailed information on error handling and routing.
Next.js Error Handling Documentation
By following these conventions and updating your code accordingly, you can ensure that any errors or not-found scenarios are gracefully handled in your Next.js project.
Conclusion
In this article, we discussed the issue with the Not-Found page in Next.js 13, where the custom page does not work and the default 404 page is displayed. We explored two solutions to resolve this problem.
By either renaming the Not-Found page file to not-found.js or using the error.js file for error handling, you can ensure that your Next.js project handles error scenarios appropriately. It is crucial to adhere to the latest Next.js conventions and documentation to maintain a well-structured and functioning application.
Remember to update your Next.js version and check the official documentation for any further changes or updates in the future.
