diff --git a/examples/with-app-layout/README.md b/examples/with-app-layout/README.md
index 732da961b7dce82..669cabb989c2d6e 100644
--- a/examples/with-app-layout/README.md
+++ b/examples/with-app-layout/README.md
@@ -1,6 +1,6 @@
 # With `App` layout example
 
-Shows how to use \_app.js to implement a global layout for all pages.
+Shows how to use `_app.tsx` to implement a global layout for all pages.
 
 ## Deploy your own
 
diff --git a/examples/with-app-layout/package.json b/examples/with-app-layout/package.json
index bf29745bfe271d9..fca0b75a59c0df2 100644
--- a/examples/with-app-layout/package.json
+++ b/examples/with-app-layout/package.json
@@ -9,5 +9,11 @@
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "typescript": "^4.8.4"
   }
 }
diff --git a/examples/with-app-layout/pages/_app.js b/examples/with-app-layout/pages/_app.js
deleted file mode 100644
index b9879f4c2e01294..000000000000000
--- a/examples/with-app-layout/pages/_app.js
+++ /dev/null
@@ -1,9 +0,0 @@
-const Layout = ({ children }) => <div className="layout">{children}</div>
-
-export default function App({ Component, pageProps }) {
-  return (
-    <Layout>
-      <Component {...pageProps} />
-    </Layout>
-  )
-}
diff --git a/examples/with-app-layout/pages/_app.tsx b/examples/with-app-layout/pages/_app.tsx
new file mode 100644
index 000000000000000..d949ab5504583f7
--- /dev/null
+++ b/examples/with-app-layout/pages/_app.tsx
@@ -0,0 +1,17 @@
+import type { AppProps } from 'next/app'
+
+interface LayoutProps {
+  children: React.ReactNode
+}
+
+const Layout = ({ children }: LayoutProps) => (
+  <div className="layout">{children}</div>
+)
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  )
+}
diff --git a/examples/with-app-layout/pages/index.js b/examples/with-app-layout/pages/index.tsx
similarity index 100%
rename from examples/with-app-layout/pages/index.js
rename to examples/with-app-layout/pages/index.tsx
diff --git a/examples/with-app-layout/tsconfig.json b/examples/with-app-layout/tsconfig.json
new file mode 100644
index 000000000000000..b8d597880a1ae63
--- /dev/null
+++ b/examples/with-app-layout/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"]
+}