Absolute Imports in Next.js

Welcome to Blogvent, day 7!

We’ve all been there, you’re organizing your files in a project, and you see a dreaded import statement:

import Button from '../../../../designsystem/buttons/Button'

Gross. Now that you’ve re-arranged some folders and files, what breaks? What imports have to change? How many files have to be updated?

Next.js has a handy little feature built right into the framework for that, called absolute imports.

With absolute imports, you can alias certain folders to a name, and not have to worry about all of the files that change when you do!

Implementing absolute imports

Make a (or use your existing) jsconfig.json at the top of your project. If you’re using TypeScript, you can make a tsconfig.json instead. Put something like this inside of that file:

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@components/*": ["src/components/*"],
      "@designsystem/*": ["src/designsystem/*"],
      "@buttons/*": ["src/designsystem/buttons"]
    }
  }
}

The baseUrl here allows you to import directly from the root of the project (or wherever you put it), and the paths are all of the different paths that have a “nickname”.

Your import statement from earlier can now look like:

import Button from '@buttons/Button'

Now, if you ever rearrange big folders, you can change it just in the one jsconfig file, or no changes will be needed because your imports in each individual file stay the same!

Cool! How does this work in a production app?

Glad you asked! If you’d like to see a working example of this, check out the Jamstack Explorers repository:

• The jsconfig file
• Example imports on the About page