diff --git a/examples/with-videojs/components/Player.js b/examples/with-videojs/components/Player.tsx
similarity index 62%
rename from examples/with-videojs/components/Player.js
rename to examples/with-videojs/components/Player.tsx
index 1e46790730..c3b1747ae8 100644
--- a/examples/with-videojs/components/Player.js
+++ b/examples/with-videojs/components/Player.tsx
@@ -2,9 +2,16 @@ import { useCallback, useEffect, useState } from 'react'
 import videojs from 'video.js'
 import 'videojs-youtube'
 
-const Player = (props) => {
-  const [videoEl, setVideoEl] = useState(null)
-  const onVideo = useCallback((el) => {
+interface PlayerProps {
+  techOrder: string[]
+  autoplay: boolean
+  controls: boolean
+  sources: { src: string; type: string }[]
+}
+
+export default function Player(props: PlayerProps) {
+  const [videoEl, setVideoEl] = useState<HTMLVideoElement | null>(null)
+  const onVideo = useCallback((el: HTMLVideoElement) => {
     setVideoEl(el)
   }, [])
 
@@ -25,5 +32,3 @@ const Player = (props) => {
     </>
   )
 }
-
-export default Player
diff --git a/examples/with-videojs/components/PlayerCss.js b/examples/with-videojs/components/PlayerCss.tsx
similarity index 90%
rename from examples/with-videojs/components/PlayerCss.js
rename to examples/with-videojs/components/PlayerCss.tsx
index 83cba73bcf..0f02153fe3 100644
--- a/examples/with-videojs/components/PlayerCss.js
+++ b/examples/with-videojs/components/PlayerCss.tsx
@@ -1,6 +1,6 @@
 import 'videojs-youtube'
 
-const PlayerCSS = () => {
+export default function PlayerCSS() {
   return (
     <>
       <h1>The implementation below is without react functions</h1>
@@ -17,5 +17,3 @@ const PlayerCSS = () => {
     </>
   )
 }
-
-export default PlayerCSS
diff --git a/examples/with-videojs/package.json b/examples/with-videojs/package.json
index c2cb7a4c5f..682a464ee7 100644
--- a/examples/with-videojs/package.json
+++ b/examples/with-videojs/package.json
@@ -6,10 +6,17 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "^9.1.8-canary.11",
+    "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "video.js": "^6.7.3",
-    "videojs-youtube": "^2.4.1"
+    "video.js": "^7.20.3",
+    "videojs-youtube": "^2.6.1"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@types/video.js": "^7.3.49",
+    "typescript": "^4.9.3"
   }
 }
diff --git a/examples/with-videojs/pages/_app.js b/examples/with-videojs/pages/_app.js
deleted file mode 100644
index 3bba2b96ef..0000000000
--- a/examples/with-videojs/pages/_app.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import 'video.js/dist/video-js.css'
-
-function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
-}
-
-export default MyApp
diff --git a/examples/with-videojs/pages/_app.tsx b/examples/with-videojs/pages/_app.tsx
new file mode 100644
index 0000000000..a00fbb5e6a
--- /dev/null
+++ b/examples/with-videojs/pages/_app.tsx
@@ -0,0 +1,6 @@
+import type { AppProps } from 'next/app'
+import 'video.js/dist/video-js.css'
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
diff --git a/examples/with-videojs/pages/index.js b/examples/with-videojs/pages/index.tsx
similarity index 90%
rename from examples/with-videojs/pages/index.js
rename to examples/with-videojs/pages/index.tsx
index 3deca709c0..de4ce2d902 100644
--- a/examples/with-videojs/pages/index.js
+++ b/examples/with-videojs/pages/index.tsx
@@ -1,7 +1,7 @@
 import Player from '../components/Player'
 import PlayerCSS from '../components/PlayerCss'
 
-const Index = () => {
+export default function Index() {
   const videoJsOptions = {
     techOrder: ['youtube'],
     autoplay: false,
@@ -21,5 +21,3 @@ const Index = () => {
     </>
   )
 }
-
-export default Index
diff --git a/examples/with-videojs/tsconfig.json b/examples/with-videojs/tsconfig.json
new file mode 100644
index 0000000000..9080abd104
--- /dev/null
+++ b/examples/with-videojs/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "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", "videojs.d.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/with-videojs/videojs.d.ts b/examples/with-videojs/videojs.d.ts
new file mode 100644
index 0000000000..7504bdad62
--- /dev/null
+++ b/examples/with-videojs/videojs.d.ts
@@ -0,0 +1 @@
+declare module 'videojs-youtube'
diff --git a/examples/with-yoga/next.config.js b/examples/with-yoga/next.config.js
index 0c1f043c8a..a843cbee09 100644
--- a/examples/with-yoga/next.config.js
+++ b/examples/with-yoga/next.config.js
@@ -1,9 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  compiler: {
-    styledComponents: true,
-  },
 }
 
 module.exports = nextConfig
diff --git a/examples/with-yoga/package.json b/examples/with-yoga/package.json
index 5ec0ffd63a..51e27374cc 100644
--- a/examples/with-yoga/package.json
+++ b/examples/with-yoga/package.json
@@ -7,10 +7,15 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@gympass/yoga": "^7.28.0",
+    "@gympass/yoga": "^7.61.0",
     "next": "latest",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": "^4.4.1"
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "typescript": "^4.9.3"
   }
 }
diff --git a/examples/with-yoga/pages/_app.js b/examples/with-yoga/pages/_app.js
deleted file mode 100644
index e31c2adc8c..0000000000
--- a/examples/with-yoga/pages/_app.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ThemeProvider, FontLoader } from '@gympass/yoga'
-import { createGlobalStyle } from 'styled-components'
-
-const GlobalStyle = createGlobalStyle`
-  body {
-    margin: 20px;
-    padding: 0;
-    box-sizing: border-box;
-  }
-`
-
-function MyApp({ Component, pageProps }) {
-  return (
-    <ThemeProvider>
-      <GlobalStyle />
-      <FontLoader />
-      <Component {...pageProps} />
-    </ThemeProvider>
-  )
-}
-
-export default MyApp
diff --git a/examples/with-yoga/pages/_app.tsx b/examples/with-yoga/pages/_app.tsx
new file mode 100644
index 0000000000..31ed42a132
--- /dev/null
+++ b/examples/with-yoga/pages/_app.tsx
@@ -0,0 +1,10 @@
+import type { AppProps } from 'next/app'
+import { ThemeProvider } from '@gympass/yoga'
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <ThemeProvider>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  )
+}
diff --git a/examples/with-yoga/pages/_document.js b/examples/with-yoga/pages/_document.js
deleted file mode 100644
index 2a59afeb93..0000000000
--- a/examples/with-yoga/pages/_document.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import Document from 'next/document'
-import { ServerStyleSheet } from 'styled-components'
-
-export default class MyDocument extends Document {
-  static async getInitialProps(ctx) {
-    const sheet = new ServerStyleSheet()
-    const originalRenderPage = ctx.renderPage
-
-    try {
-      ctx.renderPage = () =>
-        originalRenderPage({
-          enhanceApp: (App) => (props) =>
-            sheet.collectStyles(<App {...props} />),
-        })
-
-      const initialProps = await Document.getInitialProps(ctx)
-      return {
-        ...initialProps,
-        styles: (
-          <>
-            {initialProps.styles}
-            {sheet.getStyleElement()}
-          </>
-        ),
-      }
-    } finally {
-      sheet.seal()
-    }
-  }
-}
diff --git a/examples/with-yoga/pages/index.js b/examples/with-yoga/pages/index.tsx
similarity index 100%
rename from examples/with-yoga/pages/index.js
rename to examples/with-yoga/pages/index.tsx
diff --git a/examples/with-yoga/tsconfig.json b/examples/with-yoga/tsconfig.json
new file mode 100644
index 0000000000..80baeb3dbf
--- /dev/null
+++ b/examples/with-yoga/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "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", "yoga.d.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/with-yoga/yoga.d.ts b/examples/with-yoga/yoga.d.ts
new file mode 100644
index 0000000000..c40f516664
--- /dev/null
+++ b/examples/with-yoga/yoga.d.ts
@@ -0,0 +1 @@
+declare module '@gympass/yoga'
diff --git a/examples/with-zones/blog/next.config.js b/examples/with-zones/blog/next.config.js
index 32a86880ab..040d0f4b38 100644
--- a/examples/with-zones/blog/next.config.js
+++ b/examples/with-zones/blog/next.config.js
@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-module.exports = {
+const nextConfig = {
   basePath: '/blog',
 }
+
+module.exports = nextConfig
diff --git a/examples/with-zones/blog/package.json b/examples/with-zones/blog/package.json
index bc86c0e93c..6c43bedfca 100644
--- a/examples/with-zones/blog/package.json
+++ b/examples/with-zones/blog/package.json
@@ -10,5 +10,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "license": "MIT"
+  "devDependencies": {
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "typescript": "^4.9.3"
+  }
 }
