Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – next js returns not-found.tsx when image path is broken

I have a question: I have a Next.js project on app router, there is a page on which there is an image from the public folder.
If you go to the url of the picture (open it in a new tab window) and intentionally break the path of the image – next js shows not-found.tsx page?

Is there any way to fix this so that it just shows the default not-found error from next on a black screen?

Tags:

2

Answers


  1. 0

    From the comments, I think you want the "old" 404 page that was auto created in the pages router. I’m not sure if it still exists but you need to use:

    import Error from 'next/error'
//...
export default function NotFound() {
  return <Error statusCode={404} />
}

    This needs to go into the root not-found.tsx

    Now, you need to switch between this and your current content for not-found and you have 2 options:

    1. programatically by checking the path
    2. create a group in the app folder and move existing not-found.tsx in there then create a new one with the "old" design.

    Personally, I prefer option 2 as I like the code to be kept as clean as possible but I guess there is no real advantages to one or the other.

    If the next/error import doesn’t exist any more, you just need to create the page as you want it in the root.

    Login or Signup to reply.
  2. 0

    Next.js handles 404 errors with a custom not-found.tsx page if you have implemented one. This custom page will be shown for any 404 errors, including broken image paths. However, if you prefer to display the default Next.js 404 error page (a simple white-on-black text screen), you can modify your approach.

    Here’s how Next.js handles 404 pages:

    1. Default 404 Page: By default, Next.js provides a static 404 page that is automatically generated. This page is very lightweight and is used when no custom 404 page is provided.

    2. Custom 404 Page: If you create a pages/404.js or not-found.tsx (depending on your setup), Next.js will use that for any 404 errors, including broken paths for images or other static files.

    How to Display the Default 404 Error:

    If you want to avoid showing your custom 404 page for certain cases (like broken image paths) and revert to the default simple 404 page, you can do the following:

    • Remove the Custom 404 Page: The easiest way to ensure the default 404 error is shown is to not create a custom 404 page. This will let Next.js fall back to its built-in 404 error.

    • Serve a Minimal Custom 404 Page: If you still need a custom 404 page but want it to look like the default one (white text on a black background), you can style your not-found.tsx or 404.js page minimally:

      export default function Custom404() {
  return (
    <div style={{ backgroundColor: 'black', color: 'white', height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
      <h1>404 - Page Not Found</h1>
    </div>
  );
}

      This will give you a custom 404 page that mimics the appearance of the default error screen, keeping your setup simple.

    Additional Considerations:

    • Error Pages in Production: Remember that pages/_error.js is used for handling more complex errors like 500 errors or to customize how other errors are displayed. If you only want to handle 404 errors with a minimal page, you don’t need to touch _error.js.

    By taking one of these approaches, you can control how 404 errors are displayed, either by removing the custom page entirely or by styling it to match the default simple black screen error.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search