Absolute Imports and Module Path Aliases
Examples
Absolute Imports and Aliases
Next.js has in-built support for the "paths" and "baseUrl" options of tsconfig.json and jsconfig.json files.
These options allow you to alias project directories to absolute paths, making it easier to import modules. For example:
 // before
import { Button } from '../../../components/button'
 
// after
import { Button } from '@/components/button'
Good to know: create-next-app will prompt to configure these options for you.
Absolute Imports
The baseUrl configuration option allows you to import directly from the root of the project.
An example of this configuration:
tsconfig.json or jsconfig.json {
  "compilerOptions": {
    "baseUrl": "."
  }
}
components/button.tsx export default function Button() {
  return <button>Click me</button>
}
app/page.tsx import Button from 'components/button'