Convert with-absolute-imports example to TypeScript (#42529)

Converted example to TypeScript to match Contribution docs.

- ~~Renamed `with-absolute-imports` example to
`absolute-imports-and-aliases` to match Contribution docs~~
- ~~Replaced deprecated example with a `README.md` file~~
- Used module path aliases in example, to help developers decide which
import strategy to use

## Documentation / Examples

- [X] Make sure the linting passes by running `pnpm build && pnpm lint`
- [X] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

Co-authored-by: JJ Kasper <jj@jjsweb.site>

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>
 

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
 

examples/with-absolute-imports/components/button.tsx

@@ -0,0 +1,3 @@
+export default function Button() {
+  return <button>👋 Hello</button>
+}

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"
   }
 }

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 />
+    </>
+  )
+}

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"]
+}