how to know if the app is on the not found page in nextjs 14 app router #61823

abdulvahidkp · 2024-02-08T16:22:22Z

abdulvahidkp
Feb 8, 2024

Summary

I'm encountering difficulty determining if my Next.js application is on the Not Found page within the app router. I have a functioning Not Found page that displays when the URL doesn't match any routes defined in my app's router folder. However, there's a component called NewsLetter in the global Layout file, so that displays on every page, including the 404 page. I want to exclude this component from the 404 page and from the newsletter-confirmation page.

I handle the exclusion of the NewsLetter component on the /newsletter-confirmation page by checking the pathname and returning null before the component's return code if the pathname is "/newsletter-confirmation". However, I encountered an issue when trying to implement a similar logic for the 404 page. When I logged the pathname, I noticed that it returns the random pathname currently in the URL. For instance, if I type "abcd" in the pathname, I'll get the value "abcd" in the usePathname() function, making it unusable for my purposes.

I've tried searching extensively online but haven't found a solution. How can I reliably determine if my app is on the Not Found page within the app router, so I can handle the exclusion of the NewsLetter component appropriately?

Additional information

No response

Example

No response

Answered by Andy-Bartkiv-Accedo

Sep 15, 2024

My workaround for the issue:

Add app global state/context, i.e. AppContext.js

const [is404, setIs404] = useState(false);

Toggle is404 state inside not-found.tsx

    useEffect(() => {
       setIs404(true);
       return () => setIs404(false);
    }, []);

Get is404 from app global state/context wherever you need it.

View full answer

DevDaniloFerrari · 2024-02-08T17:47:15Z

DevDaniloFerrari
Feb 8, 2024

I don't know if I understand your problem very well.
But I will explain how to implement a not-found page according to the documentation.

create your file in this path like this

the page.jsx

import Link from 'next/link'
 
export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
      <Link href="/">Return Home</Link>
    </div>
  )
}

then, if I put abcd in the route

If that's not what you need, please. Please provide more details about your problem so I can try to help you.

3 replies

abdulvahidkp Feb 9, 2024
Author

Thank you for taking the time to respond and for providing the suggested implementation for the not-found page. I appreciate your willingness to assist.

I'd like to clarify that I do have a 404 page already set up, and it functions as intended. It displays when a user enters a URL that doesn't match any routes in my application, so there's no issue with that aspect.

The problem I'm encountering revolves around the inclusion of certain components, such as the NewsLetter, on all pages, including the 404 page. Typically, in Next.js, we place these components in the app/layout.tsx file to ensure they're displayed consistently across the application. so i have created it like this below

app/layout.tsx

const Layout = async ({ children }: { children: React.ReactNode }) => {

  return (
    <html lang={"en"} className={`${sora.variable} ${inter.variable} ${paytoneOne.variable}`}>
      <body>
          <Header />
          {children}
           <NewsLetter />
          <Footer />
      </body>
    </html>
  );
};

However, based on my design specifications, I need to exclude the NewsLetter component from specific pages, such as app/newsletter-confirmation/page.jsx and app/not-found.jsx. To achieve this, I've attempted to conditionally render the NewsLetter component based on the pathname. using the below code

For instance, I've successfully implemented logic to hide the NewsLetter component on the newsletter-confirmation page using the below code:

app/components/NewsLetter.tsx

import { usePathname } from "next/navigation"

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

  // Hide newsletter subscription section if the current path is the newsletter confirmation page
  if (pathname !== "/newsletter-confirmation") return null;

  return (
    <div>
      //rest code here...
    </div>
  )
}

This approach works as expected. However, I'm unable to achieve the same for the 404 page because the pathname dynamically reflects whatever the user enters in the URL.

For example, if a user enters localhost:3000/notvalidslug, the application correctly directs them to the 404 page, but the pathname value will be notvalidslug. Consequently, I can't conditionally render the NewsLetter component based on a specific pathname, because the pathname will vary depending on the user input.

I hope this clarifies the issue I'm facing. If you have any further insights or suggestions on how to address this challenge, I would greatly appreciate it.

mrjackyliang Mar 5, 2024

This solution helped me out with the replacement of the <Head> with generateMetadata() since I cannot use generateMetadata() in 'use client';.

In a gist, I learned that I could put all the SEO-related metadata into layout.tsx (the layout essentially doesn't add any markup), and the page.tsx would load whatever styling I need it to load and for me to be able to use the client directive as well.

Genius.

I wonder why this isn't documented in the official documentation (more so the usage of [...not_found] folder).

fiizzy Oct 31, 2024

I don't know if I understand your problem very well. But I will explain how to implement a not-found page according to the documentation.

create your file in this path like this

the page.jsx
import Link from 'next/link'
 
export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
      <Link href="/">Return Home</Link>
    </div>
  )
}
then, if I put abcd in the route

