title: requesting Metamask with "eth_requestAccounts" does not work in next.js
body: <p>This is a next.js project. I detected metamask:</p>
  <pre><code>import detectEthereumProvider from &quot;@metamask/detect-provider&quot;;
  
  let provider;
  if (typeof window !== &quot;undefined&quot;) {
    // for simplicity I am configured next.js for using top-level await
    provider = await detectEthereumProvider();
  }
  // Provider is detected
  console.log(&quot;provider&quot;, provider);
  </code></pre>
  <p>This is the function to send request to metamask. It is not throwing error:</p>
  <pre><code>const connect = async () =&gt; {
      try {
        await provider.request({ method: &quot;eth_requestAccounts&quot; });
      } catch (e) {
        console.log(&quot;error in request&quot;, e);
        // location.reload();
      }
    };
  </code></pre>
  <p>I add click handler:</p>
  <pre><code>            &lt;Button onClick={connect}&gt;Connect&lt;/Button&gt;
  </code></pre>
  <p>Nothing is happening. so I chanded the click handler to:</p>
  <pre><code>          &lt;Button
                onClick={() =&gt; {
                  // this is logging.
                  console.log(&quot;clicked to send request to Metamask&quot;);
                  connect;
                }}
              &gt;
                Connect
              &lt;/Button&gt;
  </code></pre>
  <p>It is logging that I clicked but it is not sending request to Metamask</p>