I am using next js for a project and I have used chakra-ui with it. This is my _app.js:

import Layout, { ScrollBarStyle } from '../components/layouts/main'
import theme from '../lib/theme.js'
import Font from '../components/fonts'

const Website = ({ Component, pageProps, router}) => {

  const getLayout = Component.getLayout 

  return getLayout ? (
    getLayout(
    <ChakraProvider theme = {theme}>
    <Font/>
    <ScrollBarStyle/>
        <Component {...pageProps} />
    </ChakraProvider>) 
  ) : (
    <ChakraProvider theme = {theme}>
    <Font/>
    <ScrollBarStyle/>
     <Layout router={router}>
       <Component {...pageProps} />
    </Layout>
    </ChakraProvider>
  )
}

export default Website

And this is how I am routing:

<NextLink href = '/marketplace' passHref as = '/marketplace'>
        <a>
                <SiMarketo color = 'lightgrey' size = "27px"/>
        </a>
 </NextLink>

But the problem is it do changes the url but doesn't changes/render the respective page that is it remains at the same page.