CODEWITHSUNDEEP
htmlnext.jshead
kminny
kminny

Reputation: 239

Nextjs using _document with head tag on each page

I am using Next.js with typescript for my web site and all the components that should be in <head> is at <body>.
I am using _document.tsx for google fonts and some other scripts.

pages/_document.tsx

import Document, { DocumentContext, Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx);

    return initialProps;
  }

  render() {
    return (
      <Html>
        <Head>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link rel="preconnect" href="https://fonts.gstatic.com" />
          <link
            href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
            rel="stylesheet"
          />
          <link
            href="https://fonts.googleapis.com/css2?family=Gothic+A1:wght@100;200;300;400;500;600;700;800;900&display=swap"
            rel="stylesheet"
          />
          <link
            href="https://fonts.googleapis.com/css2?family=Parisienne&display=swap"
            rel="stylesheet"
          />
          ...
        </Head>
        <body className="min-w-max">
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

pages/index.tsx

export default function Home() {
    return (
      <div>
        <Head>
          <title>title</title>
          ...
        </Head>

        ...
      </div>
    )
}

These are my _document.tsx and Home index.tsx and I get the result from DevTool element like down below.

devtool element

Like this image, eveything I set on Head both _document.tsx and index.tsx is in <body>. There are only some origin-trial meta tag that I didn't wrote in <head>.
Because of this, Warning: next-head-count is missing. error is triggered and I followed the steps next.js suggested, but nothing changed.

Any solution or idea for this?

Upvotes: 1

Views: 2586

Answers (1)

kminny
kminny

Reputation: 239

I made my <Head> tag as a component and used it in every page I got. Then I saw <html lang="en"> in it. This was causing all my script tags inside of <head> position to <body>. After removing it, all works fine.

[Solution]: Do not use <html> tag inside of <Head>

Upvotes: 1

Related Questions