Absolute imports are indeed a game-changer, at least for me. At times when you have different directories or files to import from, you’d perhaps know the challenge of trying to remember every folder structure so you don’t mess up while importing content.
Remember when you had to spend some time figuring out if the file you have imported is even the right one? It can get unexciting if that happens quite often. Imagine getting caught up in trying to identify if you have the right dots to your import path. As you can see in the image below, the left side of the split-screen shows the clutter due to relative paths while absolute paths on the right are much more cleaner and readable.
To make imports more readable Next.js has introduced the concept of absolute imports and module path alias options from v9.4. This is all possible through a config file that is supported automatically from Next.js v9.4 onwards. The files are tsconfig.json for Typescript and jsconfig.json for Javascript.
Before and After Absolute Imports
Without absolute imports, we had to drill down the actual path of the import.
With absolute imports, it’s clean and easy.
Implementation
Let us look at how we can configure to use absolute imports. A typical configuration looks something like this:
Here, the baseUrl denotes the root of the project. So, if we have a directory called "lib" at the root of our project, we can make a direct import like so:
We have another option called paths to configure module aliases. While the baseUrl option can help us deal with most directories but what if we have deep-rooted directories with multiple components within. In those cases, absolute imports don't help much. Let us imagine we have an import like so:
It would still be tedious to write the above import statement even with absolute import in place. So we can make use of paths to declare module aliases. The configuration would look something like this:
The import after configuring module aliases will help us avoid writing the exact import path which can be very hard and tricky to remember. At least it helps us remove all the dotted clutter which doesn’t make sense really.
There you go you can now let away any burden of remembering directories and paths using this handy feature provided by Next.js.
