Menu
I want to ask how I can make a different custom layout for my 404 page. I want to make a 404 layout that is different from the root layout.tsx.
My problem is I am still getting the component (footer or nav buttons) from my root layout.tsx to my custom 404 layout.
Here's my directory setup:
/app
not-found.tsx
/components
/JFCLayouts
/JFCNotFound.tsx
// app/not-found.tsx
import Link from 'next/link'
import JFCNotFoundLayout from '@/components/JFCLayouts/JFCNotFound'
export default function NotFound() {
return (
<JFCNotFoundLayout>
<div className='text-center'>
<h2 className='text-3xl'>There was a problem.</h2>
<p>We could not find the page you were looking for.</p>
<p>Go back to the <Link href="/">dashboard</Link></p>
</div>
</JFCNotFoundLayout>
)
}
// components/JFCLayouts/JFCNotFound.tsx
'use client'
import React from 'react'
import '../../styles/globals.css'
import './style.css'
const JFCNotFound = ({
children,
}: {
children: React.ReactNode
}) => {
return (
<html lang="en">
<body suppressHydrationWarning={true}>
<div className="jfc not-found">
{children}
</div>
</body>
</html>
)
}
export default JFCNotFound
// app/layout.tsx
import { useEffect } from 'react'
import type { Metadata } from 'next'
import Head from 'next/head'
import '../styles/globals.css'
import { Footer } from '../components/Footer'
import JFCProvider from '../redux/JFCProvider'
export const metadata: Metadata = {
title: 'My App',
description: 'My App'
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<Head>
<meta http-equiv="ScreenOrientation" content="autoRotate:disabled" />
</Head>
<body suppressHydrationWarning={true}>
<JFCProvider>
{children}
<Footer />
</JFCProvider>
</body>
</html>
)
}
I added also the snippet for my root layout. As we can see I have created a blank layout for my 404 page but the footer on my root layout is still rendering.
500
asked Oct 23 '25 20:10
I also wanted to have a different layout for my not-found.tsx page and because I didn't found a "regular" way to do it, I had to use a work around.
My folder structure
app
├── (general)
│ ├── (home)
│ │ └── page.tsx
│ ├── legal
│ │ └── page.tsx
│ └── layout.tsx
│
├── [...not-found]
│ ├── layout.tsx
│ └── page.tsx
│
├── globals.css
└── icon.png
In (general) I put everything with the default layout.tsx which should apply for every page except for the 404 page.
For the 404 page I don't use a not-found.tsx file itself, I just catch every other path with [...not-found] and use it's own page and layout for it.
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
