Our decision to use Nextjs was primarily driven by the need for SSR and SEO optimization. We rely on an external REST API to fetch data on the front end, but we face challenges when trying to pre-render certain pages and display a proper 404 Not Found header in case the API returns a 404 error. This particular issue has proven to be quite complex.
The structure of our app is as follows:
app/p/auth/
├── layout.jsx
├── loading.jsx
├── password-reset
│ └── [key]
│ ├── components
│ │ ├── index.js
│ │ ├── ResetPassword.jsx
│ │ └── SecurityQuestions.jsx
│ ├── page.jsx
│ └── ResolveComponent.jsx
├── reset-successful
│ └── page.jsx
└── sign-up
└── page.jsx
The Challenge at Hand
We are facing difficulties when making a request to http://example.com/p/auth/password-reset/[key]. The key must be captured and sent to the REST API for validation purposes. In case the key is not found and notFound() is triggered, we expect a proper 404 HTTP response.
Attempted Solutions
After several attempts, we have found that the only way to return a correct 404 header is by triggering notFound() in app/p/auth/layout.jsx. However, since the layout file is shared among various paths (e.g., app/p/auth/sign-up), isolating the request within app/p/auth/layout.jsx poses a challenge.
We tried isolating the layout.jsx file by deleting the original one and creating a new one in each path individually. Unfortunately, triggering notFound() inside
app/p/auth/password-reset/[key]/layout.jsxWhile notFound() successfully sets a 404 header when called from app/p/auth/layout.jsx, it fails to do so when isolated within a sub-folder like
app/p/auth/password-reset/[key]/layout.jsx