override `<html>` w/ another in layouts
Answered
American black bear posted this in #help-forum
American black bearOP
<html lang="en">
<head>
<meta charSet="UTF-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Auxilium</title>
</head>
<body>
<AuthContext>{children}</AuthContext>
</body>
</html> <html className="h-full bg-aux-dark-blue">
<body className="h-full">{children}</body>
</html>Answered by B33fb0n3
then you can do something like:
app/
- layout (root layout)
and so other stuff with route groups: https://nextjs.org/docs/app/building-your-application/routing/route-groups
app/
- layout (root layout)
and so other stuff with route groups: https://nextjs.org/docs/app/building-your-application/routing/route-groups
41 Replies
which dir do you use?
American black bearOP
app dir
why don't you use the build in functions for meta and the head part from nextjs?
American black bearOP
good question
thought they got removed or smth
i guess i was mistaken
you could easily done all the functiotnality you now provided with layouts
American black bearOP
well yes this is in
layout.jsxboth of these
American black bearOP
in their example they use these tags so
then you can do something like:
app/
- layout (root layout)
and so other stuff with route groups: https://nextjs.org/docs/app/building-your-application/routing/route-groups
app/
- layout (root layout)
and so other stuff with route groups: https://nextjs.org/docs/app/building-your-application/routing/route-groups
Answer
@American black bear jsx
<html lang="en">
<head>
<meta charSet="UTF-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Auxilium</title>
</head>
<body>
<AuthContext>{children}</AuthContext>
</body>
</html>
this is in my root layout
jsx
<html className="h-full bg-aux-dark-blue">
<body className="h-full">{children}</body>
</html>
and this is the layout i want to override it with
Couldn't you just apply this class to the next parent, instead of the html tag? Like an enclosing div
American black bearOP
in the first link you sent
@Marchy Couldn't you just apply this class to the next parent, instead of the html tag? Like an enclosing div
American black bearOP
so use
div instead of html and body?Yeah, you shouldn't touch html and body if you can avoid it
other than defaults
The root layout must define <html> and <body> tags since Next.js does not automatically create them.
American black bearOP
<meta charSet="UTF-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />can't seem to find equivalents for these
in the metadata object
hold on nvm
turns out they're included by default
except the x-ua-compatible one
@American black bear turns out they're included by default
I was about to say lol
me too xD
@American black bear except the x-ua-compatible one
considering IE is no longer supported, do you need this?
American black bearOP
there's definitely some guy out there that still uses it lol
but yeah i guess that makes sense
ok styling a
div instead of html breaks the styling@American black bear ok styling a `div` instead of `html` breaks the styling
you'd probably need to shift some things around, idk if it'd be a drop-in
American black bearOP
yup the tailwind template i use says this
actually nvm fixed
if you change it to
h-screen insteadnot sure if this is going to bite me in the butt, but
nothing is more permanent than a temporary solution
I usually just do this in my global.css
* {
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
height: 100%;
background-color: black;
}
body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
float: left;
width: 100%;
}American black bearOP
pog
tysm for the help!