diff --git a/examples/with-goober/package.json b/examples/with-goober/package.json
index 8793b454ca5b..a92c1009be0d 100644
--- a/examples/with-goober/package.json
+++ b/examples/with-goober/package.json
@@ -6,10 +6,15 @@
     "start": "next start"
   },
   "dependencies": {
-    "goober": "^2.0.2",
-    "goober-autoprefixer": "^1.2.0",
+    "goober": "^2.1.10",
+    "goober-autoprefixer": "^1.2.3",
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.7.7",
+    "@types/react": "^18.0.17",
+    "typescript": "^4.7.4"
   }
 }
diff --git a/examples/with-goober/pages/_app.js b/examples/with-goober/pages/_app.tsx
similarity index 53%
rename from examples/with-goober/pages/_app.js
rename to examples/with-goober/pages/_app.tsx
index 1c7e527a9750..09fb2bf00f1b 100644
--- a/examples/with-goober/pages/_app.js
+++ b/examples/with-goober/pages/_app.tsx
@@ -1,12 +1,13 @@
-import React from 'react'
-import { prefix } from 'goober-autoprefixer'
+import { createElement } from 'react'
 import { setup } from 'goober'
+import { prefix } from 'goober/prefixer'
+import type { AppProps } from 'next/app'
 
 // goober's needs to know how to render the `styled` nodes.
 // So to let it know, we run the `setup` function with the
 // `createElement` function and prefixer function.
-setup(React.createElement, prefix)
+setup(createElement, prefix)
 
-export default function App({ Component, pageProps }) {
+export default function App({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />
 }
diff --git a/examples/with-goober/pages/_document.js b/examples/with-goober/pages/_document.tsx
similarity index 63%
rename from examples/with-goober/pages/_document.js
rename to examples/with-goober/pages/_document.tsx
index c7550d37d991..b3c283a033c7 100644
--- a/examples/with-goober/pages/_document.js
+++ b/examples/with-goober/pages/_document.tsx
@@ -1,10 +1,19 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
 import { extractCss } from 'goober'
+import NextDocument, {
+  DocumentContext,
+  Head,
+  Html,
+  Main,
+  NextScript,
+} from 'next/document'
 
-export default class MyDocument extends Document {
-  static async getInitialProps({ renderPage }) {
+type Props = {
+  css: string
+}
+
+class Document extends NextDocument<Props> {
+  static async getInitialProps({ renderPage }: DocumentContext) {
     const page = await renderPage()
-    // Extrach the css for each page render
     const css = extractCss()
     return { ...page, css }
   }
@@ -27,3 +36,5 @@ export default class MyDocument extends Document {
     )
   }
 }
+
+export default Document
diff --git a/examples/with-goober/pages/index.js b/examples/with-goober/pages/index.tsx
similarity index 100%
rename from examples/with-goober/pages/index.js
rename to examples/with-goober/pages/index.tsx
diff --git a/examples/with-goober/tsconfig.json b/examples/with-goober/tsconfig.json
new file mode 100644
index 000000000000..b8d597880a1a
--- /dev/null
+++ b/examples/with-goober/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}