diff --git a/docs/advanced-features/module-path-aliases.md b/docs/advanced-features/module-path-aliases.md
index 8015f82667cd..ec19e194bbfd 100644
--- a/docs/advanced-features/module-path-aliases.md
+++ b/docs/advanced-features/module-path-aliases.md
@@ -7,7 +7,7 @@ description: Configure module path aliases that allow you to remap certain impor
 <details>
   <summary><b>Examples</b></summary>
   <ul>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-absolute-imports">Absolute Imports</a></li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-absolute-imports">Absolute Imports and Aliases</a></li>
   </ul>
 </details>
 
diff --git a/examples/with-absolute-imports/README.md b/examples/with-absolute-imports/README.md
index 8a35deaf0acd..1d30ec808a3d 100644
--- a/examples/with-absolute-imports/README.md
+++ b/examples/with-absolute-imports/README.md
@@ -1,6 +1,24 @@
-# Example app with absolute imports
+# Absolute Imports and Aliases
 
-This example shows how to configure Babel to have absolute imports instead of relative imports without modifying the Webpack configuration.
+This example shows how to configure [Absolute imports and Module path aliases](https://nextjs.org/docs/advanced-features/module-path-aliases) in `tsconfig.json` (or `jsconfig.json` for JavaScript projects). These options will allow absolute imports from `.` (the root directory), and allow you to create custom import aliases.
+
+If you’re working on a large project, your relative import statements might suffer from `../../../` spaghetti:
+
+```tsx
+import Button from '../../../components/button'
+```
+
+In such cases, we might want to setup absolute imports using the `baseUrl` option, for clearer and shorter imports:
+
+```tsx
+import Button from 'components/button'
+```
+
+Furthermore, TypeScript also supports the `paths` option, which allows you to configure custom module aliases. You can then use your alias like so:
+
+```tsx
+import Button from '@/components/button'
+```
 
 ## Deploy your own
 
diff --git a/examples/with-absolute-imports/components/button.tsx b/examples/with-absolute-imports/components/button.tsx
new file mode 100644
index 000000000000..1deaded46204
--- /dev/null
+++ b/examples/with-absolute-imports/components/button.tsx
@@ -0,0 +1,3 @@
+export default function Button() {
+  return <button>👋 Hello</button>
+}
diff --git a/examples/with-absolute-imports/components/header.js b/examples/with-absolute-imports/components/header.tsx
similarity index 100%
rename from examples/with-absolute-imports/components/header.js
rename to examples/with-absolute-imports/components/header.tsx
diff --git a/examples/with-absolute-imports/jsconfig.json b/examples/with-absolute-imports/jsconfig.json
deleted file mode 100644
index 36aa1a4dc28f..000000000000
--- a/examples/with-absolute-imports/jsconfig.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": "."
-  }
-}
diff --git a/examples/with-absolute-imports/package.json b/examples/with-absolute-imports/package.json
index bf29745bfe27..1412a9c80e17 100644
--- a/examples/with-absolute-imports/package.json
+++ b/examples/with-absolute-imports/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.8",
+    "typescript": "^4.8.4"
   }
 }
diff --git a/examples/with-absolute-imports/pages/index.js b/examples/with-absolute-imports/pages/index.js
deleted file mode 100644
index 54c8bf264718..000000000000
--- a/examples/with-absolute-imports/pages/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Header from 'components/header.js'
-
-export default function Home() {
-  return (
-    <div>
-      <Header />
-    </div>
-  )
-}
diff --git a/examples/with-absolute-imports/pages/index.tsx b/examples/with-absolute-imports/pages/index.tsx
new file mode 100644
index 000000000000..47f057a3b481
--- /dev/null
+++ b/examples/with-absolute-imports/pages/index.tsx
@@ -0,0 +1,11 @@
+import Header from 'components/header'
+import Button from '@/components/button'
+
+export default function Home() {
+  return (
+    <>
+      <Header />
+      <Button />
+    </>
+  )
+}
diff --git a/examples/with-absolute-imports/tsconfig.json b/examples/with-absolute-imports/tsconfig.json
new file mode 100644
index 000000000000..e4af55521951
--- /dev/null
+++ b/examples/with-absolute-imports/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "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,
+    // Using "baseUrl" allows you to use absolute paths
+    "baseUrl": ".",
+    // Using "paths" allows you to configure module path aliases
+    "paths": {
+      "@/components/*": ["components/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}