There are two pages A and B. I am on page and A and I want a link that takes me from page A to page B and to a specific div which has the id id. I tried out various things like

import Link from 'next/link'

<Link href="/about/#about" scroll={true}>
  <a>My about text</a>
</Link>

or using useEffect to fetch the hash key in the url and use getElementById to scroll to that specific section but that isn't working. I am not able to actually fetch the element even after defining use client on top of the file where I defined the useEffect. I understand that this problem is related to server side rendering feature of Next.js. How can I handle it for my case?

There are two pages A and B. I am on page and A and I want a link that takes me from page A to page B and to a specific div which has the id id. I tried out various things like

import Link from 'next/link'

<Link href="/about/#about" scroll={true}>
  <a>My about text</a>
</Link>

or using useEffect to fetch the hash key in the url and use getElementById to scroll to that specific section but that isn't working. I am not able to actually fetch the element even after defining use client on top of the file where I defined the useEffect. I understand that this problem is related to server side rendering feature of Next.js. How can I handle it for my case?

• next.js

• /about#about tried this? – Tushar Shahi Commented Feb 17 at 9:38
• Yeah, it isn't working – Arshpreet Singh Commented Feb 17 at 9:48
• 1 do you use App Router or Page Router? what version of nextjs and react you are using? – Erfan Ta Commented 2 days ago

1 Answer 1

try without <a> tag and href as href="/about#about"