OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Next.js notFound() not setting 404 HTTP Header

  • Thread starter Thread starter James John
  • Start date Start date
J

James John

Guest
The point of choosing Nextjs was for SSR and SEO. We have an external REST API which we query for data on the frontend. But on some pages, we need do a pre-render fetching and display proper 404 Not Found header when API returns 404. This seems to be difficult for me.

The app structure looks like this:

Code:
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

My Problem

A request is being made to http://example.com/p/auth/password-reset/[key] . The key is to be captured and sent to the REST API to validate. If not found, and notFound() is thrown, it should return a proper 404 HTTP response.

What I have tried

With what I have tried, the only way that works to return a proper 404 header is by throwing notFound() in app/p/auth/layout.jsx, but the problem is, the layout is shared amongst other paths (e.g. app/p/auth/sign-up), and I cannot isolate the request in the app/p/auth/layout.jsx

I have tried to isolate the layout.jsx by deleting the app/p/auth/layout.jsx and re-creating one in each of the paths, but throwing notFound() inside app/p/auth/password-reset/[key]/layout.jsx does not set 404 HTTP header. It returns 200 and further more loads to 404 page.

notFound() sets 404 header when called in app/p/auth/layout.jsx but when isolating the layout to sub-folder like app/p/auth/password-reset/[key]/layout.jsx, it doesn't set 404 header but it loads 404 page with 200 header. What is the proper way to handle this?

<p>The point of choosing Nextjs was for SSR and SEO. We have an external REST API which we query for data on the frontend. But on some pages, we need do a pre-render fetching and display proper 404 Not Found header when API returns 404. This seems to be difficult for me.</p>
<p>The app structure looks like this:</p>
<pre><code>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
</code></pre>
<p><strong>My Problem</strong></p>
<p>A request is being made to <a href="http://example.com/p/auth/password-reset/[key]" rel="nofollow noreferrer">http://example.com/p/auth/password-reset/[key]</a> . The key is to be captured and sent to the REST API to validate. If not found, and <code>notFound()</code> is thrown, it should return a proper 404 HTTP response.</p>
<p><strong>What I have tried</strong></p>
<p>With what I have tried, the only way that works to return a proper 404 header is by throwing <code>notFound()</code> in <code>app/p/auth/layout.jsx</code>, but the problem is, the layout is shared amongst other paths (e.g. app/p/auth/sign-up), and I cannot isolate the request in the <code>app/p/auth/layout.jsx</code></p>
<p>I have tried to isolate the <code>layout.jsx</code> by deleting the <code>app/p/auth/layout.jsx</code> and re-creating one in each of the paths, but throwing <code>notFound()</code> inside <code>app/p/auth/password-reset/[key]/layout.jsx</code> does not set 404 HTTP header. It returns 200 and further more loads to 404 page.</p>
<p><code>notFound()</code> sets 404 header when called in <code>app/p/auth/layout.jsx</code> but when isolating the layout to sub-folder like <code>app/p/auth/password-reset/[key]/layout.jsx</code>, it doesn't set 404 header but it loads 404 page with 200 header. What is the proper way to handle this?</p>
 
Top