Next.js: URL Leads to specific section in Next.js page

[MimoJSRepo]

I am trying to use something like anchor in HTML that use hash symbol # to lead to specific section in the page , this section includes a component with id="something", but I couldn't find an answer.

I read some discussion about something close to this issue , but no one gave a clear answer for it.

is there some way in Next.js that when we enter Url like http://something.com/page#something the page will be loaded to the section where there is the component with id="something" (like anchor and href in HTML and without using Router) ?

[elrumordelaluz]

something like https://nextjs.org/docs#custom-%3Capp%3E ?

(I mean the url, not the content of this specific _Docs_ section)

[timneutkens]

We already implement linking to anchors in next/link, I'm not sure if you're asking about initial render since that's up to the browser.

The behavior is not different from any other website.

For example, if you open https://zeit.co/blog/next6#static-react-applications you'll see that it opens at the specific heading.

[MimoJSRepo]

thank you for the quick reply , I have a page that has different components, I want the page loading to lead to different sections in the same page depending on URL.

I mean in the same page you can find many components, like something1 and something2

and the page will be loaded and lead to the specific section depending on the url.

https/.......#something1

https/...... #somethig2

I am not sure that the answer that you provided will handle different sections issue

[MimoJSRepo]

@timneutkens
Thanks for the answer, I will check it

[elrumordelaluz]

@Mimo01 as @timneutkens said is browser's responsibility, however should work like on each _Section_ in next.js docs for example

[elrumordelaluz]

@JSMindBlowing would be useful if you provide a simple codesandbox or something similar.

[timneutkens]

I'm honestly still not following what you're trying to do, please provide a code sample. Also, questions should be asked on spectrum.chat/next-js, not in issues. As per the issue template.