<p dir="auto">Because of the way Next.js does initial render of the pages, and that the initial render on client-side and server-side has to be the same (see <a href="https://reactjs.org/docs/react-dom.html#hydrate" rel="nofollow">https://reactjs.org/docs/react-dom.html#hydrate</a> ), sometimes when a page is rendered, its' <code class="notranslate">query</code> (returned i.e. by <code class="notranslate">useRouter()</code> hook) will be empty, even though it actually has query params. After the initial render, soon after there will be another render in which the <code class="notranslate">query</code> will be then populated with proper query params. ( Example described also in i.e. <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="466425942" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/7880" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/7880/hovercard" href="https://github.com/vercel/next.js/issues/7880">#7880</a> )</p>
<p dir="auto">My code relies on those query params very heavily and we need to know "are those the real current query params or not yet?". (i.e. because if query params are missing or incorrect, we'd like to redirect the user to another page)</p>
<h2 dir="auto">Describe the solution you'd like</h2>
<p dir="auto">I think that either:</p>
<ul dir="auto">
<li><code class="notranslate">query</code> should be always populated with the current query params (even on initial client-side hydration that happens after a server-side render)</li>
<li>or, (IMO better), add a <code class="notranslate">ready: boolean</code> flag to <code class="notranslate">Router</code>, so the component can listen to this using i.e. <code class="notranslate">useEffect</code> and ignore the query params when they aren't parsed yet.</li>
</ul>
<h2 dir="auto">Describe alternatives you've considered</h2>
<p dir="auto">I think we'll have to go with some <code class="notranslate">setTimeout</code> or sth for now until a better solution is found.</p>
<p dir="auto">I have the following page:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { AppInterface } from './_app'
import { withRouter } from 'next/router'

class Page extends React.Component {

    static contextType = AppInterface

    render() {
        console.log( 'Router', this.props.router ); 
        return(
            &lt;p&gt;Booh!&lt;/p&gt;
        )
    }    

}

export default withRouter( Page )"><pre class="notranslate"><code class="notranslate">import { AppInterface } from './_app'
import { withRouter } from 'next/router'

class Page extends React.Component {

    static contextType = AppInterface

    render() {
        console.log( 'Router', this.props.router ); 
        return(
            &lt;p&gt;Booh!&lt;/p&gt;
        )
    }    

}

export default withRouter( Page )
</code></pre></div>
<p dir="auto">The console tells me that Router is undefined and shows this warning:</p>
<p dir="auto"><code class="notranslate">withRouter(Page) declares both contextTypes and contextType static properties. The legacy contextTypes property will be ignored.</code></p>
<p dir="auto">As soon as I comment out <code class="notranslate">static contextType = AppInterface</code>, the error disappears and the router gets logged just right...</p>