Today I thought I'd do a quick little post on using absolute imports with Next.JS as recently I was getting tired of the way I was including files. What am I talking about? The way I had it in code previously was:
```import { StyledContentBlock } from \"../elements/ContentBlock\"; ```
And after:
```import { StyledContentBlock } from \"components/elements/ContentBlock\"; ```
Why use that?
For me, the first method has worked since I've started building ou the front end of my website, but I wasn't happy with it. If one isn't sure where in the file tree they fall it can take some time to dig through folders to find where its located, and then make sure you get the location right or deal with compiler errors that could take many seconds to be informed of while building or worse not till a full compile is done if one isn't doing HMR. I personally like this method, as I can define top-level things and drill down from there, as usual, I know where things are located from that point. I know a lot of this can be solved using VScode extensions but what about someone who might not be using an editor that supports IntelliSense? They need an easy way.
The Solution
Adding absolute imports is pretty easy, and only varies slightly if using TypeScript. First, we need to create a **next.config.js** file in the root of your project. then the following code to get it working, keep in mind your config might be different but the general applies:
```\r\nconst path = require('path');
const nextConfig = { webpack: (config) => {
config.resolve.alias.components = path.join(__dirname, 'components');
return config;
}
};
module.exports = nextConfig;
```
The key line here is **config.resolve.alias**, what follows that is what you want Webpack to use, in this example **components**. The path.join is the location relative to the root, which in the case of my project is on the root. That's it! Simple enough? On my website I've got numerous set up this way, for components, static data like JSON and markdown, to the pages folder, and even utils. This allowed me to go back and refactor many things to improve my ability to tell where these things come from.
About Typescript
So you use Typescript in your project? No problem. One of the things that weren't obvious when I did this and led to the frustration was that you also needed to do something in your **tsconfig.json** file for Typescript to resolve properly and this wasn't mentioned in the examples I was seeing as they were leaving out Typescript.
As follows is what you need to include in your tsconfig file, modified of course for brevity:
```
{
\"compilerOptions\": {\"baseUrl\": \".\", \"paths\": { \"components/*\": [\"components/*\"] } }
}
```
Once again, one line for each different alias you build in, so mine has a few more lines but the syntax is similar. The first part tells the compiler anything imported from components should resolve to the components folder and so on.
Conclusion
I really wish I had known about this from the get-go, or that NextJS had this built-in by default as I would have been using this method from the start, as a result I've been spending time refactoring and switching all my components to use this, and already my readability is improved due to it. Give it a go!