Best Practices for Section Navigation in a Next.js Page | Next.js | Page 1

I'm building a support page with different sections (FAQ, Contact Support, Contact Sales) using Next.js. Currently, I'm using Link from next/link for navigation, which changes the URL when a section is clicked. I want the URL to also change when scrolling to a section, similar to clicking on a link. Is this the best approach, or should I consider using subpages for each section instead? What are the best practices for handling this scenario?

'use client'
import Link from 'next/link'
import { useState } from 'react'
import { InView } from 'react-intersection-observer'
const sections = ['FAQ', 'Contact Support', 'Contact Sales']
const sectionContent = {}
const SupportPage = () => {
  const [visibleSection, setVisibleSection] = useState(null)
  const setInView = (inView: boolean, entry: IntersectionObserverEntry) => {
    if (inView) {
      setVisibleSection(entry.target.getAttribute('id'))
    }
  }
  return (
    <div className='flex h-full'>
      <nav className='sticky top-0 h-screen p-6 border-gray-300 border-e'>
        <ul className='flex flex-col space-y-2'>
          {sections.map((section) => (
            <li key={section}>
              <Link
                href={`#${section}`}
                className={`block p-3 rounded-lg transition-all}
              >
                {section}
              </Link>
            </li>
          ))}
        </ul>
      </nav>
      <div className='flex-1 p-10 overflow-y-auto'>
        {sections.map((section) => (
          <InView onChange={setInView} threshold={0.3} key={section}>
            {({ ref }) => (
              <div
                id={section}
                ref={ref}
                className='min-h-screen p-10 text-white bg-gray-800'
              >
                {sectionContent[section]}
              </div>
            )}
          </InView>
        ))}
      </div>
    </div>
  )
}

#Best Practices for Section Navigation in a Next.js Page