Error: “MyDocument.getInitialProps()” should resolve to an object with a “html” prop set with a valid html string

My project is in https://github.com/Talita1996/NLW4

  1. I created a project with the command yarn create next-app project_name
  2. I changed the extension of some files and added some code
  3. I installed typescript with the command yarn add typescript @types/react @types/react-dom @types/node -D

On the first day everything worked fine, but today, when I call yarn dev I get the error:

enter image description here

Answer

in your page/_document you need to extend Document class

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

export default class MyDocument extends  Document {

static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }
    render() {
        return (
            <Html>
                <Head>
                    <link rel="preconnect" href="https://fonts.gstatic.com" />
                    <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected];500;600&family=Rajdhani:[email protected]&display=swap" rel="stylesheet" /> 
                </Head>
                <body>
                    <Main/>
                    <NextScript/>
                </body>
            </ Html>
        );
    }
}

Leave a Reply

Your email address will not be published. Required fields are marked *