I have a next.js website with an app/ folder like so:
│ favicon.ico
│
├───(main)
│ │ layout.js
│ │ layout.module.css
│ │ not-found.js
│ │ page.js
│ │ page.module.css
│ │
│ └───ImageModal
│ ImageModal.js
│ ImageModal.module.css
│
├───dashboard
│ │ layout.js
│ │ page.js
│ │
│ ├───download
│ │ layout.js
│ │ page.js
│ │
│ └───settings
│ page.js
│
└───rendertune
layout.js
not-found.js
page.js
I want my (main) route to have its own 404 page which comes wrapped in the layout.js file, while the rendertune/ route has it’s own 404 page wrapped in it’s layout.js.
So if I visit a 404 page on the root route: http://localhost:3000/thisRouteDoesntExist I see (main)/not-found.js inside of (main)/layout.js
and if I visit http://localhost:3000/rendertune/thisRouteDoesntExist I see rendertune/not-found.js inside of rendertune/layout.js
but if I visit either 404 page, they all appear as the default 404 and my custom not-found.js files do not appear:
my (main)not-found.js looks like this:
import Link from 'next/link'
export default function NotFound() {
return (
<div>
<h2>(main) 404</h2>
<Link href="/">Return Home</Link>
</div>
)
}
and my rendertune/not-found.js looks like this:
export default function RenderTuneNotFound() {
return (
<div>
<h1>404 – RenderTune</h1>
</div>
);
}
