Please adding a support for Next.js's soft navigation using <Link> component

[lumirlumir]

Describe the problem

Hello, thank you for providing a fantastic search tool for the open-source community.

I recently implemented a search feature on my blog using Next.js. However, I noticed that DocSearch only performs hard navigation. This results in unnecessary full-page refreshes when navigating to other pages within my blog using Next.js, which negatively impacts the user experience.

I would like to request support for Next.js's soft navigation by utilizing the <Link> component.

Describe the solution

The current Hit.jsx file looks like below. Adding an option to use the <Link> component would be a good solution. (The following code is just pseudocode and may not be accurate.)

import React from 'react';
import Link from 'next/link';

import type { InternalDocSearchHit, StoredDocSearchHit } from './types';

interface HitProps {
  hit: InternalDocSearchHit | StoredDocSearchHit; // Defines the type of the `hit` prop
  children: React.ReactNode; // Specifies that `children` can be any valid React node
  options?: {
    softNavigation: boolean
  }
}

export function Hit({ hit, children, options }: HitProps): JSX.Element {
  return (
    option.softNavigation 
    ? (<Link href={hit.url}>
          {/* For Next.js 12 and below, explicitly wrap children in an <a> tag */}
          {/* <a>{children}</a> */}

          {/* For Next.js 13 and above, the <a> tag is no longer required */}
          {children}
      </Link>)
    : (<a href={hit.url}>{children}</a>)
  );
}

Alternatives you've considered

This is the best approach I can think of. If anyone has other ideas, please feel free to suggest them.

Thank you!