How to change <Main /> in next/document to <main /> instead of <div />?

[Pszz]

Summary

I wish it was more structured and semantic.

Rendering results

• Now

<div id="__next">
   <header>Website header</header>
   <header>Website content</header>
   <footer>Website header</footer>
</div>

• Expected expectations

<main id="__next">
   <header>Website header</header>
   <div>Website content</div>
   <footer>Website footer</footer>
</main>

Additional information

No response

Example

No response

[icyJoseph]

Hi,

Yeah I don't think this is possible in Pages Router,

next.js/packages/next/src/server/render.tsx

Line 1215 in 0b261f0

const Body = ({ children }: { children: JSX.Element }) => {

, it is part of a trend that existed back in the day, to mount your app at a div, often called root, etc.

Semantically, it shouldn't matter, though, your main tag can still live within the __next root div.

Alternatively, App Router, gives you 100% control over this, so you might want to consider that option.