Stop using legacy root

Author: eps1lon

test/integration/app-tree/pages/_app.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import Link from 'next/link'
 import { createContext } from 'react'
-// eslint-disable-next-line react/no-deprecated
-import { render } from 'react-dom'
+import { flushSync } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import App, { AppContext } from 'next/app'
 import { renderToString } from 'react-dom/server'
 
@@ -22,7 +22,9 @@ export default class MyApp extends App<{ html: string }> {
     if (typeof window !== 'undefined') {
       const el = document.createElement('div')
       document.querySelector('body')?.appendChild(el)
-      render(toRender, el)
+      flushSync(() => {
+        createRoot(el).render(toRender)
+      })
       html = el.innerHTML
       el.remove()
     } else {

test/integration/app-tree/pages/hello.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-// eslint-disable-next-line react/no-deprecated
-import { render } from 'react-dom'
+import { flushSync } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { renderToString } from 'react-dom/server'
 import { NextPage } from 'next'
 
@@ -22,7 +22,9 @@ Page.getInitialProps = async ({ AppTree }) => {
   if (typeof window !== 'undefined') {
     const el = document.createElement('div')
     document.querySelector('body')?.appendChild(el)
-    render(toRender, el)
+    flushSync(() => {
+      createRoot(el).render(toRender)
+    })
     html = el.innerHTML
     el.remove()
   } else {

test/integration/app-tree/test/index.test.js

@@ -33,16 +33,19 @@ const runTests = () => {
     const browser = await webdriver(appPort, '/')
     let html = await browser.eval(`document.documentElement.innerHTML`)
     expect(html).toMatch(/page:.*?\//)
+    console.log(1)
 
     browser.elementByCss('#another').click()
     await waitFor(waitTime)
     html = await browser.eval(`document.documentElement.innerHTML`)
     expect(html).toMatch(/page:.*?\//)
+    console.log(2)
 
     browser.elementByCss('#home').click()
     await waitFor(waitTime)
     html = await browser.eval(`document.documentElement.innerHTML`)
     expect(html).toMatch(/page:.*?\/another/)
+    console.log(3)
   })
 
   it('should pass AppTree to NextPageContext', async () => {