Absolute imports in Next.js

🆕 🔜 Check this out if you dream of running a solo Internet business 🏖️

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.