From aa5be3ff64f84b0cf93ed175d29ca6078e9f7517 Mon Sep 17 00:00:00 2001
From: Henrik Wenz <HaNdTriX@users.noreply.github.com>
Date: Thu, 8 Sep 2022 01:39:35 +0200
Subject: [PATCH] [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/.babelrc              |  3 ---
 examples/with-react-jss/package.json          | 11 +++++++---
 .../pages/{_app.js => _app.tsx}               |  5 +++--
 .../pages/{_document.js => _document.tsx}     |  4 ++--
 .../pages/{index.js => index.tsx}             |  4 +---
 examples/with-react-jss/tsconfig.json         | 20 +++++++++++++++++++
 6 files changed, 34 insertions(+), 13 deletions(-)
 delete mode 100644 examples/with-react-jss/.babelrc
 rename examples/with-react-jss/pages/{_app.js => _app.tsx} (60%)
 rename examples/with-react-jss/pages/{_document.js => _document.tsx} (87%)
 rename examples/with-react-jss/pages/{index.js => index.tsx} (90%)
 create mode 100644 examples/with-react-jss/tsconfig.json

diff --git a/examples/with-react-jss/.babelrc b/examples/with-react-jss/.babelrc
deleted file mode 100644
index 1ff94f7ed28..00000000000
--- a/examples/with-react-jss/.babelrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "presets": ["next/babel"]
-}
diff --git a/examples/with-react-jss/package.json b/examples/with-react-jss/package.json
index 17ac6c57e84..2ee0fa08092 100644
--- a/examples/with-react-jss/package.json
+++ b/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"
   }
 }
diff --git a/examples/with-react-jss/pages/_app.js b/examples/with-react-jss/pages/_app.tsx
similarity index 60%
rename from examples/with-react-jss/pages/_app.js
rename to examples/with-react-jss/pages/_app.tsx
index ad98bbd6bf4..74b569b67fa 100644
--- a/examples/with-react-jss/pages/_app.js
+++ b/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)
     }
   }, [])
diff --git a/examples/with-react-jss/pages/_document.js b/examples/with-react-jss/pages/_document.tsx
similarity index 87%
rename from examples/with-react-jss/pages/_document.js
rename to examples/with-react-jss/pages/_document.tsx
index 53ad6b117ef..a20015c58ad 100644
--- a/examples/with-react-jss/pages/_document.js
+++ b/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
diff --git a/examples/with-react-jss/pages/index.js b/examples/with-react-jss/pages/index.tsx
similarity index 90%
rename from examples/with-react-jss/pages/index.js
rename to examples/with-react-jss/pages/index.tsx
index f8bafce6daa..1726845c1f7 100644
--- a/examples/with-react-jss/pages/index.js
+++ b/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
diff --git a/examples/with-react-jss/tsconfig.json b/examples/with-react-jss/tsconfig.json
new file mode 100644
index 00000000000..ccaea0672d6
--- /dev/null
+++ b/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"]
+}