Wouldn’t it be great if we could avoid relative paths in imports, in our React components in Next.js?

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.