diff --git a/examples/with-react-jss/.babelrc b/examples/with-react-jss/.babelrc
deleted file mode 100644
index 1ff94f7ed28e..000000000000
--- 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 17ac6c57e840..2ee0fa080925 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 ad98bbd6bf42..74b569b67fac 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 53ad6b117efe..a20015c58ad7 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 f8bafce6daad..1726845c1f76 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 000000000000..ccaea0672d6e
--- /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"]
+}