[Docs] Migrate with-react-jss to typescript (#40308)

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)

examples/with-react-jss/package.json

@@ -7,8 +7,13 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-jss": "^10.3.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-jss": "^10.9.2"
+  },
+  "devDependencies": {
+    "@types/node": "18.7.15",
+    "@types/react": "18.0.18",
+    "typescript": "4.8.2"
   }
 }

examples/with-react-jss/pages/_app.js → examples/with-react-jss/pages/_app.tsx

@@ -1,9 +1,10 @@
+import type { AppProps } from 'next/app'
 import { useEffect } from 'react'
 
-export default function App({ Component, pageProps }) {
+export default function App({ Component, pageProps }: AppProps) {
   useEffect(() => {
     const style = document.getElementById('server-side-styles')
-    if (style) {
+    if (style && style.parentNode) {
       style.parentNode.removeChild(style)
     }
   }, [])

examples/with-react-jss/pages/_document.js → examples/with-react-jss/pages/_document.tsx

@@ -1,8 +1,8 @@
-import Document from 'next/document'
+import Document, { DocumentContext } from 'next/document'
 import { SheetsRegistry, JssProvider, createGenerateId } from 'react-jss'
 
 export default class JssDocument extends Document {
-  static async getInitialProps(ctx) {
+  static async getInitialProps(ctx: DocumentContext) {
     const registry = new SheetsRegistry()
     const generateId = createGenerateId()
     const originalRenderPage = ctx.renderPage

examples/with-react-jss/pages/index.js → examples/with-react-jss/pages/index.tsx

@@ -12,7 +12,7 @@ const useStyles = createUseStyles({
   },
 })
 
-function Index() {
+export default function IndexPage() {
   const classes = useStyles()
 
   return (
@@ -23,5 +23,3 @@ function Index() {
     </div>
   )
 }
-
-export default Index

examples/with-react-jss/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "module": "esnext",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}