update types and drop direct react imports

packages/next/package.json

@@ -158,9 +158,9 @@
     "@types/node-fetch": "2.6.1",
     "@types/path-to-regexp": "1.7.0",
     "@types/platform": "1.3.4",
-    "@types/react": "16.9.17",
-    "@types/react-dom": "16.9.4",
-    "@types/react-is": "16.7.1",
+    "@types/react": "17.0.39",
+    "@types/react-dom": "17.0.11",
+    "@types/react-is": "17.0.3",
     "@types/semver": "7.3.1",
     "@types/send": "0.14.4",
     "@types/shell-quote": "1.7.1",

packages/next/server/render.tsx

@@ -28,7 +28,7 @@ import type { UnwrapPromise } from '../lib/coalesced-function'
 import type { ReactReadableStream } from './node-web-streams-helper'
 import type { FontLoaderManifest } from '../build/webpack/plugins/font-loader-manifest-plugin'
 
-import React from 'react'
+import type { FC, ComponentType, ReactElement } from 'react'
 import ReactDOMServer from 'react-dom/server.browser'
 import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
 import {
@@ -105,7 +105,7 @@ function noRouter() {
   throw new Error(message)
 }
 
-async function renderToString(element: React.ReactElement) {
+async function renderToString(element: ReactElement) {
   const renderStream = await ReactDOMServer.renderToReadableStream(element)
   await renderStream.allReady
   return streamToString(renderStream)
@@ -217,7 +217,7 @@ export type RenderOptsPartial = {
   nextExport?: boolean
   dev?: boolean
   ampPath?: string
-  ErrorDebug?: React.ComponentType<{ error: Error }>
+  ErrorDebug?: ComponentType<{ error: Error }>
   ampValidator?: (html: string, pathname: string) => Promise<void>
   ampSkipValidation?: boolean
   ampOptimizerConfig?: { [key: string]: any }
@@ -396,7 +396,7 @@ export async function renderToHTML(
   let Document = renderOpts.Document
 
   // Component will be wrapped by ServerComponentWrapper for RSC
-  let Component: React.ComponentType<{}> | ((props: any) => JSX.Element) =
+  let Component: ComponentType<{}> | ((props: any) => JSX.Element) =
     renderOpts.Component
   const OriginComponent = Component
 
@@ -639,7 +639,7 @@ export async function renderToHTML(
   // not be useful.
   // https://github.com/facebook/react/pull/22644
   const Noop = () => null
-  const AppContainerWithIsomorphicFiberStructure: React.FC<{
+  const AppContainerWithIsomorphicFiberStructure: FC<{
     children: JSX.Element
   }> = ({ children }) => {
     return (

packages/next/tsconfig.json

@@ -6,7 +6,7 @@
     "target": "ES2017",
     "esModuleInterop": true,
     "moduleResolution": "node",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "stripInternal": true
   },
   "exclude": [

packages/react-dev-overlay/tsconfig.json

@@ -9,7 +9,7 @@
     "downlevelIteration": true,
     "preserveWatchOutput": true,
     "outDir": "dist",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "noFallthroughCasesInSwitch": true,
     "skipLibCheck": true
   },