styling dissapearing from 404 page after switching to an existent page

Answered

Saltwater Crocodile posted this in #help-forum

Saltwater CrocodileOP

2024-05-18T00:36:55.129Z

hello! I'm having an issue where whenever i first start the site, and i load a non-existent page, the styling works fine. but as soon as i switch to a existent one and switch back to one that would render the 404 page, it has no styling anymore. how can i fix this?

Answered by Saltwater Crocodile

yeah i got it working with some weird workaround: https://stackoverflow.com/questions/76230464/next-js-13-remove-layout-for-specific-page

View full answer

22 Replies

Saltwater CrocodileOP

2024-05-18T00:37:17.311Z

here's the page with styling (first page loaded):

but after switching it looks like this:

not-found.tsx
import DefaultNotFound from '@/app/ui/default-not-found';

export default function NotFound() {
    return (
        <DefaultNotFound />
    );
}

/ui/default-not-found.tsx
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';

export default function NotFound() {
  return (
    <main className="flex h-screen flex-col items-center justify-center gap-4 -mt-8">
        <MagnifyingGlassIcon className="w-10 text-gray-400" />
        <h2 className="text-3xl font-bold text-gray-700">404 - Not Found</h2>
        <p className="text-lg text-gray-500">
            The page you requested could not be found. 
        </p>
        <Link href="/" className="inline-flex items-center px-4 py-2 rounded-md text-sm font-medium text-center text-white bg-blue-600 hover:bg-blue-700">
            Return Home
        </Link>
    </main>
  );
}

layout.tsx:
import '@/app/ui/global.css';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}