Repository: next.js
Issue: Unexpected type conversion of react context class to object type in NextPage
Labels: bug,Lazy Loading

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.6.0: Thu Jun  8 23:56:13 PDT 2023; root:xnu-8020.240.18.701.6~1/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.16.1
      npm: 9.5.1
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.19
      eslint-config-next: 13.4.19
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

Dynamic imports (next/dynamic)

### Link to the code that reproduces this issue or a replay of the bug

https://github.com/clober-dex/coupon.finance/blob/fix/class-type-context/pages/deposit/%5Bsymbol%5D.tsx#L53

### To Reproduce

```typescript
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <CurrencyProvider>
      <Component {...pageProps} />
    </CurrencyProvider>
  )
}
```

```typescript
type CurrencyContext = {
  balances: { [key in `0x${string}`]: BigDecimal }
}

const Context = React.createContext<CurrencyContext>({
  balances: {},
})

export const CurrencyProvider = ({ children }: React.PropsWithChildren<{}>) => {
  const { address: userAddress } = useAccount()

  const { data: balances } = useQuery(['balances', userAddress], async () => {
    const currencies = await fetchCurrencies()
    if (!userAddress) {
      return {}
    }
    const results = await readContracts({
      contracts: currencies.map((currency) => ({
        address: currency.address,
        abi: IERC20__factory.abi,
        functionName: 'balanceOf',
        args: [userAddress],
      })),
    })
    return results.reduce((acc, { result }, i) => {
      const currency = currencies[i]
      return {
        ...acc,
        [currency.address]: BigDecimal.fromIntegerValue(
          currency.decimals,
          (result ?? 0n).toString(),
        ),
      }
    }, {})
  })

  return (
    <Context.Provider
      value={{
        balances: balances ?? {},
      }}
    >
      {children}
    </Context.Provider>
  )
}

export const useCurrencyContext = () =>
  React.useContext(Context) as CurrencyContext
  export const getServerSideProps: GetServerSideProps<{
  asset?: Asset
}> = async ({ params }) => {
  const assets = await fetchAssets()
  const asset = assets.find(
    ({ underlying }) => underlying.symbol === params?.symbol,
  )
  return {
    props: { asset },
  }
}

const Deposit: NextPage<
  InferGetServerSidePropsType<typeof getServerSideProps>
> = ({ asset }) => {
  const { balances } = useCurrencyContext()
  const [selected, _setSelected] = useState(0)
  const [value, setValue] = useState('')

  const router = useRouter()

  const setSelected = useCallback(
    (value: number) => {
      _setSelected(value === selected ? value - 1 : value)
    },
    [selected],
  )
  console.log('asset', asset)
  console.log('balances', balances)
  console.log('balance of', balances[asset?.underlying.address ?? zeroAddress].toFixed(2)) <- error
  ```

### Describe the Bug

In the context of a Next.js application, an unexpected behavior has been observed where the class type defined for a React context undergoes a conversion to an object type specifically when accessing the NextPage directly. The behavior is inconsistent with the expected behavior when the application starts from the MyApp component.

### Expected Behavior

The class type assigned to the React context should remain consistent and unchanged, regardless of whether the application is started from the MyApp component or if the user navigates directly to the NextPage component.



### Which browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

_No response_