title: Using onClick to router.push, fetch data and update page in Next.js
body: <p>I am newcomer to react and trying to execute a GraphQL query, to update <code>data</code> on a page depending on which link a user clicks (check the two <code>onClick</code>s in code below).</p>
  <p>When the user has clicked a link <code>handleSubmit</code> should also update the URL via <code>router.push</code> (updated URL should look like: <code>http://localhost:3000/bonustype?=value</code>), without any page refresh. However when I try to use <code>router.push</code> I get the following error:</p>
  <blockquote>
  <p>Server Error
  Error: No router instance found. you should only use &quot;next/router&quot; inside the client side of your app.</p>
  </blockquote>
  <p>After the link has been clicked and URL updated the GraphQL query should &quot;execute&quot; again using the updated slug (with value from link).</p>
  <p>Been stuck with this for a few hours, appreciate any help or input. The code is from my main index page and the current url when it runs is <code>localhost:3000/</code>.</p>
  <p><strong>How would you solve this?</strong></p>
  <pre><code>import { useState } from &quot;react&quot;;
  import { useRouter } from &quot;next/router&quot;;
  import Layout from &quot;../components/Layout&quot;;
  import Head from &quot;next/head&quot;;
  import Featured from &quot;../components/index/Featured&quot;;
  import { API_URL } from &quot;@/config/index&quot;;
  
  import {
    ApolloClient,
    inMemoryCache,
    gql,
    InMemoryCache,
  } from &quot;@apollo/client&quot;;
  
  export default function HomePage({ casinos }) {
    const router = useRouter();
  
    const handleSubmit = (value) =&gt; {
      console.log(value);
      router.push(`/bonustype?term=${value}`);
    };
  
    return (
      &lt;div&gt;
        &lt;Layout&gt;
          &lt;div&gt;
            &lt;div className={featured.featuredMenu}&gt;
              &lt;ul&gt;
                &lt;li&gt;
                  &lt;a href=&quot;#&quot; value=&quot;Swish&quot; onClick={handleSubmit()} className={featured.active}&gt;
                    &lt;Star className={featured.menuIcon} /&gt;
  
                    &lt;div&gt;Highest User Rating&lt;/div&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
  
                &lt;li&gt;
                  &lt;a href=&quot;#&quot; value=&quot;Swish&quot; onClick={handleSubmit()}&gt;
                    &lt;TabletAndroid className={featured.menuIcon} /&gt;
                    &lt;div&gt;Casinos with Swish&lt;/div&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
  
            {casinos.map((casino) =&gt; (
              &lt;Featured key={casino.id} casino={casino} /&gt;
            ))}
          &lt;/div&gt;
        &lt;/Layout&gt;
      &lt;/div&gt;
    );
  }
  
  export async function getServerSideProps(context) {
    const slug = &quot;Visa&quot;;
    console.log(slug);
  
    const client = new ApolloClient({
      uri: &quot;http://localhost:1337/graphql&quot;,
      cache: new InMemoryCache(),
    });
  
    const { data } = await client.query({
      query: gql`
        query Casinos($slug: String) {
          casinos(where: { deposit_methods: { name: $slug } }) {
            slug
            name
            logo {
              url
            }
            rating
            owner
            founded
            bonuses {
              name
              slug
              title
              cashable
              bonus_type {
                name
              }
            }
            deposit_methods {
              name
              logo {
                url
              }
            }
          }
        }
      `,
      variables: {
        slug,
      },
    });
  
    return {
      props: {
        casinos: data.casinos,
      },
    };
  }
  </code></pre>