Omit rendering Navbar component on 404 route

Answered

Cimarrón Uruguayo posted this in #help-forum

Cimarrón UruguayoOP

2023-12-25T10:20:06.000Z

In an app-router based next app, how does one check for an undefined route - i.e., /not-found being triggered?

Answered by Ray

create a route group and put not-found.tsx inside?
(without-navbar)/layout.tsx <-- not-found.tsx here
(with-navbar)/layout.tsx <-- <Navbar /> here

View full answer

120 Replies

Cimarrón UruguayoOP

2023-12-25T10:20:46.000Z

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className="h-full">
      <body className={cn(
        inter.className,
        "relative h-full font-sans antialiased"
      )}>
        <main className='relative flex flex-col min-h-screen'>
          <Navbar />
          <div className='flex-grow flex-1'>
            {children}
          </div>
        </main>
      </body>
    </html>
  )
}

I would like <Navbar /> to only be rendered for intended routes

Ray

2023-12-25T10:23:05.000Z

create a route group and put not-found.tsx inside?
(without-navbar)/layout.tsx <-- not-found.tsx here
(with-navbar)/layout.tsx <-- <Navbar /> here

Answer

@Ray create a route group and put `not-found.tsx` inside? (without-navbar)/layout.tsx <-- `not-found.tsx` here (with-navbar)/layout.tsx <-- `<Navbar />` here

Cimarrón UruguayoOP

2023-12-25T10:24:15.000Z

so two route groups?

Ray

2023-12-25T10:26:10.000Z

yes

or just one (with-navbar)

and leave not-found at root

Cimarrón UruguayoOP

2023-12-25T10:28:56.000Z

hmm i tried it another way

@Ray or just one (with-navbar)

Cimarrón UruguayoOP

2023-12-25T10:29:10.000Z

what about the root page.tsx having the Navbar component

because page.tsx will be part of the children in layout.tsx that get rendered right

Ray

2023-12-25T10:29:51.000Z

you don't need navbar in other page?

Cimarrón UruguayoOP

2023-12-25T10:30:27.000Z

ah crap true ðŸ˜…

@Ray and leave not-found at root

Cimarrón UruguayoOP

2023-12-25T10:31:11.000Z

does this just have to be an empty tsx file?

Ray

2023-12-25T10:32:58.000Z

no, you need to export a default component in it

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>
  )
}

something like this

@Ray ts 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> ) } something like this

Cimarrón UruguayoOP

2023-12-25T10:39:19.000Z

import React from 'react'
import ErrorPage from 'next/error'

const NotFound = ({ statusCode }: { statusCode: number }) => {
  return <ErrorPage statusCode={statusCode} />
}

export default NotFound

ill try this

Ray

2023-12-25T10:42:10.000Z

import ErrorPage from 'next/error'
does this work? I've never tried it

Cimarrón UruguayoOP

2023-12-25T10:43:10.000Z

but it complains that I don't have a layout.tsx in the root level

Ray

2023-12-25T10:44:29.000Z

you still need a root layout

Cimarrón UruguayoOP

2023-12-25T10:44:37.000Z

so when i added the layout.tsx (but removed navbar), it doesn't render the navbar

Ray

2023-12-25T10:44:42.000Z

the root layout should contain the html body tag

Cimarrón UruguayoOP

2023-12-25T10:44:57.000Z

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

import { cn } from '@/lib/utils'

import './globals.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'DigitalHippo',
  description: 'A platform of high quality digital assets',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className="h-full">
      <body className={cn(
        inter.className,
        "relative h-full font-sans antialiased"
      )}>
        <main className='relative flex flex-col min-h-screen'>
          <div className='flex-grow flex-1'>
            {children}
          </div>
        </main>
      </body>
    </html>
  )
}

root tsx

Ray

2023-12-25T10:45:17.000Z

it should call layout.tsx

@Ray it should call `layout.tsx`

Cimarrón UruguayoOP

2023-12-25T10:45:49.000Z

it is being called

(with-navbar)/layout.tsx isn't being called

Ray

2023-12-25T10:46:04.000Z

yes

app/layout.tsx
app/(with-navbar)/layout.tsx

Cimarrón UruguayoOP

2023-12-25T10:47:14.000Z

yes I have both

the second file doesn't seem to get rendered

Ray

2023-12-25T10:47:51.000Z

where is the page.tsx?

Cimarrón UruguayoOP

2023-12-25T10:48:03.000Z

app/page.tsx

Ray

2023-12-25T10:48:13.000Z

