[SOLVED] Custom 404 page

Technical Questions
1

Hey there!

It is possible to create a custom 404 page?
I’ve been looking around the documentation and the forum, but I couldn’t find anything about it.

2

Here is a pointer for you: https://forum.builder.io/t/how-do-i-customize-the-404-page-for-different-urls/426

1 Like
3

Thank you @teeleh !

@tarica what is the tech stack of your app that you are building? Many frameworks have a default 404 page that you can use, which you can see an example of in one of our NextJS starter examples here: builder/[[...page]].tsx at 2e199acfe6979ec799724898cdc8b4243e5b1827 · BuilderIO/builder · GitHub

If you wanted to create a custom 404 page within builder that is definitely possible as well! I would recommend making a new page or section model, which you can call “error-page” or whatever you like, and then based off the logic linked above, instead of the default error page you could do something like:

 if (!page && isLive) {
    return (
      <>
        <BuilderComponent model="error-page"  />
      </>
    )
  }

  return (
    <>
      <BuilderComponent model="page" />
    </>
  )
}

Let me know if that makes sense and works for you!

4

@TimG thank you, works for me!

5

@teeleh Thank you!

With this approach, i would define 404 content on each page?

6

No, you specify a generic 404 page at server level and custom 404 pages in certain subdirectories if you would fancy such a thing.

Have a look here: https://nextjs.org/docs/advanced-features/custom-error-page

2 Likes