Return 404 status from 404.js/.tsx page

Asked May 23 '22 at 17:50

Active May 23 '22 at 18:56

Viewed 76 times

Created a simple 404.js page

import React from 'react'

import Error from 'next/error'

export default function Page404() {
  return <Error statusCode={404} />
}

In [[...page]].tsx:

export async function getStaticPaths() { ... }

export async function getStaticProps({ ... } : StaticProps) {
  ...
  if (!page) {
    return {
      notFound: true,
    }
  }
  ...
}

If I enter some dummy URL, error page is shown, but http status is 200. How can I change it to 404?

edited May 23 '22 at 18:56

Aluan Haddad

29,886
8
72
84

asked May 23 '22 at 17:50

DraganS

2,621
1
27
40

Will try to utilise https://github.com/martpie/next-with-error – DraganS May 23 '22 at 17:58
next-with-error helped. – DraganS May 23 '22 at 18:16
1

Are you using `fallback: true` inside `getStaticPaths` by any chance? – juliomalves May 24 '22 at 18:23
Yes. I do --> return { paths, fallback: true, } – DraganS May 25 '22 at 09:21
1

Does this help answer the question: [The "notFound" prop of getStaticProps has no effect on page http status code](https://stackoverflow.com/questions/66841538/the-notfound-prop-of-getstaticprops-has-no-effect-on-page-http-status-code)? – juliomalves May 25 '22 at 10:15
1

I've solved the problem - used next-with-error HOC (_app.js) and added notFound: true, – DraganS May 25 '22 at 10:50

Return 404 status from 404.js/.tsx page

0 Answers0