Layout: We cannot set <body className> with react/head

Which, I now realize, is something I debugged before for FixMyBerlin/trassenscout@daa28fd#diff-8e1ee4a53dc84447dceb573ab344784cf5674e1d50b1fbd6833320c6b6d7b856R17-R25. Side node: This will hopefully make this debugging easier in the future vercel/next.js#56412
FixMyBerlin · Oct 4, 2023 · 67521c6 · 67521c6
1 parent c0252fb
commit 67521c6
Show file tree

Hide file tree

Showing 2 changed files with 1 addition and 4 deletions.
diff --git a/src/core/layouts/LayoutMap.tsx b/src/core/layouts/LayoutMap.tsx
@@ -13,9 +13,6 @@ type Props = {
 export const LayoutMap: React.FC<Props> = ({ children }) => {
   return (
     <>
-      <Head>
-        <body className="fixed overflow-hidden" />
-      </Head>
       <MetaTags noindex />
 
       <div className="flex h-screen flex-col">

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -11,7 +11,7 @@ class MyDocument extends Document {
     return (
       <Html lang="de" className="h-full">
         <Head />
-        {/* Don't use <body className> since our layout expect some classes to be present always (which are in index.css) and other applied conditionally in LayoutMap.tsx. It looks like there is no easy way to merge classes using next/head. */}
+        {/* Remidner: With next/head we cannot add className via <html className> or <body className>. They will error with the false "next-head-count is missing" message */}
         <body>
           <Main />
           <NextScript />