2020-05-06 10:56:06 +02:00
|
|
|
---
|
|
|
|
description: Configure module path aliases that allow you to remap certain import paths.
|
|
|
|
---
|
|
|
|
|
2020-05-16 15:04:18 +02:00
|
|
|
# Absolute Imports and Module path aliases
|
2020-05-06 10:56:06 +02:00
|
|
|
|
|
|
|
Next.js automatically supports the `tsconfig.json` and `jsconfig.json` `"paths"` and `"baseUrl"` options.
|
|
|
|
|
|
|
|
> Note: `jsconfig.json` can be used when you don't use TypeScript
|
|
|
|
|
|
|
|
These option allow you to configure module aliases, for example a common pattern is aliasing certain directories to use absolute paths.
|
|
|
|
|
|
|
|
One useful feature of these options is that they integrate automatically into certain editors, for example vscode.
|
|
|
|
|
|
|
|
The `baseUrl` configuration option allows you to import directly from the root of the project.
|
|
|
|
|
|
|
|
An example of this configuration:
|
|
|
|
|
|
|
|
```json
|
|
|
|
// tsconfig.json or jsconfig.json
|
|
|
|
{
|
|
|
|
"compilerOptions": {
|
|
|
|
"baseUrl": "."
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
// components/button.js
|
|
|
|
export default function Button() {
|
|
|
|
return <button>Click me</button>
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
// pages/index.js
|
|
|
|
import Button from 'components/button'
|
|
|
|
|
|
|
|
export default function HomePage() {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<h1>Hello World</h1>
|
|
|
|
<Button />
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
While `baseUrl` is useful you might want to add other aliases that don't match 1 on 1. For this TypeScript has the `"paths"` option.
|
|
|
|
|
2020-05-15 11:54:27 +02:00
|
|
|
Using `"paths"` allows you to configure module aliases. For example `@/components/*` to `components/*`.
|
2020-05-06 10:56:06 +02:00
|
|
|
|
|
|
|
An example of this configuration:
|
|
|
|
|
|
|
|
```json
|
|
|
|
// tsconfig.json or jsconfig.json
|
|
|
|
{
|
|
|
|
"compilerOptions": {
|
|
|
|
"baseUrl": ".",
|
|
|
|
"paths": {
|
2020-05-11 13:52:59 +02:00
|
|
|
"@/components/*": ["components/*"]
|
2020-05-06 10:56:06 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
// components/button.js
|
|
|
|
export default function Button() {
|
|
|
|
return <button>Click me</button>
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
// pages/index.js
|
2020-05-11 13:52:59 +02:00
|
|
|
import Button from '@/components/button'
|
2020-05-06 10:56:06 +02:00
|
|
|
|
|
|
|
export default function HomePage() {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<h1>Hello World</h1>
|
|
|
|
<Button />
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
```
|