Encountering an error on my blog page that states: Properly define charset Error! A character encoding declaration is required. It can be achieved with a
tag in the first 1024 bytes of the HTML or in the Content-Type HTTP response header. Find out more about declaring the character encoding.</p>
<p>Interestingly, I do not encounter this error on my index page or other pages despite having <code><meta charset="UTF-8" />Looking at my _document.js:
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html lang="ja">
<Head>
<meta charset="UTF-8" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
Interestingly, the error disappears when I reduce the amount of data returned from getserversideprops on my blog page. Could this be related to the Properly define charset error?
If so, I could return some data from the client side, but that might impact SEO.
How can I troubleshoot and resolve this issue?
After experimenting with reducing the amount of data fetched from the MySQL Database in getserversideprops, the error no longer persists.