Wouldn’t it be great if we could avoid relative paths in our React component imports 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.

Lessons in this unit:

0:	Introduction
1:	▶︎ Absolute imports in Next.js
2:	How to change a Next.js app port
3:	Next.js, adding features just to development mode
4:	Next.js: how to show something in development and hide in production
5:	Adding a wrapper component to your Next.js app