From 6f136f6a7ef00e35d9d4ed3d7fd8bbfbbcaefd29 Mon Sep 17 00:00:00 2001 From: Max Proske Date: Mon, 7 Nov 2022 14:19:42 -0800 Subject: [PATCH] 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 --- docs/advanced-features/module-path-aliases.md | 2 +- examples/with-absolute-imports/README.md | 22 ++++++++++++++-- .../components/button.tsx | 3 +++ .../components/{header.js => header.tsx} | 0 examples/with-absolute-imports/jsconfig.json | 5 ---- examples/with-absolute-imports/package.json | 6 +++++ examples/with-absolute-imports/pages/index.js | 9 ------- .../with-absolute-imports/pages/index.tsx | 11 ++++++++ examples/with-absolute-imports/tsconfig.json | 26 +++++++++++++++++++ 9 files changed, 67 insertions(+), 17 deletions(-) create mode 100644 examples/with-absolute-imports/components/button.tsx rename examples/with-absolute-imports/components/{header.js => header.tsx} (100%) delete mode 100644 examples/with-absolute-imports/jsconfig.json delete mode 100644 examples/with-absolute-imports/pages/index.js create mode 100644 examples/with-absolute-imports/pages/index.tsx create mode 100644 examples/with-absolute-imports/tsconfig.json 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
Examples
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 +} 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 ( -
-
-
- ) -} 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 ( + <> +
+