Theo's Typesafe Cult•16mo ago

Custom 404 page with multiple layouts

Hi all!, i'm just trying to create a custom 404.tsx in pages router with custom layouts, one with SiteLayout and another with DashboardLayout, but i'm getting an error in the server having different render from client when i use asPath from useRouter to check if i'm in the dashboard. any help ??

import type { NextPage } from "next";
import Link from "next/link";
import { useRouter } from "next/router";
import { Button } from "~/components/ui/Button";
import SiteLayout from "~/layouts/Site";

const NotFound: NextPage = ({}) => {
  const { asPath } = useRouter();
  if (asPath.includes("dashboard")) {
    return <SiteLayout>Dashboard 404</SiteLayout>;
  }

  return (
    <SiteLayout>
      <main className="grid min-h-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8">
        <div className="text-center">
          <p className="text-base font-semibold text-[#0080ff]">404</p>
          <h1 className="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">
            Page not found
          </h1>
          <p className="mt-6 text-base leading-7 text-gray-600">
            Sorry, we couldn’t find the page you’re looking for.
          </p>
          <div className="mt-10 flex items-center justify-center gap-x-6">
            <Button>
              <Link href="/">Go back home</Link>
            </Button>
            {/* <a href="/" className="text-sm font-semibold text-gray-900">
              Contact support <span aria-hidden="true">&rarr;</span>
            </a> */}
          </div>
        </div>
      </main>
    </SiteLayout>
  );
};
export default NotFound;

import type { NextPage } from "next";
import Link from "next/link";
import { useRouter } from "next/router";
import { Button } from "~/components/ui/Button";
import SiteLayout from "~/layouts/Site";

const NotFound: NextPage = ({}) => {
  const { asPath } = useRouter();
  if (asPath.includes("dashboard")) {
    return <SiteLayout>Dashboard 404</SiteLayout>;
  }

  return (
    <SiteLayout>
      <main className="grid min-h-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8">
        <div className="text-center">
          <p className="text-base font-semibold text-[#0080ff]">404</p>
          <h1 className="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">
            Page not found
          </h1>
          <p className="mt-6 text-base leading-7 text-gray-600">
            Sorry, we couldn’t find the page you’re looking for.
          </p>
          <div className="mt-10 flex items-center justify-center gap-x-6">
            <Button>
              <Link href="/">Go back home</Link>
            </Button>
            {/* <a href="/" className="text-sm font-semibold text-gray-900">
              Contact support <span aria-hidden="true">&rarr;</span>
            </a> */}
          </div>
        </div>
      </main>
    </SiteLayout>
  );
};
export default NotFound;

21 Replies

sean•16mo ago

What does your folder structure look like?

Casal0xOP•16mo ago

sean•16mo ago

And you want to have different error pages, depending if you are on /dashboard or on the main route?

Casal0xOP•16mo ago

different layout its that bad ?

sean•16mo ago

No, it isn't bad xD Instead of doing how you did, did you think about doing something among the lines of:

return (
  <YourLayout>
  {asPath.startsWith("/dashboard") ? <Dashboard404/> : <Default404/> }
  </YourLayout>
)

return (
  <YourLayout>
  {asPath.startsWith("/dashboard") ? <Dashboard404/> : <Default404/> }
  </YourLayout>
)

P.S. There's nothing more annoying than a react hydration error, I absolutely hate those

Casal0xOP•16mo ago

same error :S

steakfisher•16mo ago

are u using the app router? if u are, try importing from next/navigation instead of next/router ur error is caused because ur client realizes dashboard is included in ur url (hence the if condition returns true) but ur server decides its false fsr.. Which leads me to believe it has something to do with the router Looking at the nextjs docs and comparing I noticed the import statement.. so it COULD be the solution?

Casal0xOP•16mo ago

no no i'm using pages

steakfisher•16mo ago

can u try console logging asPath before the if statement?

Casal0xOP•16mo ago

is not making any difference if it comes from navigation or router :S yes i logging in backend /404 and in browser /dasgdsfsda

steakfisher•16mo ago

ye nah.. navigation is an app router thing.. wait what

Casal0xOP•16mo ago

the thing is 404 works different that normal pages so it first render in backend

steakfisher•16mo ago

ye thats cuz its a server component hold up.. so its logging 404 in the server and dashboard in the browser?

Casal0xOP•16mo ago

also it can't have getstaticprops or getserversideprops yes

steakfisher•16mo ago

k so thats the problem.. lemme see how we can fix that wait can u explain WHY it does that? do u know why..? y does the server think the user is on 404 while the client thinks its on dashboard? also theres a decent chance a "use client" at the top MAY fix ur issue.. but not sure tho

Casal0xOP•16mo ago

i think as it renders the 404.tsx he knows that is redireccting to it but when it renders he also thinks that is the other url not working "use client" in this case for pages router

Casal0xOP•16mo ago

steakfisher•16mo ago

good god lemme see if I can figure smth out.. k so apparently whats happening is U make a req for dashboard/blah, the server takes it, realizes the url doesnt exist, redirects u to /404 and then returns the html for 404 to the client But the client RECEIVING the html for that 404 page is still on dashboard/blah hence both of them have a different asPath, and hence the html returned by the server doesnt match the one being rendered on the client.. it can have getStaticProps btw

steakfisher•16mo ago

a VERY messy solution for this could be making dashboard a dynamic route.. so that it ACCEPTS any child routes.. but regardless of the child route u can return a Dashboard 404 thats the only solution I can think of tbh

Casal0xOP•16mo ago

i will try to find a solution but is not working meanwhile i think i will be a generir 404 for all types of pages just find the only solutions is stop using 404.tsx and use _error.tsx

Gaming

Programming

Custom 404 page with multiple layouts