diff --git a/examples/with-zones/blog/pages/index.js b/examples/with-zones/blog/pages/index.tsx
similarity index 57%
rename from examples/with-zones/blog/pages/index.js
rename to examples/with-zones/blog/pages/index.tsx
index 331d1ef5e2..a1701ccc2b 100644
--- a/examples/with-zones/blog/pages/index.js
+++ b/examples/with-zones/blog/pages/index.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import Image from 'next/image'
 
 export default function Blog() {
   return (
@@ -13,15 +12,7 @@ export default function Blog() {
           <Link href="/post/2">Post 2</Link>
         </li>
       </ul>
-      <a href="/">Home</a>
-      <div>
-        <Image
-          src="/blog/static/nextjs.png"
-          alt="Next.js logo"
-          width={200}
-          height={160}
-        />
-      </div>
+      <Link href="/">Home</Link>
     </div>
   )
 }
diff --git a/examples/with-zones/blog/pages/post/[id].js b/examples/with-zones/blog/pages/post/[id].tsx
similarity index 99%
rename from examples/with-zones/blog/pages/post/[id].js
rename to examples/with-zones/blog/pages/post/[id].tsx
index 7a26c24205..39ccf844a8 100644
--- a/examples/with-zones/blog/pages/post/[id].js
+++ b/examples/with-zones/blog/pages/post/[id].tsx
@@ -3,6 +3,7 @@ import { useRouter } from 'next/router'
 
 export default function Post() {
   const router = useRouter()
+
   return (
     <div>
       <h3>Post #{router.query.id}</h3>
diff --git a/examples/with-zones/blog/public/static/nextjs.png b/examples/with-zones/blog/public/static/nextjs.png
deleted file mode 100644
index 98cbbf09ad..0000000000
Binary files a/examples/with-zones/blog/public/static/nextjs.png and /dev/null differ
diff --git a/examples/with-zones/blog/tsconfig.json b/examples/with-zones/blog/tsconfig.json
new file mode 100644
index 0000000000..99710e8578
--- /dev/null
+++ b/examples/with-zones/blog/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "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"]
+}
diff --git a/examples/with-zones/home/components/Header.js b/examples/with-zones/home/components/Header.js
deleted file mode 100644
index 1642a42101..0000000000
--- a/examples/with-zones/home/components/Header.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const Header = () => (
-  <div>
-    <h2>The Company</h2>
-  </div>
-)
-
-export default Header
diff --git a/examples/with-zones/home/components/Header.tsx b/examples/with-zones/home/components/Header.tsx
new file mode 100644
index 0000000000..e1f9b5a81e
--- /dev/null
+++ b/examples/with-zones/home/components/Header.tsx
@@ -0,0 +1,7 @@
+export default function Header() {
+  return (
+    <div>
+      <h2>The Company</h2>
+    </div>
+  )
+}
diff --git a/examples/with-zones/home/next.config.js b/examples/with-zones/home/next.config.js
index a6bde77803..e54732bb0e 100644
--- a/examples/with-zones/home/next.config.js
+++ b/examples/with-zones/home/next.config.js
@@ -1,7 +1,7 @@
 const { BLOG_URL } = process.env
 
 /** @type {import('next').NextConfig} */
-module.exports = {
+const nextConfig = {
   async rewrites() {
     return [
       {
@@ -19,3 +19,5 @@ module.exports = {
     ]
   },
 }
+
+module.exports = nextConfig
diff --git a/examples/with-zones/home/package.json b/examples/with-zones/home/package.json
index 328ccb430d..2252065ea0 100644
--- a/examples/with-zones/home/package.json
+++ b/examples/with-zones/home/package.json
@@ -10,5 +10,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "license": "MIT"
+  "devDependencies": {
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "typescript": "^4.9.3"
+  }
 }
diff --git a/examples/with-zones/home/pages/about.js b/examples/with-zones/home/pages/about.js
deleted file mode 100644
index b5b0e24aef..0000000000
--- a/examples/with-zones/home/pages/about.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Link from 'next/link'
-
-const About = () => (
-  <div>
-    <p>This is the about page.</p>
-    <div>
-      <Link href="/">Go Back</Link>
-    </div>
-    <img width={200} src="/static/vercel.png" />
-  </div>
-)
-
-export default About
diff --git a/examples/with-zones/home/pages/about.tsx b/examples/with-zones/home/pages/about.tsx
new file mode 100644
index 0000000000..52733e5902
--- /dev/null
+++ b/examples/with-zones/home/pages/about.tsx
@@ -0,0 +1,12 @@
+import Link from 'next/link'
+
+export default function About() {
+  return (
+    <div>
+      <p>This is the about page.</p>
+      <div>
+        <Link href="/">Go Back</Link>
+      </div>
+    </div>
+  )
+}
diff --git a/examples/with-zones/home/pages/index.js b/examples/with-zones/home/pages/index.tsx
similarity index 70%
rename from examples/with-zones/home/pages/index.js
rename to examples/with-zones/home/pages/index.tsx
index 80c2ed1f16..8a8731a315 100644
--- a/examples/with-zones/home/pages/index.js
+++ b/examples/with-zones/home/pages/index.tsx
@@ -1,6 +1,5 @@
 import Link from 'next/link'
 import dynamic from 'next/dynamic'
-import Image from 'next/image'
 
 const Header = dynamic(import('../components/Header'))
 
@@ -15,12 +14,6 @@ export default function Home() {
       <div>
         <Link href="/about">About us</Link>
       </div>
-      <Image
-        src="/static/nextjs.png"
-        alt="Next.js logo"
-        width={200}
-        height={160}
-      />
     </div>
   )
 }
diff --git a/examples/with-zones/home/public/static/nextjs.png b/examples/with-zones/home/public/static/nextjs.png
deleted file mode 100644
index 98cbbf09ad..0000000000
Binary files a/examples/with-zones/home/public/static/nextjs.png and /dev/null differ
diff --git a/examples/with-zones/home/public/static/vercel.png b/examples/with-zones/home/public/static/vercel.png
deleted file mode 100644
index 8b80fabb35..0000000000
Binary files a/examples/with-zones/home/public/static/vercel.png and /dev/null differ
diff --git a/examples/with-zones/home/tsconfig.json b/examples/with-zones/home/tsconfig.json
new file mode 100644
index 0000000000..99710e8578
--- /dev/null
+++ b/examples/with-zones/home/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "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"]
+}