Ok, I have a solution, it doesn't reload and it doesn't change the url.. however it requires some client side script.. as you see in the example below

Hope you find it to your liking :D

Here's my codesandbox

index.js(from your codesandbox)

import Link from "next/link";

export default function IndexPage() {
  return (
      Hello World.{" "}
      <Link href="/something-slug">
        <a id="myElem">Go to slug pageee</a>
          __html: `
          let elem=document.getElementById('myElem')
          elem.addEventListener('click',async function(event){
            let myFetch=await fetch(event.path[0].href)
            let text=await myFetch.text()
            let newHTML=document.createElement('html')
            let _next=document.getElementById('__next')
            let requestedNext=[...newHTML.getElementsByTagName('div')].filter(a=>"__next")[0]
            let scripts=[...requestedNext.getElementsByTagName('script')]
            scripts.forEach(a=>eval(a.innerHTML)) //eval any scripts sent by YOUR requested _next

slug.js(again, from your codesandbox)

export default function AboutPage() {
  return <div>About us</div>;

export async function getServerSideProps({ query, req, res }) {
  return {};


You can use rewrites to achieve this. From the docs:

Rewrites allow you to map an incoming request path to a different destination path.

In your next.config.js add this:

module.exports = {
  async rewrites() {
    return [
        source: "/:slug",
        destination: "/your-destination",

rewrites is an async function that expects an array to be returned holding objects with source and destination properties:

  • source is the incoming request path pattern.
  • destination is the path you want to route to.

Related Query

More Query from same tag