Next.js Discord

Discord Forum

Set body/html class name from nested layout

Unanswered
Harlequin posted this in #help-forum
Open in Discord
HarlequinOP
Is it possible to overwrite the body/html class names from a nested layout?

Eg. Dashboard layout sets some body classes that aren't needed on all pages, and Authentication layout sets others that aren't needed for default or dashboard.

19 Replies

HarlequinOP
Not sure how I missed this, thanks @Ray !
HarlequinOP
How should not-found be handled now? I moved it into the (dashboard) group but now it doesn't render the right 404 page. Any tips?
app/not-found
app/(dashboard)/not-found
it will use the nearest one
HarlequinOP
@Ray I get this error when I put the not-found in the root " ⨯ not-found.tsx doesn't have a root layout. To fix this error, make sure every page has a root layout."
That's what the folder structure looks like
HarlequinOP
@Ray any ideas on the above, any help is greatly appreciated!
have you tried to move app/not-found.tsx to app/(authentication)/not-found.tsx
HarlequinOP
Yes, that then meant that a request like /anything would return the default nextjs 404 instead of a custom one.
create one inside app/(authenticated)
app/not-found
app/(dashboard)/not-found
app/(authenticated)/not-found
HarlequinOP
That appears to still trigger the error about not having a root layout.
HarlequinOP
@Ray any ideas? Should I lodge a bug request on GitHub maybe?
wait let me try real quick
ok so app/not-found.tsx will handle all unmatch url and the one inside the page only handle when you call notFound inside the page
HarlequinOP
The app/not-found throws an error for me unless I specify a root layout, which if I want to use multiple root layouts for dashboard & authentication, it doesn't work.
seem like it has some issue with multiple root layout