score:-1

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

slug.js(again, from your codesandbox)

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

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

score:0

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