move it to (with-navbar)

Cimarrón UruguayoOP

2023-12-25T10:52:59.000Z

umm i get a hydration error now

Ray

2023-12-25T10:53:20.000Z

can you show the code in app/(with-navbar)/layout.tsx

Cimarrón UruguayoOP

2023-12-25T10:53:36.000Z

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

import { cn } from '@/lib/utils'
import Navbar from '@/components/nav/Navbar'

import '../globals.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'DigitalHippo',
  description: 'A platform of high quality digital assets',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className="h-full">
      <body className={cn(
        inter.className,
        "relative h-full font-sans antialiased"
      )}>
        <main className='relative flex flex-col min-h-screen'>
          <Navbar />
          <div className='flex-grow flex-1'>
            {children}
          </div>
        </main>
      </body>
    </html>
  )
}

Ray

2023-12-25T10:53:59.000Z

you don't need html, body, main tag here

Cimarrón UruguayoOP

2023-12-25T10:54:12.000Z

wait what

why

Ray

2023-12-25T10:54:23.000Z

just do

  <>
     <Navbar />
      <div className='flex-grow flex-1'>
        {children}
      </div>
  </>

because app/(with-navbar)/layout.tsx is nested in app/layout.tsx

check the page element and you will see

Cimarrón UruguayoOP

2023-12-25T10:55:51.000Z

alright let me have a look

Ray

2023-12-25T10:56:33.000Z

also, remove the css import in app/(with-navbar)/layout.tsx

import it in app/layout.tsx is fine

Cimarrón UruguayoOP

2023-12-25T10:56:58.000Z

and the metadata?

Ray

2023-12-25T10:57:27.000Z

hmm it depend

if you want to have different title

Cimarrón UruguayoOP

2023-12-25T10:57:49.000Z

actually yes i want the metadata

for all routes with navbar

Ray

2023-12-25T10:57:57.000Z

well but it should set on the page.tsx

ah ok

Cimarrón UruguayoOP

2023-12-25T10:59:18.000Z

Ray

2023-12-25T10:59:36.000Z

ah what did you change

Cimarrón UruguayoOP

2023-12-25T10:59:51.000Z

import type { Metadata } from 'next'

import Navbar from '@/components/nav/Navbar'

export const metadata: Metadata = {
  title: 'DigitalHippo',
  description: 'A platform of high quality digital assets',
}

export default function RootWithNavbarLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <Navbar />
      <div className='flex-grow flex-1'>
        {children}
      </div>
    </>
  )
}

app/(with-navbar)/layout.tsx

Ray

2023-12-25T11:00:14.000Z

try restart dev server

Cimarrón UruguayoOP

2023-12-25T11:00:21.000Z

app/layout.tsx

// import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

import { cn } from '@/lib/utils'

import './globals.css'

const inter = Inter({ subsets: ['latin'] })

// export const metadata: Metadata = {
//   title: 'DigitalHippo',
//   description: 'A platform of high quality digital assets',
// }

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className="h-full">
      <body className={cn(
        inter.className,
        "relative h-full font-sans antialiased"
      )}>
        <main className='relative flex flex-col min-h-screen'>
          <div className='flex-grow flex-1'>
            {children}
          </div>
        </main>
      </body>
    </html>
  )
}

ye i restarted

Ray

2023-12-25T11:00:52.000Z

still doesn't work?

Cimarrón UruguayoOP

2023-12-25T11:01:01.000Z

nope

is there a way to instead check the router for an unhandled route trigger

Ray

2023-12-25T11:01:59.000Z

I don't think so

can you show the directory structure?

@Ray can you show the directory structure?

Cimarrón UruguayoOP

2023-12-25T11:17:03.000Z

am i having an infinite loop somewhere

Ray

2023-12-25T11:17:54.000Z

well it should work

how about page.tsx?

or change not-found.tsx to something like this instead of the ErrorPage

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>
  )
}

Cimarrón UruguayoOP

2023-12-25T11:19:48.000Z

import Link from 'next/link'
import { ArrowDownToLine, CheckCircle, ShieldCheck } from 'lucide-react'

import { Button, buttonVariants } from '@/components/ui/button'

import MaxWidthWrapper from '@/components/standalone/MaxWidthWrapper'
import Perk from '@/components/standalone/Perk'

// omitted to save character count in discord
declare const perks: {
    name: string;
    Icon: LucideIcon;
    description: string;
}[]