If that's not what you need, please. Please provide more details about your problem so I can try to help you.

thanks, the [...not_found] folder convention worked for me. It's absolutely frustrating that there's no reference to how to properly structure the not-found page in the app router. They only mention creating the file which doesn't work.

icyJoseph · 2024-02-08T20:24:53Z

icyJoseph
Feb 8, 2024
Collaborator

@abdulvahidkp you can use a route group to escape the layout, a catch all route, with a page calling notFound, a new layout and a not-found page.

All of which is necessary to properly respond with 404 and exclude the 404's from the main layout.

In the (not-found)/layout.tsx you'd skip rendering the NewsLetter component.

2 replies

abdulvahidkp Feb 9, 2024
Author

Thank you for your suggestion and your time in addressing my concern. While the approach you've outlined would work effectively for static routes, my application primarily consists of dynamic routes, such as /blog/[slug].

In the scenario where a user navigates to a non-existent Blog post, like/blog/notValidSlug , the application won't redirect them to the 404 page within the route group. Instead, it defaults to Next.js's default 404 page, bypassing the custom handling within the route group.

As a result, the issue persists in this scenario. I appreciate your input and am still seeking a solution that accommodates both static and dynamic routes, ensuring the exclusion of the NewsLetter component on the 404 page.

icyJoseph Feb 9, 2024
Collaborator

Hi,

There's one way but it is a hack... Please use it as last resort... Say you have this:

// app/blog/[slug]/not-found.tsx

import { blogNotFound } from "./custom-blog-404"; 
// To prevent people from just copy pasting code
// and misusage of this hack, I am not pasting the code for this `blogNotFound` function

export default function NotFound() {
  blogNotFound();
}

Then in your layout:

// layout.tsx

// other imports

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <BlogErrorBoundary>
          <NewsLetter />
          {children}
        </BlogErrorBoundary>
      </body>
    </html>
  );
}

So, in your blog entry, when you call notFound to trigger the not-found route, where we throw again, and catch that at the root layout level with a boundary which we use to render fallback UI. You'd still get the 404 error code IIRC.

One MAJOR PROBLEM with this HACK, is that it needs JavaScript client side to render the UI, but IIRC, notFound has the same issue.

One MINOR issue, is that this will trigger the Dev Error Overlay.

So you need to implement a BlogErrorBoundary from https://legacy.reactjs.org/docs/error-boundaries.html, https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary, and within your /blog/[slug]/not-found.tsx you need to throw an error, that you capture at BlogErrorBoundary ~ talk about absolute hacks... 🤔

Almost didn't want to share this one but, here ya go.

rimoslav · 2024-03-03T19:03:05Z

rimoslav
Mar 3, 2024

Hi @abdulvahidkp, there's a solution to your issue, using route groups.
I want to shout out @shriekdj for providing the solution, I've only did some adjustments and simplifactions.

