Absolute imports in Next.js

May 11, 2021

Learn how to set up absolute imports in Next.js by adding a jsconfig.json file with baseUrl set to the project root, so you can drop those relative paths.

~~~

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.

Tagged: Next.js · All topics

~~~