DEV Community

Cover image for Path Aliases in Next.js
Abdulrahman Olalekan
Abdulrahman Olalekan

Posted on • Updated on

Path Aliases in Next.js

I recently started learning Next.js and used path aliases in a project, and guess what? It significantly improves the quality of my code. Are you curious as to how this is possible? Let me show you how it's done...

What is the problem? "Relative Path Hell"
Typing paths is time-consuming and error-prone and it can be complicated at times. Even with code completion capabilities like IntelliSense (which is supported by practically every IDE or text editor), as your codebase expands, this might become increasingly difficult.

Here's an example of a relative path that requires accessing many path levels when attempting to import.

Relative path

How can we solve this?
Shortening our import paths, which can be accomplished via "Path Aliases," can make things a little easier.

path aliases


How can we build up path aliases in a project that is structured like this?

Project Structure

  • To make use of path alias, create a "jsconfig.json" file or ("tsconfig.json" if using typescript) in the project root and configure it as shown below.

alias config

What next?
There's nothing further to set up; you can now use path aliases in your application while importing.

In conclusion, every update to the "json" file necessitates a server restart.

I would like to connect with you.
LinkedIn Github Twitter

Top comments (7)

Collapse
 
_genjudev profile image
Larson • Edited

Well this would not work and components will not be resolved.
Components are in your src folder. But the compilation is done in the root folder. You need to change it.

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/components/*": ["/src/components/*"]
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Or by changing the baseUrl

{
    "compilerOptions": {
        "baseUrl": "./src/",
        "paths": {
            "@/components/*": ["/components/*"]
        }
    }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
mbappai profile image
Mujahid Bappai

I think his solution will work for him since his component folder is directly under the root folder.

Collapse
 
gbotemi_dev profile image
gbotemi_dev

His approach worked fine for me. Your second approach of changing the baseUrl also worked fine. But your first approach didn't work.

Collapse
 
joelstransky profile image
Joel Stransky

Just to add some contrast to this because devops.
Webpack also supports aliases which work across file types.

config: {
  resolve: {
    alias: {
      "@components": path.resolve(__dirname, "../src/components"),
      }
  }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
tylerjusfly profile image
Tyler

Enlightening boss. Good Job
I'm proud of you.

Collapse
 
brock_au profile image
Jason Brock

anyone else having issues with alias' not working with Storybook?
Absolute path for jsx imports work fine, converting imports to alias' causes "Couldn't find story matching" 😪

Collapse
 
eimaam profile image
Imam Dahir Dan-Azumi

Oh yeah! Storybook doesn't recognize alias imports. I have been having that issue working with Storybook and Next.js "@" imports.