i need an alternative for pages router {shallow:true}
#shallow routing in app router
neon grotto
jovial spadeBOT
Hi @neon grotto. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Currently, the shallow routing feature is only available in the Pages Router of Next.js. This feature allows you to change the URL without re-running data fetching methods like getServerSideProps, getStaticProps, and getInitialProps source (https://nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating#shallow-routing).
However, in the App Router, which is a newer router in Next.js, the shallow routing feature is not directly available. There is an ongoing discussion about this issue on GitHub, and the developers have mentioned that a solution is on the roadmap source (https://github.com/vercel/next.js/issues/49668).
As a workaround, some users have suggested using history.replaceState(null, "", url); to achieve similar functionality source (https://github.com/vercel/next.js/issues/49668). But please note that this is not an official solution and may not work in all cases.
For TypeScript users facing issues with the shallow property not existing in the NavigateOptions type, a workaround could be to augment the NavigateOptions type with the extra shallow prop source (https://github.com/vercel/next.js/issues/60007).
interface NavigateOptions {
shallow: boolean;
}