export default function Home() {
  return (
    <>
      <MaxWidthWrapper>
        <div className="py-20 mx-auto text-center flex flex-col items-center max-w-3xl">
          <h1 className="text-8xl font-bold tracking-tight text-gray-900 md:text-6xl">
            Your marketplace for high quality {' '}
            <span className="text-blue-600">
              digital assets
            </span>
            .
          </h1>

          <p className="mt-6 text-lg max-w-prose text-muted-foreground">
            Welcome to DigitalHippo. Browse our platform of high quality assets verified by our team!
          </p>

          <div className="flex flex-col sm:flex-row gap-4 mt-6">
            <Link href="/products" className={buttonVariants()}>Browse Popular</Link>
            <Button variant="ghost">Our quality promise &rarr;</Button>
          </div>
        </div>
      </MaxWidthWrapper>

      <section className="border-t border-gray-200 bg-gray-50">
        <MaxWidthWrapper className="py-20">
          <div className="grid grid-cols-1 gap-y-12 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-3 lg:gap-x-8 lg:gap-y-0">
            {
              perks.map(({ name, Icon, description }) =>
                <Perk key={name} name={name} Icon={Icon} description={description} />
              )
            }
          </div>
        </MaxWidthWrapper>
      </section>
    </>
  )
}

Ray

2023-12-25T11:20:22.000Z

it looks fine

do you have middleware.ts?

Cimarrón UruguayoOP

2023-12-25T11:21:23.000Z

nope

Ray

2023-12-25T11:21:43.000Z

try different browser?

Cimarrón UruguayoOP

2023-12-25T11:22:15.000Z

no luck ðŸ¥²

it can't be this hard

Ray

2023-12-25T11:23:54.000Z

change not-found.tsx to _not-found.tsx

it keep redirecting you?

Cimarrón UruguayoOP

2023-12-25T11:25:10.000Z

https://nextjs.org/docs/app/api-reference/file-conventions/not-found

@Ray change `not-found.tsx` to `_not-found.tsx`

Cimarrón UruguayoOP

2023-12-25T11:25:46.000Z

wait WTF

THAT WORKED

Ray

2023-12-25T11:25:58.000Z

something wrong in not-found.tsx

@Cimarrón Uruguayo https://nextjs.org/docs/app/api-reference/file-conventions/not-found

Cimarrón UruguayoOP

2023-12-25T11:25:59.000Z

docs lying

@Ray or change `not-found.tsx` to something like this instead of the ErrorPage ts 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> ) }

Ray

2023-12-25T11:26:13.000Z

like i said

no, by adding a _ before it tell next to ignore it

Cimarrón UruguayoOP

2023-12-25T11:26:36.000Z

can i just delete the not-found file lol

i just wanted the default error page anyways

Ray

2023-12-25T11:26:47.000Z

yes then you don't have a custom 404 page lol

Cimarrón UruguayoOP

2023-12-25T11:27:15.000Z

ok i should have told you that from the beginnign ðŸ’€

my bad

Ray

2023-12-25T11:27:36.000Z

ah wait

your question is omit rendering navbar component on 404

Cimarrón UruguayoOP

2023-12-25T11:27:58.000Z

yeah

cos the problem was

Ray

2023-12-25T11:28:10.000Z

and you want the default one?

Cimarrón UruguayoOP

2023-12-25T11:28:16.000Z

layout.tsx will always render Navbar

so even if it was an error page, the navbar would still render

i just wanted to remove that from the error page

Ray

2023-12-25T11:28:42.000Z

@Ray and you want the default one?

Cimarrón UruguayoOP

2023-12-25T11:28:43.000Z

yes

Ray

2023-12-25T11:29:02.000Z

just delete not-found.tsx is what you need then lol

Cimarrón UruguayoOP

2023-12-25T11:29:05.000Z

thank you so much for the grouped route solution tho

Ray

2023-12-25T11:29:07.000Z

you don't need route group for it

Cimarrón UruguayoOP

2023-12-25T11:29:18.000Z

wait wh

Ray

2023-12-25T11:29:41.000Z

if you don't have a not-found.tsx, it will render the default one

Cimarrón UruguayoOP

2023-12-25T11:29:47.000Z

yes

but i need two different layout.tsx

Ray

2023-12-25T11:30:01.000Z

ah ok

then you can keep the route group

Cimarrón UruguayoOP

2023-12-25T11:30:09.000Z

yeah

thank you so much :)

Ray

2023-12-25T11:30:24.000Z

Cimarrón UruguayoOP

2023-12-25T11:30:59.000Z

ah yeah i was going to do that

thanks again