Adding <title>
in pages/_document.js
will lead to unexpected results with next/head
since _document.js
is only rendered on the initial pre-render.
Set <title>
in pages/_app.js
instead:
// pages/_app.js
import App, { Container } from 'next/app'
import Head from 'next/head'
import React from 'react'
export default class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
let pageProps = {}
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}
return { pageProps }
}
render() {
const { Component, pageProps } = this.props
return (
<Container>
<Head>
<title>My new cool app</title>
</Head>
<Component {...pageProps} />
</Container>
)
}
}