Move your all of your pages to a directory named app/(content) (for those that aren't familiar with route groups, choose a dir name you wish instead of content but keep parenthesis around it. Directory name is not important and only affects import paths). Keep app/layout.tsx and app/not-found.tsx where they are.

Keep everything you already have in your root app/layout.tsx layout file except for <NewsLetter /> component:

const Layout = async ({ children }: { children: React.ReactNode }) => {

  return (
    <html lang={"en"} className={`${sora.variable} ${inter.variable} ${paytoneOne.variable}`}>
      <body>
          <Header />
          {children}
          <Footer />
      </body>
    </html>
  );
};

Create app/(content)/layout.tsx file and place <NewsLetter /> in there:

const Layout = async ({ children }: { children: React.ReactNode }) => {

  return (
    <>
        {children}
        <NewsLetter />
    </>
  );
};

Now you have two layouts wrapping the whole app but NextJS will only render the parent layout (app/layout.tsx) until it realises it's a 404 route and not proceed to render the other layout (app/(content)/layout.tsx) which contains the rest of the app.

2 replies

shriekdj Jun 13, 2024

@rimoslav , thanks for the shout out

Shreykr Jun 23, 2024

@abdulvahidkp can you check out this example and let us know if this is the solution you are looking for?

Thanks to @shriekdj and @rimoslav for explaining things, this is just an example I was trying out based on the situation that came up when I was trying to use dynamic routes.

codesandbox_dynamic_not_found

programmerbanna · 2024-04-25T02:08:25Z

programmerbanna
Apr 25, 2024

Hi @rimoslav,
I think you didn't understand the proper concept. Let's look at my below some pictures and each of analysis:

in this picture in my root layout or under app/layout.tsx file I keep my and rest of the application {children}.

Now, I want to hide that Sidebar in app/not-found.tsx as like below:

there is no sidebar here because conditionally I write some logic under Sidebar.tsx using usePathname hooks that if match app url/not-found so it's perfectly working as it should.

The problem starts here: now consider I move to any route that does not exist then the sidebar not hide like below:

See in this picture that I wrote a dummy route that doesn't exist but the behavior of the sidebar is not the same.

The main thing is, I wanted to keep my Sidebar hidden for some specific routes either dynamic or static but in some case that doesn't work as I have shown.

I think same as for other dynamic routes that not working that is what @abdulvahidkp wanted to mention.

2 replies

shriekdj Jun 13, 2024

For Your Case You can do this
for app/layout.tsx

export default RootLayout({children}: {children: React.ReactNode}) => {
  return <>{children}</>
}

Now Create a Route Group Folder.

then create your site in this folder with your Sidebar Just like above layout page but at this path app/(my_website)/layout.tsx which will contain your nav, sidebar footer and the children and all routes should be in that folder.

Now For the app/not-found.tsx

You can add whatever you want because it is loading the Layout from app/layout.tsx not the app/(my_website)/layout.tsx.

Here also the word my_website is not mandatory you can name it whatever you want.

For Example I Created this Site With Multiple Layout Both have different navbars and footers.
Homepage : https://www.indiacom.com/
Blogpage : https://www.indiacom.com/indiacom-blog

rimoslav Dec 4, 2024

Hi @programmerbanna

I know it's been a long time since your comment but someone else might find this discussion useful.
I understood you and the solution I've provided should solve your problem.
It might look odd because it relies on NextJS way of handling files in their file system, but actually splitting root Layout into two files, one being /app/layout.tsx and another one being /app/(any-name-in-parentheses)/layout.tsx, and putting <Sidebar /> component in the second one will solve you problem completely, because NextJS will not get to rendering it once you hit a 404 page, so only the /app/layout.tsx Layout file will be rendered.
The important part is to also put rest of the app inside /app/(any-name-in-parentheses)/ so all the other pages do get to render <Sidebar />.

NiicooR · 2024-06-05T15:54:43Z

NiicooR
Jun 5, 2024

hey @abdulvahidkp, It's been a while since you've opened this discussion. Did you find a way to solve this issue? or any workaround?

I'm facing a similar situation with a breadcrum component in my general layout. I want to hide it if I'm not in a specific page or when Nextjs identifies that it must shows the fallback page (not-found page)

4 replies

NiicooR Jul 10, 2024

I've solved my problem using useSelectedLayoutSegment or useSelectedLayoutSegments which are Client Component hooks that lets you read the active route segment one or more level below the Layout it is called from (using app router).
In my case when I identify the "__DEFAULT__" segment I don't render the breadcrum component. I hope this helps you solving your issues!
Happy coding! 🚀 👨‍💻

nikhil-unilode Jul 11, 2024

So, based on your solution, is this the correct code sample? Are there any drawbacks to using the hook?

/app/layout.tsx

const segment = useSelectedLayoutSegment()
<div>
                  {segment !== "__DEFAULT__" ? 
                      <main>
                          <Box minH="100vh" w={"100%"}>
                              <NavSideMenu />
                              <ContentArea>{children}</ContentArea>
                          </Box>
                      </main>
                  :
                      children 
                  }
</div>

NiicooR Jul 11, 2024

I'm not sure what you have to do but you can debug the segment value while you are navigating your web page to check if __DEFAULT__ value is what you really need.
In my case yes and since I implemented it I have no drawbacks. Good luck!

nikhil-unilode Jul 25, 2024

@NiicooR I tried the hook and it's working in development, but the build deployed in the server is not working as expected. so when console the segment got value as null, here are more values getting other routes

URL: domain.com/home
segment=========> null

URL: domain.com/not-exist
segment=========> null

URL: domain.com/blog/first-blog
segment=========> blog

URL: domain.com/blog/not-exist
segment=========> null

WillsWebsites · 2024-06-13T05:29:32Z

WillsWebsites
Jun 13, 2024

Similar issue for me. Need to detect if i'm on not found or server error page to hide some stuff in my footer conditionally.

0 replies

WillsWebsites · 2024-06-13T05:56:09Z

WillsWebsites
Jun 13, 2024

I found a kinda stupid way to handle this but I'm not content with it. On my not-found.tsx page I added notFound to the search params. I was getting some infinite reloads with router.push so maybe need it in a useEffect and guard like I have:

`'use client'

import type { Metadata } from 'next'
import Link from 'next/link'
import { usePathname, useRouter, useSearchParams } from 'next/navigation'
import { Button, Container, Section } from '/components'
import { useHeaderFooterHeights } from '/hooks'

export const metadata: Metadata = {
title: '404 Not Found',
robots: { index: false, follow: false }
}

const createQueryString = (name: string, value: string) => {
const params = new URLSearchParams()
params.set(name, value)
return params.toString()
}

export default function NotFound() {
const router = useRouter()
const pathname = usePathname()
const searchParams = useSearchParams()

if (!searchParams.has('notFound')) {
router.push(pathname + '?' + createQueryString('notFound', 'true'))
}

return (

404 - Not Found

Sorry, the page you are looking for can not be found

Return Home

)
}`

Then I just used that conditionally render something in my footer doing something like this:

const searchParams = useSearchParams() const showAccentTriangle = !searchParams.has('notFound')

Hoping somebody can find a better way. Seems like there should be some global state to access if we are on 404 or 500 page. I feel like I rembmer there was a way with previous next version.

0 replies

nikhil-unilode · 2024-07-02T15:30:12Z

nikhil-unilode
Jul 2, 2024

I'm also facing the same issue now, looking for a better approach. It would be great if somebody suggests a good fix for this issue. I have for you below my sample code of the root layout file it has a common header and side menu components that should load every page except 404 because the 404 page doesn't need to load the header and side menu according to my design.

app/layout.tsx

"use client";
import React from "react";
import { Box } from "@chakra-ui/react";
import { Providers } from "./providers";
import Header from "../components/header"; 
import NavSideMenu from "../components/nav/nav-side-menu"; 
import ContentArea from "../components/layout/content-area";

export default function RootLayout({ children }: { children: React.ReactNode }): React.JSX.Element { 
    return (
        <html lang="en">
            <body>
                <Providers>
                    <main>
                        <Header/>
                        <Box minH="100vh" w={"100%"}>
                            <NavSideMenu />
                            <ContentArea>{children}</ContentArea>
                        </Box>
                    </main>
                </Providers>
            </body>
        </html>
    );
}

5 replies

Shreykr Jul 2, 2024

Hey Nikhil, based on a few answers here I just made a small example to make sense of how things work based on the folder structure. Do let me know if this is the solution you are looking for.

https://codesandbox.io/p/devbox/nextjs-example-kgk7m9?file=%2Fapp%2F%28default_site%29%2F%5B...not_found%5D%2Fpage.tsx%3A6%2C1

nikhil-unilode Jul 2, 2024

Hello @Shreykr thanks for the quick reply and solution, do let me know why we keeping (default_site) and [...not_found] folder inside the app folder? here below is my app tree structure. is it possible to change my existing structure to the new structure?

app/
  ├── layout.tsx             // Main layout with NavSideMenu
  ├── page.tsx               // Home page
  ├── not-found.tsx          // 404 page
  ├── services/              // Services directory
  │   ├── mobile-app/        // Mobile app service
  │   │   └── page.tsx       // Mobile app page
  │   ├── web-app/           // Web app service
  │   │   └── page.tsx       // Web app page
  ├── contact-us/            // Contact Us directory
  │   └── page.tsx           // Contact Us page
  ├── providers.tsx          // Providers component

Shreykr Jul 3, 2024

(default_site) acts as a route group. We have page.tsx here that was previously present in the /app folder. This acts like the starting page of your project using the layout.tsx you specify in this folder.

The layout.tsx present in the /app folder will be used for the not-found.tsx page that is in /app folder as well.

We are moving the not-found.tsx to app folder and using a "catch all route" like [...not-found] so that it will act like a global 404 page for you app.

In your case, you can

remove the page.tsx in /app
add this to a route group, say /app/(home).
In the (home) route group you now have page.tsx, layout.tsx(newly added), /contact-us/page.tsx
Then there is a (services) route group with mobile-app.tsx and web-app.tsx
Use the catch all route [...not-found] as its in the example

nikhil-unilode Jul 3, 2024

thanks for the detailed explanation @Shreykr, I wonder why there is so much complication in handling a 404 page compared to a regular page route. Is there any hooks or props available to identify the page is not found, so I can easily modify my existing root layout page simply below. Could you share your thoughts on this?

export default function RootLayout({ children }: { children: React.ReactNode }): React.JSX.Element { 

    const {pageExist} = useRouter();
    return (
        <html lang="en">
            <body>
                <Providers>
                <main>
                    {pageExist  ? (
                        children
                    ) : (
                        <Box minH="100vh" w={"100%"}>
                            <NavSideMenu />
                            <ContentArea>{children}</ContentArea>
                        </Box>
                    )}
                </main>
                </Providers>
            </body>
        </html>
    );
}

Shreykr Jul 3, 2024

Using hooks in your layout would mean you have to make this a client component using "use client", and making a layout file a client component is not the preferred way. After creating the catch all route like the [...not_found] you just call the notFound() in that to redirect to the not_found.tsx that is in /app. This will use the layout.tsx (without the nav/header for example) in /app, while the page.tsx in the route group, say (home) will use the layout.tsx in there

nikhil-unilode · 2024-07-03T05:30:05Z

nikhil-unilode
Jul 3, 2024

I attempted to resolve the issue using a tricky hack. I styled the parent div of the 404 page with "position: fixed" and a background color fill to hide common components behind the 404 page, such as the header and sidebar. In my situation, the 404 page design is a full-page design that only displays related content for when a page is not found. Below is a sample of the code:

<Box pos={"fixed"} inset={0} w={"100%"} h={"100%"} backgroundColor="brand.greys.light">
      <h1>404 - Page Not Found</h1>
      <p>Sorry, the page you are looking for does not exist.</p>
      <Link href="/">
        Go back home
      </Link>
    </Box>

0 replies

EveraldoGCH · 2024-08-13T01:36:41Z

EveraldoGCH
Aug 13, 2024

Here is a solution that i found and works properly:
In my src/app/[not-found]/page.tsx

I have this:

import { redirect } from "next/navigation";

export default function NotFound() {
redirect("/404");
}

So now in your main layout component you can check if you are on 404 route and only show children
Example:

if(route === 404){
return <>{children}</>
else{
return

{children}
}

I hope i can help someone!

0 replies

CiobanuMarius9 · 2024-09-10T12:08:07Z

CiobanuMarius9
Sep 10, 2024

I am trying for months to find a good fix for this.

The main problem for me is this [...not-found]/page.js, SEO wise all the invalid routes return a 200 because the not-found catch all route is a valid route, this causes Soft 404 errors on google search console.

Removing the catch all route will result in only redirecting to not-found.js when calling notFound() which won't cover all the cases so it will default to the black next js 404 page.

Did someone find a solution to use this workaround and also change the status code to 404 ?

import { notFound } from 'next/navigation';

export const metadata = {
robots: {
index: false,
follow: false,
},
};

export default function NotFoundDummy() {
notFound();
}

0 replies

Andy-Bartkiv-Accedo · 2024-09-15T00:28:33Z

Andy-Bartkiv-Accedo
Sep 15, 2024

My workaround for the issue:

Add app global state/context, i.e. AppContext.js

const [is404, setIs404] = useState(false);

Toggle is404 state inside not-found.tsx

    useEffect(() => {
       setIs404(true);
       return () => setIs404(false);
    }, []);

Get is404 from app global state/context wherever you need it.

3 replies

abdulvahidkp Nov 1, 2024
Author

This is how I handled it at the time, using this above trick I got from my senior dev, and it worked well. I've noticed a lot of answers here in the Q&A, with some suggestions about using a dynamic [...notfound] page. It seems that many didn't fully understand what I was asking, so apologies if my original wording was unclear. I'm marking this as the answer.

just2102 Apr 7, 2025

you do realize this makes your whole app switch to client-side rendering?

just2102 Apr 7, 2025

also, it won't work if you need to know the route is 404 before rendering layout

phil-sola · 2024-12-16T16:47:45Z

phil-sola
Dec 16, 2024

This feels like something the framework should handle and provide tbh.

like someone commented above I am using useSelectedLayoutSegments, but it doesn't actually help with 404 / not-found page.

pathname, segments etc... none of these include this information which is fairly important for many scenarios I would imagine.

Is there any chance of getting this added to the framework?

0 replies

how to know if the app is on the not found page in nextjs 14 app router #61823

Uh oh!

Summary

Additional information

Example

Replies: 13 comments · 21 replies

Uh oh!

Uh oh!

abdulvahidkp Feb 9, 2024 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

icyJoseph Feb 8, 2024 Collaborator

Uh oh!

abdulvahidkp Feb 9, 2024 Author

Uh oh!

icyJoseph Feb 9, 2024 Collaborator

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

404 - Not Found

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 13 comments 21 replies

abdulvahidkp Feb 9, 2024
Author

icyJoseph
Feb 8, 2024
Collaborator

abdulvahidkp Feb 9, 2024
Author

icyJoseph Feb 9, 2024
Collaborator