In the app directory of Next.js, view the root layout as the index.html file when using Create React App or Vite. Your components should render there. This is why it's required and should define html and body tags, as the doc says:
The app directory must include a root app/layout.js.
The root layout must define <html> and <body> tags.
Also, any parent layout wraps all nested route layouts. If different parts of your application should be different, you can, using Routes Groups, create multiple root layouts:
To create multiple root layouts, remove the top-level layout.js file, and add a layout.js file inside each route groups. This is useful for partitioning an application into sections that have a completely different UI or experience. The <html> and <body> tags need to be added to each root layout.
In the example above, both (marketing) and (shop) have their own root layout.
You can, for example, replace marketing with general, and shop with auth. Side note, the naming of route groups has no special significance other than for organization. They do not affect the URL path.
Also, routes inside route groups should not resolve to the same URL path. For example, since route groups don't affect URL structure, (marketing)/about/page.js and (shop)/about/page.js would both resolve to /about and cause an error.
