CODEWITHSUNDEEP
javascriptreactjsrefreshnext.js
soywod
soywod

Reputation: 4520

Next.js links refresh the page

I have a Next.js blog with only 2 routes: / and /posts/:slug.

When I'm on /posts/my-post-title, and I click on the back link (to /), all is fine. The page loads fast (no refresh).

When I'm on /, and I click on /posts/my-post-title, the page refreshes and I can't figure out why. Any suggestion?

Links: blog, sources

Upvotes: 16

Views: 70587

Answers (11)

Mootez elj
Mootez elj

Reputation: 11

For those who are running into this issue in all the links ( I was). You want to also make sure to have the html and body tag in your layout:

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
      <html lang="en"> <!-- Check this -->
      <body> <!-- Check this -->
      <div className="container">{children}</div>
      </body>
      </html>
  );
}

And Use the Link tag with the correct import:

import Link from 'next/link'
....
....
<Link href={`/users/${username}`}>MyLink</Link>

Upvotes: 1

temosmoev
temosmoev

Reputation: 11

In my case there was a problem with google chrome extensions. Try it in incognito mode, if it works the problem is in one of your browser extensions.

Upvotes: 1

Tigran Galstyan
Tigran Galstyan

Reputation: 1

if you using next/link, you need do add passHref attribute

<Link href="YourLink" passHref>Name<Link>

Upvotes: -1

Siddharth Sharma
Siddharth Sharma

Reputation: 1

if you use Head tag then this will be refresh your page

it will refresh your page because of Head tag

   <Head>
    <Link href="YourLink"> <Link>
     // Other codes...
    </Head>

remove Head tag

Upvotes: -1

reza baghiee
reza baghiee

Reputation: 352

simply use this :

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

reference : If the route has dynamic segments

Upvotes: 0

Oded Ben Dov
Oded Ben Dov

Reputation: 10397

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

You want:

import Link from 'next/link'

Upvotes: 21

KenneyE
KenneyE

Reputation: 363

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.

Upvotes: 1

soywod
soywod

Reputation: 4520

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).

Upvotes: 5

Mahydul Islam Shajal
Mahydul Islam Shajal

Reputation: 232

**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>

Upvotes: 3

sareek
sareek

Reputation: 572

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>

Upvotes: 10

sareek
sareek

Reputation: 572

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.

Upvotes: 6

Related Questions