How to use the next/router.withRouter function in next

<div style="{{">
            <small>
              
                <a>See my other posts →</a>
              
            </small>
          </div>
        
      
    
  )
}

export default withRouter(Layout)

// Styles
const Wrapper = styled.div`
  --heading-font: 'IBM Plex Sans', 'IBM Plex Serif', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    'Open Sans', 'Helvetica Neue', sans-serif;

  font-size: 20px;
  line-height: 1.62;
  letter-spacing: -0.007em;
  color: #333;

  word-break: break-word;
  word-wrap: break-word;

  margin-bottom: 160px;

}

TableBody.propTypes = {
  voies: PropTypes.array.isRequired,
  wrapped: PropTypes.bool,
  router: PropTypes.shape({
    push: PropTypes.func.isRequired,
    query: PropTypes.object.isRequired
  }).isRequired
}

TableBody.defaultProps = {
  wrapped: false
}

export default (withRouter(TableBody))

)}
        
      
    );
  }

  public handleClick = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  public handleClose = () => {
    this.setState({ anchorEl: null });
  };
}

export default withRouter(MenuWithLinks);

)}
                <p></p>
              
            )}
          
          <i>
            This data is initially loaded server-side, then client-side when navigating prev/next.
          </i>
        
      
    )
  }
}

export default withRouter(Hello)

)}
              
            
          )}
        
      )}
    
  );
};

DiscoverPage.propTypes = {
  router: PropTypes.object,
  intl: PropTypes.object,
};

export default withRouter(injectIntl(DiscoverPage));

)
}

MyApp.getInitialProps = async (context: NextAppContext) => {
  if (!(process as any).browser) {
    const initialModels = await getInitialState()
    return { initialModels }
  } else {
    return { initialModel }
  }
}

export default withRouter(MyApp)

changeURLParams({ remove: ['profile'] })} />
        
      
    );
  }
}

export default withRouter(UserBlockWithoutRouter);

await this.userService.submitPrivateFeedback({
          toUserId: values.userId,
          comment: values.comment,
        });
        this.props.form.resetFields();
        message.success('Your feedback has been submitted.');
        this.setState({ isLoading: false });
      } catch (e) {
        message.success('An error occured. Please try later.');
        this.setState({ isLoading: false });
      }
    });
  };
}

export default withRouter(withSession(Form.create({ name: 'privateFeadback' })(PrivateFeedbackPage)));

}
    return () => {
      if (router) {
        router.events.off('routeChangeComplete', handleRouteChange)
      }
    }
  })
  const handleRouteChange = () => setInitialRender(false)
  return (
    
      {children}
    
  )
}

export default withRouter(GlobalContextProvider)

`}
          
        
        
          
            
              
            
          
        
      
    );
  }
}

export default withRedux(createStore)(withReduxSaga({ async: true })(withRouter(NextApp)));