Absolute imports in Next.js
TypeScript Masterclass
Join the waiting list!
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
I wrote 20 books to help you become a better developer:
- JavaScript Handbook
- TypeScript Handbook
- CSS Handbook
- Node.js Handbook
- Astro Handbook
- HTML Handbook
- Next.js Pages Router Handbook
- Alpine.js Handbook
- HTMX Handbook
- React Handbook
- SQL Handbook
- Git Cheat Sheet
- Laravel Handbook
- Express Handbook
- Swift Handbook
- Go Handbook
- PHP Handbook
- Python Handbook
- Linux/Mac CLI Commands Handbook
- C Handbook