Custom Documents
In a Next.js application, you can use the Document component to render custom HTML that will be used for your pages.
By creating a file in the pages directory called _document.js, you can render custom HTML that will override the default HTML that Next.js generates.
To see this in action, we'll create a _document.js file in the pages directory and add the following code:
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>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument