Next.js links refresh the page

I had this issue before, I thought I fixed it but again none of the above helped me solve the issue completely so I'm posting my solution.

Suppose you want to go to slot/[key] route using the link.

Then, in pages folder make a folder with name slot and inside it make a file with name [key].js, Note: Don't forget to put that [].

inside [key].js folder you can simply export the component you want to render. There are many approaches to this, let's not go into it now.

Now, while using Link use it this way,

                 <Link
                      href={'/slot/[key]'}
                      as = {`/slot/${your_dynamic_variable}`}
                    >
                      <a>
                        Go to the slot route
                      </a>
                    </Link>

I just found the answer...

Because I map dynamically /posts/:slug to /posts?slug=:slug in my config (in order to reach posts.jsx), I need to do the same with the Link component (via the property as).

One thing to keep in mind while using Link in next.js is not to add "/" in the beginning i.e,

               <Link
                  href="nameoflink"
                >
                  <a>
                   Click Me
                  </a>
                </Link>

instead of,

                   <Link
                      href="/nameoflink"
                    >
                      <a>
                       Click Me
                      </a>
                    </Link>

If you add "/" in the beginning the page refreshes. However, you need to add "/" in the beginning if that link is in some common component accessible throughout the application like navbar, in that case, add "/" in the beginning. Give it a try if it works for you then great. I just thought I should share.

For anyone facing the same nonsense I was: Link was mistakenly auto imported from @material-ui/core

You want:

import Link from 'next/link'

**Use link as below: **

<Link href="/shop/[pid]" as={`/shop/${id}`}>
                        <a>Shop by menu</a>
                    </Link>

Instead Of

<Link href={`/shop/${id}`} as={`/shop/${id}`}>
                        <a>Shop by menu</a>
                    </Link>

I was running into a similar issue. In my case, it was caused by having the <a> tag nested in another component, not as the direct child of the Link.

So I had:

<Link href='/something' passHref>
  <MyComponent />
</Link>

where MyComponent accepted href as a prop and looked something like:

<a href={ href }>
  Good things
</a>

This did work at first glance, as href is properly passed to the anchor tag. But it was causing a full page refresh when the link was clicked. Once I moved the Link and a tag to be in the same component as direct parent/child, it solved the issue. So now I have the standard setup all within one component:

<Link href='/something' passHref>
  <a>
    Good things
  </a>
</Link>

No more page refresh.

simply use this :

 <Link href={`/blog/${encodeURIComponent(post.slug)}`}>
        <a>{post.title}</a>
 </Link>

reference : If the route has dynamic segments