{"id":378901,"date":"2023-05-01T04:29:45","date_gmt":"2023-05-01T04:29:45","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=378901"},"modified":"2026-03-02T13:25:11","modified_gmt":"2026-03-02T13:25:11","slug":"shallow-routing-in-next-js","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/","title":{"rendered":"Shallow routing in next js"},"content":{"rendered":"\n

In this blog, we are going to discuss the Shallow routing in NextJs.<\/p>\n\n\n\n

In Next.js<\/a>, shallow routing updates the URL without reloading or refetching data. It changes the route on the client side while keeping the current page mounted.<\/p>\n\n\n\n

This improves user experience by making transitions faster and smoother. The page isn\u2019t fully refreshed, data isn\u2019t refetched, and the app stays responsive while preserving its current state.<\/p>\n\n\n\n

To use shallow routing, you can use the useRouter<\/code> hook from the next\/router<\/code> module, <\/p>\n\n\n\n

which provides access to the router instance. Then, you can call the push<\/code> method on the router with the shallow<\/code> option set to true.<\/p>\n\n\n\n

The router<\/code> object will also have access to the updated pathname<\/code>. Changing the URL could mean adding a new query, so we could have the following code:<\/p>\n\n\n\n

import { useEffect } from 'react'\nimport { useRouter } from 'next\/router'\n\n\/\/ Current URL is '\/'\nfunction Page() {\n  const router = useRouter()\n\n  useEffect(() => {\n    \/\/ Always do navigations after the first render\n    router.push('\/?counter=10', undefined, { shallow: true })\n  }, [])\n\n  useEffect(() => {\n    \/\/ The counter changed!\n  }, [router.query.counter])\n}\n\nexport default Page<\/pre>\n\n\n\n
The URL will get updated to \/?counter=10<\/code>. and the page won’t get replaced, only the state of the route is changed.<\/p>\n\n\n\n
Note that undefined<\/strong><\/code> is passed as the second argument to router.push<\/strong><\/code>. This represents the as<\/strong><\/code> parameter, which lets you show a different URL in the browser, useful when working with dynamic routes.<\/p>\n\n\n\n
Keep in mind that this routing is only available for same-level URLs, meaning that you cannot use it to navigate to a completely different page hierarchy.<\/p>\n\n\n\n
Also, some data-fetching methods such as getServerSideProps<\/strong><\/code> and getInitialProps<\/strong><\/code> will still be executed even with shallow routing.<\/p>\n\n\n\n
Meanwhile, the Link<\/code> component uses the shallow<\/code> props to specify if the routing is shallow or not. In both cases router.push<\/code> and Link<\/code> default to false.<\/p>\n\n\n\n
That’s all about the Shallow routing.<\/p>\n\n\n\n
You can check out our other next js blogs: Click here<\/a><\/p>\n\n\n\n
Happy coding \ud83d\ude42<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
In this blog, we are going to discuss the Shallow routing in NextJs. In Next.js, shallow routing updates the URL without reloading or refetching data. It changes the route on the client side while keeping the current page mounted. This improves user experience by making transitions faster and smoother. The page isn\u2019t fully refreshed, data […]<\/a><\/p>\n","protected":false},"author":377,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13575],"tags":[12572,14100],"class_list":["post-378901","post","type-post","status-publish","format-standard","hentry","category-next-js","tag-next-js","tag-shallow-routing"],"yoast_head":"\nShallow routing in next js - Webkul Blog<\/title>\n<meta name=\"description\" content=\"In Next.js, shallow routing is a technique that allows you to update the URL of a page without reloading the page itself or fetching new...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Shallow routing in next js - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"In Next.js, shallow routing is a technique that allows you to update the URL of a page without reloading the page itself or fetching new...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-01T04:29:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-02T13:25:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Rahul Chaudhary\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rahul Chaudhary\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/\"},\"author\":{\"name\":\"Rahul Chaudhary\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/07d5b40e4a4b5c6996d171e134826b75\"},\"headline\":\"Shallow routing in next js\",\"datePublished\":\"2023-05-01T04:29:45+00:00\",\"dateModified\":\"2026-03-02T13:25:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/\"},\"wordCount\":277,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"keywords\":[\"Next.js\",\"shallow routing\"],\"articleSection\":[\"next js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/\",\"url\":\"https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/\",\"name\":\"Shallow routing in next js - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2023-05-01T04:29:45+00:00\",\"dateModified\":\"2026-03-02T13:25:11+00:00\",\"description\":\"In Next.js, shallow routing is a technique that allows you to update the URL of a page without reloading the page itself or fetching new...\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Shallow routing in next js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/07d5b40e4a4b5c6996d171e134826b75\",\"name\":\"Rahul Chaudhary\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/40e957d926aaa241dc1de7dd09cfea4a0c86ed9fa29bb7eda51de1a8967864e7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/40e957d926aaa241dc1de7dd09cfea4a0c86ed9fa29bb7eda51de1a8967864e7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Rahul Chaudhary\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/rahulchaudhary766\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Shallow routing in next js - Webkul Blog","description":"In Next.js, shallow routing is a technique that allows you to update the URL of a page without reloading the page itself or fetching new...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/","og_locale":"en_US","og_type":"article","og_title":"Shallow routing in next js - Webkul Blog","og_description":"In Next.js, shallow routing is a technique that allows you to update the URL of a page without reloading the page itself or fetching new...","og_url":"https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-05-01T04:29:45+00:00","article_modified_time":"2026-03-02T13:25:11+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png","type":"image\/png"}],"author":"Rahul Chaudhary","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Rahul Chaudhary","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/"},"author":{"name":"Rahul Chaudhary","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/07d5b40e4a4b5c6996d171e134826b75"},"headline":"Shallow routing in next js","datePublished":"2023-05-01T04:29:45+00:00","dateModified":"2026-03-02T13:25:11+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/"},"wordCount":277,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"keywords":["Next.js","shallow routing"],"articleSection":["next js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/","url":"https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/","name":"Shallow routing in next js - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2023-05-01T04:29:45+00:00","dateModified":"2026-03-02T13:25:11+00:00","description":"In Next.js, shallow routing is a technique that allows you to update the URL of a page without reloading the page itself or fetching new...","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/shallow-routing-in-next-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Shallow routing in next js"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/07d5b40e4a4b5c6996d171e134826b75","name":"Rahul Chaudhary","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/40e957d926aaa241dc1de7dd09cfea4a0c86ed9fa29bb7eda51de1a8967864e7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/40e957d926aaa241dc1de7dd09cfea4a0c86ed9fa29bb7eda51de1a8967864e7?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Rahul Chaudhary"},"url":"https:\/\/webkul.com\/blog\/author\/rahulchaudhary766\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/378901","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/377"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=378901"}],"version-history":[{"count":4,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/378901\/revisions"}],"predecessor-version":[{"id":528910,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/378901\/revisions\/528910"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=378901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=378901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=378901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}