Fill the field immediately after reloading the page



I have search page in my NextJS application. URL example - /search?q=Naaarutoo. And for example after reloading I just want to set "Naaarutoo" as the input value (I know how to set query param to input value) IMMEDIATELY.

If we look closer we will see that field didn't fulfilled:

enter image description here

I think this is because the server side returns simple HTML to client and only after that starts client side execution. Correct me if I'm wrong.

import React from 'react'
import {Formik, Form, Field} from 'formik'

const Search = ({router: {query}}) => (
<Formik enableReinitialize onSubmit={() => {

}} initialValues={{q: query.q || ''}} render={() => (
<Field name='q' type="search" placeholder="Find something"/>

export default withPageRouter(Search) //withPageRouter shown below ▼


I use this wrapper to get query:

import React from "react"
import {withRouter} from "next/router"
import queryString from "query-string"

const withPageRouter = Component => withRouter(({router, ...props}) => {
router.query = queryString.parse(router.asPath.split(/\?/)[1])

const page = () => {
return <Component {...props} router={router}/>

if (Component.getInitialProps) {
page.getInitialProps = Component.getInitialProps(router)

return page()

export default withPageRouter

Also when I try to use getInitialProps — it doesn't fire:

Search.getInitialProps = ctx => {
console.log(ctx) // <== doesn't work
return ctx

I think this is because I have the wrong HOC getInitialProps

Update 1.1:

I passed router togetInitialProps from HOC (withPageRouter) and now it works, but the main problem is still alive.

Search.getInitialProps = ({query}) => {
return {query}

Continue reading...