Repository: next.js
Issue: next build times out with recoil.js async selectors using suspense
Labels: bug

### Verify canary release

- [X] I verified that the issue exists in Next.js canary release

### Provide environment information

    Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 16.15.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 12.1.7-canary.27
      react: 18.1.0
      react-dom: 18.1.0

> UPDATE (7/8/22): Confirmed issue still exists with 12.2.0

### What browser are you using? (if relevant)

n/a

### How are you deploying your application? (if relevant)

n/a

### Describe the Bug

running `next build` times out with 
```
warn  - Restarted static page generation for / because it took more than 60 seconds
warn  - See more info here https://nextjs.org/docs/messages/static-page-generation-timeout
```
in a very simple application when using recoil with an async selector and <React.Suspense> following an example very similar to this: https://recoiljs.org/docs/guides/asynchronous-data-queries#asynchronous-example .

Here's my example with console showing the build failure (it tries 3 times then errors out). 
![image](https://user-images.githubusercontent.com/8560828/171453513-992f5f69-4523-4453-92d4-a76a2e81a79a.png)

Switching to using the Loadable strategy works, but is less ideal:
![image](https://user-images.githubusercontent.com/8560828/171453604-e629c561-92a2-491f-a1df-50774bde592f.png)

`next dev` runs fine and the application 'works' using either method, it's only when next is generating the static pages that it has a problem. 

I am _assuming_ this is not a Recoil bug exclusively because I assume they would have seen a problem building in a different framework like react-scripts or whatever. 

### Expected Behavior

`next build` should be able to generate static pages using recoil async selectors surrounded in React.Suspense.

### To Reproduce

`npx create-next-app@latest --typescript`

`npm install recoil@latest`

modify _app.tsx to
```
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { RecoilRoot } from "recoil";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <RecoilRoot>
      <Component {...pageProps} />
    </RecoilRoot>
  );
}

export default MyApp;
```

Modify index.tsx to 
```
import type { NextPage } from "next";
import Head from "next/head";
import styles from "../styles/Home.module.css";
import { selector, useRecoilValue } from "recoil";
import React from "react";
interface IResponse {
  success: number;
}
const myAsyncSelector = selector({
  key: "try-this",
  get: async () => {
    let apiRes = await fetch(
      "https://mocki.io/v1/625d1778-9b02-4f65-8fa5-31e91191c18f"
    );
    return (await apiRes.json()) as IResponse;
  },
});
const MyComponentUsingAsyncSelector = () => {
  const apiresponse = useRecoilValue(myAsyncSelector);
  return <div>Success Value = {apiresponse.success}</div>;
};
const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <React.Suspense fallback={<div>Loading...</div>}>
          <MyComponentUsingAsyncSelector />
        </React.Suspense>
      </main>
    </div>
  );
};

export default Home;
```

`npm run build`

observe the warnings and eventual failure of the build while generating static pages.