Instead of custom not-found component, default 404 page renders
Answered
Satin Angora posted this in #help-forum
Satin AngoraOP
Unmatched URLs render the default
Here is the related project structure:
I tried to move the
Is it because of the location of the file? I am using the
404 page instead of the component inside not-found.tsx file. The component is simple, and doesn't accept any arguments, as per [docs](https://nextjs.org/docs/app/api-reference/file-conventions/not-found) say:export default function NotFound() {
return <div className="row">
<h1>404!</h1>
<FilledAnchor
href="/"
label="HOME"
trailingIcon={Icon.ArrowForward} />
</div>
}Here is the related project structure:
src/app/
[lang]/
error.tsx
loading.tsx
not-found.tsx
layout.tsx
page.tsxI tried to move the
not-found.tsx file to app folder, but I got an Root layout missing error.Is it because of the location of the file? I am using the
[lang] parameter in the root layout... If that is the case, how can I render a custom 404 page?Answered by Ray
yes move it to
app/not-found.tsx and create a root layout with below// app/layout.tsx
export default function RootLayout({ children }: { React.ReactNode }) {
return <>{children}</>
}1 Reply
@Satin Angora Unmatched URLs render the default `404` page instead of the component inside `not-found.tsx` file. The component is simple, and doesn't accept any arguments, as per [docs](https://nextjs.org/docs/app/api-reference/file-conventions/not-found) say:tsx
export default function NotFound() {
return <div className="row">
<h1>404!</h1>
<FilledAnchor
href="/"
label="HOME"
trailingIcon={Icon.ArrowForward} />
</div>
}
Here is the related project structure:
src/app/
[lang]/
error.tsx
loading.tsx
not-found.tsx
layout.tsx
page.tsx
I tried to move the `not-found.tsx` file to `app` folder, but I got an `Root layout missing` error.
Is it because of the location of the file? I am using the `[lang]` parameter in the root layout... If that is the case, how can I render a custom 404 page?
yes move it to
app/not-found.tsx and create a root layout with below// app/layout.tsx
export default function RootLayout({ children }: { React.ReactNode }) {
return <>{children}</>
}Answer