[Dúvida] A implementação do componente SearchForm causa recarregamento da página

Olá.

Nessa aula aprendemos a buscar posts baseado em alguma palavra digitada no componente SearchForm. Segue o código copiado da transcrição da aula:

import { Button } from '@/components/Button'
import styles from './searchform.module.css'

export const SearchForm = () => {
    return (<form className={styles.form} action='/'>
        <input 
            name='q' 
            className={styles.input} 
            placeholder='Digite o que você procura' 
        />
        <Button>
            Buscar
        </Button>
    </form>)
}

Do jeito que o componente foi implementado, essa busca irá causar um recarregamento da página, saindo daquele conceito de SPA.

Por favor, gostaria de saber:

1. no caso de buscas, é assim mesmo que implementamos, fazendo um recarregamento da página?
2. Teria um jeito de fazer isso mantendo o conceito de SPA? Tentei fazer isso com a ajuda do ChatGPT, usando o evento de onSubmit e o hook useRouter, mas encontrei erros do tipo "Error: NextRouter was not mounted." e acabei desistindo.

Segue o meu código, em que tentei implementar com o useRouter e que está dando erro:

'use client';
import { useRouter } from 'next/router';
import styles from './searchbar.module.css';
import { Prompt } from 'next/font/google';

const prompt = Prompt({
    weight: ['400', '600'],
    subsets: ['latin'],
    display: 'swap',
});

export default function Searchbar() {
    const router = useRouter();

    const searchSubmit = e => {
        e.preventDefault();
        const q = e.target.q.value;
        if (q) {
            router.push({ 
                pathname: '/',
                query: {q}
            })
        }
    }

    return <form
        className={styles.form}
        onSubmit={searchSubmit}
        // action='/'
    >
        <input
            name='q' // name to be displayed in the query string of the URL
            type="text"
            placeholder="Digite o que você procura"
            className={`${styles.input} ${prompt.className}`}
        />
        <button className={`${styles.button} ${prompt.className}`} >Buscar</button>
    </form>
}

Obrigado!