Absolute imports in Next.js
New Courses Coming Soon
Join the waiting lists
Wouldn’t it be great if we could avoid relative paths in imports, in our React components in Next.js?
So instead of for example:
import Layout from '../../components/layout'
We could just write:
import Layout from 'components/layout'
This is possible, and it’s called absolute imports.
Just add a file named jsconfig.json
in the root of your project with this content:
{
"compilerOptions": {
"baseUrl": "."
}
}
That’s it, absolute imports will start working.
→ Get my Next.js (pages router) Handbook
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X