Next.js Discord

Discord Forum

Custome 404 (not-found) page cannot show.

Unanswered
Giant ichneumon wasp posted this in #help-forum
Open in Discord
Giant ichneumon waspOP
Hi, I am trying to create not-found.tsx page in my app/blog directory (app/blog/not-found.tsx) but this page cannot show me on invalide route.

18 Replies

@Giant ichneumon wasp Hi, I am trying to create not-found.tsx page in my app/blog directory (app/blog/not-found.tsx) but this page cannot show me on invalide route.
Ray
app/blog/not-found.tsx this page only show when you call notFound() in app/blog/page.tsx
Giant ichneumon waspOP
So what can I do for wrong blog path name?
Ray
call notFound()
Giant ichneumon waspOP
If anyone wants to visit blog/justFun page but that page is not in my website that time not-found.tsx page not show on the website.
otherwire it will be rendered by app/not-found.tsx
it is in the doc
Giant ichneumon waspOP
What is difference in this blog/[...not-found]/page.tsx and blog/not-found.tsx?
@Ray `app/blog/not-found.tsx` this page only show when you call `notFound()` in `app/blog/page.tsx`
Ray
the not-found.tsx in any route segment only catch the notFound() error in its segment
other will be handled by app/not-found.tsx
Giant ichneumon waspOP
My blog page have only three subpages: FirstBlog, SecondBlog, ThirdBlog, So now I go to the blog/FirstBlog page that time blog/FirstBlog/page.tsx file render but now I change the url to blog/FourthBlog so that time I when to render Custom blog error page ??

app
|- blog
| ├ FirstBlog
| | â”” page.tsx
| ├ SecondBlog
| | â”” page.tsx
| ├ ThirdBlog
| | â”” page.tsx
| â”” page.tsx


This is my folder structure so tell me when user Go to blog/fourthBlog url by changing itself, How to see custom blog error page??
Giant ichneumon waspOP
I want to show custom blog page??
@Giant ichneumon wasp I want to show custom blog page??
Ray
// app/not-found.tsx
"use client";

import { usePathname } from "next/navigation";

export default function NotFound() {
  const pathname = usePathname();

  if (pathname.startsWith("/blog")) {
    return <BlogNotFound />;
  }

  return (
    <>
      <h1>Global not found</h1>
    </>
  );
}
Giant ichneumon waspOP
app
|- blog
| ├ [...not-found]
| | â””page.tsx
| ├ FirstBlog
| | â”” page.tsx
| ├ SecondBlog
| | â”” page.tsx
| ├ ThirdBlog
| | â”” page.tsx
| â”” page.tsx


can I create this type of folder structure to show not-found error page: [...not-found]/page.tsx ??